/* ---------- Motion system — tokens, reveals, hero, ticks, reduced-motion (Phase 3) ---------- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-ui: 180ms;
  --dur-reveal: 600ms;
  --stagger: 50ms;
}

@keyframes mv-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mv-shutter { to { transform: scaleY(0); visibility: hidden; } }
@keyframes mv-tickpop { 60% { scale: 1.3; } 100% { scale: 1; } }

/* Reveals — scroll-driven where supported; nothing is ever hidden at rest without JS */
@supports (animation-timeline: view()) {
  .reveal {
    animation: mv-rise var(--dur-reveal) var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry calc(0% + var(--i, 0) * 6%) entry calc(40% + var(--i, 0) * 6%);
  }
}
@supports not (animation-timeline: view()) {
  html.js .reveal { opacity: 0; transform: translateY(24px); }
  html.js .reveal.in { animation: mv-rise var(--dur-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
}

/* Hero — shutter once per session (home field, thesis, chapter motion: assets/js/home.js) */
.hero-shutter { display: none; }
html.mv-first .hero-shutter {
  display: block; position: absolute; inset: 0; z-index: 5;
  background: var(--ink); transform-origin: top;
  animation: mv-shutter 550ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

/* Ticks — spring pop. Cards pop when their reveal lands; Copy pops on insert */
html.js .reveal .tick, html.js .btn .tick { scale: 0; }
html.js .reveal.in .tick, html.js .btn .tick { animation: mv-tickpop 400ms var(--ease-spring) forwards; animation-delay: calc(200ms + var(--i, 0) * var(--stagger)); }
html.js .btn .tick { animation-delay: 0s; }

/* Reduced motion — opacity-only reveals, no shutter, instant scroll and navigation */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, html.js .reveal, html.js .reveal.in { animation-name: mv-fade; animation-duration: 300ms; transform: none; }
  html.mv-first .hero-shutter { display: none; }
  .tick, html.js .reveal .tick, html.js .btn .tick { animation: none; scale: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}