/* ==========================================================================
   SRP FOUNDATION — ANIMATION LAYER
   Keyframes + scroll-reveal utility classes driven by IntersectionObserver
   in assets/js/animations.js. Restrained, purposeful, never gimmicky.
   ========================================================================== */

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@keyframes spin-slow{
  to{ transform: rotate(360deg); }
}

/* ---------- Generic reveal-on-scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade{
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.reveal-fade.is-visible{ opacity: 1; }

.reveal-line{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-in-out);
}
.reveal-line.is-visible{ transform: scaleX(1); }

/* Stagger helper: children get incremental delay via inline style set in JS,
   fallback stagger via nth-child for no-JS resilience */
.reveal[data-delay="1"]{ transition-delay: 90ms; }
.reveal[data-delay="2"]{ transition-delay: 180ms; }
.reveal[data-delay="3"]{ transition-delay: 270ms; }
.reveal[data-delay="4"]{ transition-delay: 360ms; }
.reveal[data-delay="5"]{ transition-delay: 450ms; }
.reveal[data-delay="6"]{ transition-delay: 540ms; }
.reveal[data-delay="7"]{ transition-delay: 630ms; }
.reveal[data-delay="8"]{ transition-delay: 720ms; }

/* ---------- Hero image parallax ---------- */
.hero__frame{ will-change: transform; }

/* ---------- Counter ---------- */
.impact__num[data-count]{ font-variant-numeric: tabular-nums; }

/* ---------- Loading state ---------- */
body:not(.is-loaded) .hero__eyebrow,
body:not(.is-loaded) .hero__sub{
  opacity: 0;
}
.hero__eyebrow, .hero__sub{
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
body:not(.is-loaded) .hero__sub{ transform: translateY(16px); }
.is-loaded .hero__eyebrow{ transition-delay: 120ms; }
.is-loaded .hero__sub{ transition-delay: 320ms; }
.is-loaded .hero__eyebrow, .is-loaded .hero__sub{ opacity: 1; }

body:not(.is-loaded) .hero__badge, body:not(.is-loaded) .hero__tag{
  opacity: 0;
  transform: translateY(10px);
}
.hero__badge, .hero__tag{ transition: opacity 800ms var(--ease-out) 900ms, transform 800ms var(--ease-out) 900ms; }
.is-loaded .hero__badge, .is-loaded .hero__tag{ opacity: 1; transform: translateY(0); }