/* ═══════════════════════════════════
   Scroll Reveal — Sections
   ═══════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════
   Staggered Children — Fade Up
   ═══════════════════════════════════ */

.reveal-child {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}

.reveal--visible .reveal-child {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════
   Staggered Children — Scale Up
   Used for cards (SVR, testimonials, profiles)
   ═══════════════════════════════════ */

.reveal-scale {
  opacity: 0;
  transform: scale(0.93) translateY(0.75rem);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}

.reveal--visible .reveal-scale {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ═══════════════════════════════════
   Staggered Children — Pop In
   Used for circular/icon elements (process nums, credentials)
   ═══════════════════════════════════ */

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  65%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.reveal-pop {
  opacity: 0;
}

.reveal--visible .reveal-pop {
  animation: pop-in 0.45s var(--ease-out) var(--stagger, 0ms) both;
}

/* ═══════════════════════════════════
   Section Label — Letter-Spacing Draw
   ═══════════════════════════════════ */

@keyframes label-draw {
  from {
    opacity: 0;
    letter-spacing: 0.02em;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    letter-spacing: 0.12em;
    transform: translateY(0);
  }
}

.reveal--visible .section-label {
  animation: label-draw 0.55s var(--ease-out) 0.05s both;
}

/* ═══════════════════════════════════
   SVR Operators — Bounce
   ═══════════════════════════════════ */

@keyframes operator-bounce {
  0%   { opacity: 0; transform: scale(0.5); }
  55%  { transform: scale(1.25); }
  80%  { transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.reveal--visible .svr__op {
  animation: operator-bounce 0.55s var(--ease-out) var(--op-delay, 500ms) both;
}

/* ═══════════════════════════════════
   Process Timeline — Line Draw
   ═══════════════════════════════════ */

@keyframes draw-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.process__steps--animated::before {
  transform-origin: top center;
  animation: draw-line 1s var(--ease-out) 0.2s both;
}

/* ═══════════════════════════════════
   Hero Entrance — Sequential Fade Up
   ═══════════════════════════════════ */

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-slide-in {
  from {
    opacity: 0;
    transform: translateX(2.5rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.hero--loaded .hero__eyebrow {
  animation: hero-fade-up 0.55s var(--ease-out) 0.1s both;
}

.hero--loaded .hero__heading {
  animation: hero-fade-up 0.65s var(--ease-out) 0.25s both;
}

.hero--loaded .hero__body {
  animation: hero-fade-up 0.55s var(--ease-out) 0.42s both;
}

.hero--loaded .hero__actions {
  animation: hero-fade-up 0.55s var(--ease-out) 0.58s both;
}

.hero--loaded .hero__credentials {
  animation: hero-fade-up 0.45s var(--ease-out) 0.75s both;
}

.hero--loaded .hero__visual {
  animation: hero-slide-in 0.8s var(--ease-out) 0.35s both;
}

/* ── Hero float keeps running after entrance ── */

.hero__illustration {
  animation: hero-float 6s ease-in-out infinite;
}

.hero--loaded .hero__visual .hero__illustration {
  animation: hero-slide-in 0.8s var(--ease-out) 0.35s both,
             hero-float 6s ease-in-out 1.15s infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ═══════════════════════════════════
   Reduced Motion — Disable Everything
   ═══════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-child,
  .reveal-scale,
  .reveal-pop {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .reveal--visible .section-label,
  .reveal--visible .svr__op,
  .reveal--visible .reveal-pop {
    animation: none;
  }

  .hero--loaded .hero__eyebrow,
  .hero--loaded .hero__heading,
  .hero--loaded .hero__body,
  .hero--loaded .hero__actions,
  .hero--loaded .hero__credentials,
  .hero--loaded .hero__visual,
  .hero--loaded .hero__visual .hero__illustration {
    animation: none;
  }

  .hero__illustration {
    animation: none;
  }

  .process__steps--animated::before {
    animation: none;
  }
}