/* ==========================================================================
   ZAO — Animations. JS (IntersectionObserver) is the universal baseline;
   native scroll-driven animation is layered as progressive enhancement,
   feature-detected with @supports. Everything is gated by reduced-motion.
   ========================================================================== */

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

/* --- Reveal-on-scroll baseline (JS toggles .in) -------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* Progressive enhancement: where scroll-timelines exist, drive the reveal by
   scroll position instead of a one-shot transition. JS detects support and
   sets body.has-scroll-anim so it can stop double-driving these elements. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    body.has-scroll-anim .reveal{
      opacity:1; transform:none; transition:none;
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 32%;
    }
  }
}
@keyframes reveal-in{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}

/* --- Kinetic headline: weight + optical size mapped to scroll ------------ */
/* Bricolage exposes wght + opsz axes (no width axis), so we animate those. */
.kinetic{ font-variation-settings:'wght' 560, 'opsz' 40; }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    body.has-scroll-anim .kinetic{
      animation:kinetic-axis linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 55%;
    }
  }
}
@keyframes kinetic-axis{
  from{ font-variation-settings:'wght' 340, 'opsz' 14; letter-spacing:.01em; }
  to  { font-variation-settings:'wght' 800, 'opsz' 96; letter-spacing:-.025em; }
}

/* --- SVG diagram "self-draw" -------------------------------------------- */
/* diagrams.js measures each stroke and sets --len; class .draw-path applies
   the dash. Scroll-scrubbed where supported, else a timed transition (added
   by JS via .is-drawing when the figure enters view). */
.diagram-draw .draw-path{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
}
.diagram-draw.is-drawing .draw-path{
  transition:stroke-dashoffset 1.1s var(--ease);
  stroke-dashoffset:0;
}
.diagram-draw .draw-path:nth-of-type(2){ transition-delay:.12s; }
.diagram-draw .draw-path:nth-of-type(3){ transition-delay:.24s; }
.diagram-draw .draw-path:nth-of-type(4){ transition-delay:.36s; }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    body.has-scroll-anim .diagram-draw.scrolldraw .draw-path{
      transition:none;
      animation:draw-in linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 62%;
    }
  }
}
@keyframes draw-in{ to{ stroke-dashoffset:0; } }

/* --- Blinking status dot ------------------------------------------------- */
.pulse-dot{ position:relative; }
.pulse-dot::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 0 var(--tint-red);
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(212,43,28,.4); }
  70%{ box-shadow:0 0 0 8px rgba(212,43,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,43,28,0); }
}

/* --- Scroll hint --------------------------------------------------------- */
.scroll-hint{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-hint-line{ width:1px; height:34px; background:linear-gradient(var(--ink-3),transparent); animation:hint 2s var(--ease) infinite; }
@keyframes hint{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  .ticker-track{ animation:none!important; }
  .diagram-draw .draw-path{ stroke-dashoffset:0!important; }
  .kinetic{ font-variation-settings:'wght' 620,'opsz' 60!important; }
  .pipe-flow{ display:none!important; }
}