/* ============================================================
   PDE Performance — Animations (glass-effect2 motion system)
   ============================================================ */

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
              transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger delays ── */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Legacy stagger classes */
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }
.d4 { transition-delay: 0.45s; }
.d5 { transition-delay: 0.60s; }

/* ── Split line text reveal ── */
.split-line {
  overflow: hidden;
  display: block;
  /* extra room above line so circumflexes/accents aren't clipped */
  padding-top: 0.12em;
  margin-top: -0.12em;
}
.split-line span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-revealed .split-line span { transform: translateY(0); }
.hero-revealed .split-line:nth-child(2) span { transition-delay: 120ms; }
.hero-revealed .split-line:nth-child(3) span { transition-delay: 240ms; }

/* ── Hero sub-elements fade in ── */
.hero-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--spring), transform 0.8s var(--spring);
}
.hero-revealed .hero-fade-in         { opacity: 1; transform: translateY(0); }
.hero-revealed .hero-fade-in.delay-300 { transition-delay: 400ms; }
.hero-revealed .hero-fade-in.delay-500 { transition-delay: 600ms; }
.hero-revealed .hero-fade-in.delay-600 { transition-delay: 750ms; }

/* ── Float keyframe (liquid blobs) ── */
@keyframes float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 50px) scale(1.1); }
}

/* ── Marquee keyframe ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Parallax ── */
.parallax-element { will-change: transform; }

/* ── Blob animation ── */
.motion-blob-anim {
  animation: float 10s infinite alternate ease-in-out;
}

/* ── Pulse dot ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* ── Scroll indicator bounce ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 1; }
  50%       { transform: translateY(14px) scaleY(0.6); opacity: 0.4; }
}

/* ── Marquee strip ── */
.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.marquee-content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 100%;
  animation: marquee 40s linear infinite;
}