/* =====================================================================
   HGN — Animations & scroll choreography
   IntersectionObserver toggles .in-view; CSS scroll-timelines enhance
   where supported. All motion gated by prefers-reduced-motion.
   ===================================================================== */

/* ---- Reveal primitives (JS adds .in-view on the section/element) ---- */
[data-reveal] {
  --rv-y: 28px; --rv-x: 0px; --rv-blur: 0px; --rv-delay: 0ms;
  opacity: 0;
  transform: translate3d(var(--rv-x), var(--rv-y), 0);
  filter: blur(var(--rv-blur));
  transition:
    opacity .9s var(--ease-out) var(--rv-delay),
    transform 1s var(--ease-out) var(--rv-delay),
    filter .9s var(--ease-out) var(--rv-delay);
  will-change: opacity, transform;
}
[data-reveal="fade"] { --rv-y: 0px; }
[data-reveal="left"] { --rv-x: -40px; --rv-y: 0px; }
[data-reveal="right"] { --rv-x: 40px; --rv-y: 0px; }
[data-reveal="blur"] { --rv-blur: 14px; --rv-y: 16px; }
[data-reveal="scale"] { transform: translate3d(0,var(--rv-y),0) scale(.94); }
[data-reveal].in-view { opacity: 1; transform: none; filter: none; }

/* stagger children */
[data-stagger] > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
[data-stagger].in-view > * { opacity: 1; transform: none; }
[data-stagger].in-view > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: .13s; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: .21s; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: .29s; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: .37s; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: .45s; }
[data-stagger].in-view > *:nth-child(7) { transition-delay: .53s; }
[data-stagger].in-view > *:nth-child(8) { transition-delay: .61s; }

/* ---- Line-by-line / word mask reveal for big headings ---- */
/* Keep block display so split headings wrap correctly and never flow inline
   into a preceding eyebrow/label (the word spans below are inline-block). */
.reveal-text { display: block; }
.reveal-text .line { display: block; overflow: hidden; }
.reveal-text .word { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-text .word > span {
  display: inline-block; transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
.reveal-text.in-view .word > span { transform: translateY(0); }
.reveal-text.in-view .word:nth-child(1) > span { transition-delay: .02s; }
.reveal-text.in-view .word:nth-child(2) > span { transition-delay: .07s; }
.reveal-text.in-view .word:nth-child(3) > span { transition-delay: .12s; }
.reveal-text.in-view .word:nth-child(4) > span { transition-delay: .17s; }
.reveal-text.in-view .word:nth-child(5) > span { transition-delay: .22s; }
.reveal-text.in-view .word:nth-child(6) > span { transition-delay: .27s; }
.reveal-text.in-view .word:nth-child(7) > span { transition-delay: .32s; }
.reveal-text.in-view .word:nth-child(8) > span { transition-delay: .37s; }
.reveal-text.in-view .word:nth-child(9) > span { transition-delay: .42s; }
.reveal-text.in-view .word:nth-child(n+10) > span { transition-delay: .47s; }

/* ---- Parallax (JS sets --py via translateY) ---- */
[data-parallax] { will-change: transform; }

/* ---- Decorative gradient blobs / mesh ---- */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.blob--teal { background: radial-gradient(circle at 30% 30%, var(--teal-400), transparent 70%); }
.blob--lime { background: radial-gradient(circle at 30% 30%, var(--lime), transparent 70%); }
.blob--ember { background: radial-gradient(circle at 30% 30%, var(--ember), transparent 70%); }
.blob--azure { background: radial-gradient(circle at 30% 30%, var(--azure), transparent 70%); }

.mesh {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(40% 50% at 18% 22%, color-mix(in srgb, var(--teal-500) 55%, transparent), transparent 70%),
    radial-gradient(38% 44% at 82% 28%, color-mix(in srgb, var(--azure) 42%, transparent), transparent 70%),
    radial-gradient(46% 50% at 65% 82%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 72%),
    radial-gradient(40% 46% at 25% 80%, color-mix(in srgb, var(--ember) 24%, transparent), transparent 72%);
  filter: blur(34px) saturate(1.15);
  animation: mesh-drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08) rotate(4deg); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.04) rotate(-3deg); }
}

/* ---- Aurora bar (thin animated gradient line) ---- */
.aurora-line { height: 2px; background: linear-gradient(90deg, transparent, var(--teal-500), var(--lime), var(--ember), transparent); background-size: 200% 100%; animation: aurora 6s linear infinite; }
@keyframes aurora { to { background-position: 200% 0; } }

/* ---- Floating idle motion ---- */
.float { animation: float 7s var(--ease-in-out) infinite; }
.float--slow { animation-duration: 11s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- Spin (slow) ---- */
.spin-slow { animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Audio waveform (SoniVera) ---- */
.wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.wave span { display: block; width: 4px; border-radius: 4px; background: currentColor; height: 30%; animation: wv 1.1s ease-in-out infinite; }
.wave span:nth-child(2n) { animation-duration: .9s; }
.wave span:nth-child(3n) { animation-duration: 1.4s; }
.wave span:nth-child(4n) { animation-duration: .7s; }
.wave.is-paused span { animation-play-state: paused; height: 22%; }
@keyframes wv { 0%,100% { height: 22%; } 50% { height: 100%; } }

/* ---- Marquee already in components; counters use .count ---- */

/* ---- Scroll-driven enhancement (modern browsers) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-fade] {
      animation: scroll-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes scroll-fade {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: none; }
    }
    /* pin-reveal scale for showcase imagery */
    [data-scroll-grow] {
      animation: scroll-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    @keyframes scroll-grow {
      from { transform: scale(1.18); }
      to   { transform: scale(1); }
    }
    /* horizontal pin track progress handled in JS for cross-browser */
  }
}

/* ---- Hover tilt base (JS sets --rx/--ry) ---- */
[data-tilt] { transform-style: preserve-3d; transition: transform .4s var(--ease-out); }
[data-tilt] .tilt-layer { transform: translateZ(40px); }

/* ---- Number flip-in for stats ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- Reduced motion: disable everything heavy ---- */
@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], [data-stagger] > *, .reveal-text .word > span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mesh, .float, .spin-slow, .wave span, .marquee__track, .aurora-line { animation: none !important; }
}