/* =========================================================
   MOTION LAYER - 50 REASONS  (v2)

   Every animation in this file is declared INSIDE
   (prefers-reduced-motion: no-preference). A visitor who asks
   for reduced motion gets a completely static page. No
   exceptions, no JS dependency.

   v2 fix (P1-6): the scroll-in slam used to run
   `from{opacity:.15}` across `animation-range: entry 4%
   cover 22%`, which held on-screen cards at 0.62-0.83 opacity
   and dropped body text to 1.35:1 while the reader was reading
   it. It now:
     - starts at opacity .9 instead of .15, and
     - finishes across `entry 0% entry 60%`, i.e. while the
       card is still arriving, not while it sits on screen.
   Result: a card is fully opaque before it is readable.

   Flashing rule: nothing toggles faster than 3x/second.
   Blink 1.4s -> ~0.7 flashes/sec. Cursor 1.06s -> ~0.95/sec.
   Glitch 3.6s with 8-12% duty -> well under 3/sec.
   ========================================================= */

/* ---------- static fallbacks (always safe) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .ticker__track{transform:none !important;width:auto !important}
  .ticker__set{white-space:normal}
  .glitch{text-shadow:none !important}
  .blink{opacity:1 !important}
  .closer__cursor{opacity:1 !important}
}

@media (prefers-reduced-motion: no-preference){

  /* ---------- 1. TICKER MARQUEE (continuous, not a flash) -- */
  @keyframes ticker-scroll{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
  }
  .ticker__track{animation:ticker-scroll 22s linear infinite}
  .ticker:hover .ticker__track{animation-play-state:paused}

  /* ---------- 2. GLITCH / RGB SPLIT on the hero words ------ */
  @keyframes glitch-a{
    0%,88%,100%{transform:translate3d(0,0,0);text-shadow:3px 0 0 var(--pink),-3px 0 0 var(--cyan)}
    90%{transform:translate3d(-4px,1px,0);text-shadow:6px 0 0 var(--pink),-6px 0 0 var(--cyan)}
    93%{transform:translate3d(4px,-1px,0);text-shadow:-6px 0 0 var(--pink),6px 0 0 var(--cyan)}
    96%{transform:translate3d(-2px,0,0);text-shadow:2px 0 0 var(--pink),-2px 0 0 var(--cyan)}
  }
  @keyframes glitch-b{
    0%,90%,100%{transform:translate3d(0,0,0)}
    92%{transform:translate3d(4px,-1px,0)}
    95%{transform:translate3d(-4px,1px,0)}
  }
  .glitch{position:relative;animation:glitch-a 3.6s steps(1,end) infinite}
  .hero__word{animation-delay:.15s}
  .hero__word--alt{animation:glitch-b 3.6s steps(1,end) infinite;animation-delay:.3s}

  /* ---------- 3. BLINKING DOT (1.4s, ~0.7 flashes/sec) ---- */
  @keyframes blink-dot{0%,49%{opacity:1}50%,100%{opacity:.15}}
  .blink{animation:blink-dot 1.4s steps(1,end) infinite}

  /* ---------- 4. TYPING CURSOR (1.06s, ~0.95 flashes/sec) -- */
  @keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  .closer__cursor{animation:cursor-blink 1.06s steps(1,end) infinite}

  /* ---------- 5. HOVER JOLT (a transform, not a flash) ---- */
  @keyframes jolt{
    0%{transform:translate3d(0,0,0)}
    40%{transform:translate3d(-3px,2px,0)}
    70%{transform:translate3d(2px,-2px,0)}
    100%{transform:translate3d(0,0,0)}
  }
  .reason{transition:background-color .12s linear,color .12s linear}
  .reason:hover{animation:jolt .22s ease-out 1}
  .btn{transition:background-color .12s linear}
  .nav__list a{transition:border-color .12s linear,color .12s linear}

  /* ---------- 6. NEON GLOW on the kicker chip -------------
     Slow 4s pulse using tokens, never a hard on/off, so it
     contributes nothing to the flash count. */
  @keyframes neon-pulse{
    0%,100%{box-shadow:0 0 0 var(--cyan-glow-0)}
    50%{box-shadow:0 0 18px var(--cyan-glow-55)}
  }
  .hero__kicker{animation:neon-pulse 4s ease-in-out infinite}

  /* ---------- 7. SCROLL-IN SLAM ---------------------------
     P1-6 fix: opaque floor + a range that completes while the
     card is entering, not while it is being read. */
  @supports (animation-timeline:view()){
    @keyframes slam-in{
      from{opacity:.9;transform:translate3d(0,24px,0)}
      to{opacity:1;transform:translate3d(0,0,0)}
    }
    .reason{
      animation:slam-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
    @keyframes slam-head{
      from{opacity:.9;transform:translate3d(0,16px,0)}
      to{opacity:1;transform:translate3d(0,0,0)}
    }
    .blockbar__title{
      animation:slam-head linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
  }

}