/* ============================================================
   animations.css
   Reveal states + keyframes. GSAP drives most motion in JS;
   these are the CSS-side hooks and ambient loops.
   ============================================================ */

/* ---- Reveal primitives (JS toggles .is-in) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Stagger children via inline --i (set in JS or markup) */
[data-reveal][style*="--i"] { transition-delay: calc(var(--i) * 70ms); }

/* Line-clip reveal used by SplitType headings (fallback path) */
.line > .line-inner {
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.is-in .line > .line-inner,
.hero.is-ready .line > .line-inner { transform: translateY(0); }

/* ---- Ambient keyframes ---- */
@keyframes tide-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.08); }
}
@keyframes tide-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -4%, 0) scale(1.1); }
}
@keyframes cue-slide {
  0%   { transform: translateY(0); }
  100% { transform: translateY(200%); }
}
@keyframes loader-mark {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* ---- Loader reveal ---- */
body.is-loaded .loader {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur-slow) var(--ease-out) 80ms;
}

/* ---- Respect reduced motion: cancel transforms/loops ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .line > .line-inner { transform: none; }
  .tide__blob { animation: none; }
  .hero__cue .rail::after { animation: none; }
}