/* Progressive enhancement: the document remains the static landing without JS. */
@keyframes retake-scroll {
  0% { opacity:.18; transform:translateY(64px) scale(.92); }
  25% { opacity:1; transform:translateY(24px) scale(.98); }
  50% { opacity:1; transform:translateY(0) scale(1); }
  75% { opacity:1; transform:translateY(-24px) scale(.98); }
  100% { opacity:.18; transform:translateY(-64px) scale(.92); }
}
@keyframes retake-enter {
  from { opacity:.18; transform:translateY(36px) scale(.94); }
  to { opacity:1; transform:none; }
}
@keyframes retake-word {
  from { opacity:.12; transform:translateY(30px) rotate(3deg) scale(.9); }
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    html[data-motion-mode="native"] [data-motion] {
      animation:retake-scroll linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
  html[data-motion-mode="fallback"] [data-motion].motion-enter {
    animation:retake-enter 560ms cubic-bezier(.2,.7,.2,1) both;
  }
  html[data-motion-mode] .motion-word { display:inline-block; }
  html[data-motion-mode] .hero-arrive .motion-word {
    animation:retake-word 640ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--word) * 100ms);
  }
  .btn, .copybtn { transition:transform 140ms ease, opacity 140ms ease; }
  @media (hover:hover) { .btn:hover { transform:translateY(-2px); } }
  .btn:active, .copybtn:active { transform:scale(.98); }
}
/* Keyboard targets never move underneath focus. Video and its ancestors are
   deliberately excluded from data-motion, so playing media is always stable. */
[data-motion]:focus-within { animation:none !important; opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-motion], .motion-word, .btn, .copybtn {
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}