/* Motion tokens, shared keyframes, page transitions, reduced motion (mvp-system-design 14).
   Elsewhere only var(--dur-*) and var(--ease-*). Moments are listed in docs/01-design.md. */

:root {
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 200ms;   /* menu, toast, small panel, move */
  --dur-3: 320ms;   /* dialog, page */
  --dur-4: 420ms;   /* snappy spring */
  --dur-5: 670ms;   /* smooth spring */
  --dur-6: 870ms;   /* bouncy spring */
  --dur-7: 1180ms;  /* wobbly spring: celebrations only */
  --dur-step: 60ms; /* one step of a stagger: calc(var(--dur-step) * n) */

  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Springs from mvp-system-design 14 (scripts/springs.go output). Never hand-edit a curve. */
  /* stiffness 420, damping 36: settles 420ms, overshoot 0.3% */
  --ease-snappy: linear(0, 0.006 1.2%, 0.025 2.8%, 0.093 5.8%, 0.506 18.2%, 0.601 21.5%, 0.684 24.8%, 0.749 27.8%, 0.808 31%, 0.859 34.5%, 0.899 38%, 0.934 42%, 0.961 46.5%, 0.98 51.5%, 0.993 57%, 1 63%, 1.003 70.8%, 1);
  /* stiffness 190, damping 27.6: settles 670ms, overshoot 0.0% */
  --ease-smooth: linear(0, 0.004 1%, 0.019 2.2%, 0.079 5%, 0.467 17%, 0.559 20.2%, 0.639 23.5%, 0.708 26.8%, 0.769 30.2%, 0.818 33.8%, 0.861 37.5%, 0.9 42%, 0.929 46.8%, 0.953 52.2%, 0.971 58.5%, 0.983 65.5%, 0.991 73.8%, 1);
  /* stiffness 300, damping 16: settles 870ms, overshoot 19.5% */
  --ease-bouncy: linear(0, 0.006 0.8%, 0.032 1.8%, 0.148 4%, 0.752 11.5%, 0.969 14.8%, 1.045 16.2%, 1.113 18%, 1.159 19.8%, 1.185 21.5%, 1.193 22.5%, 1.195 23.8%, 1.19 25%, 1.18 26.2%, 1.148 28.7%, 1.056 34.5%, 1.014 37.5%, 0.981 41%, 0.965 44.5%, 0.962 46.8%, 0.965 49.5%, 0.997 60.8%, 1.006 67.2%, 1.007 72.8%, 0.999 89.2%, 1);
}

/* ---------- shared keyframes ---------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes word-in { from { opacity: 0; transform: translateY(.35em) rotate(3deg); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes shade-in { to { opacity: 1; } }
@keyframes bar-grow { from { transform: scaleX(0); } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } }
/* adapted from https://open-props.style (animations.css) · MIT: fixed px steps, so a wide field shakes as little as a narrow one */
@keyframes shake-x {
  0%, 100% { translate: 0; }
  20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 5px 0; }
}

/* ---------- page to page ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Home ↔ course ↔ playbook: the logo and the portrait stay put or glide, the rest cross-fades. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) {
    animation-duration: var(--dur-5);
    animation-timing-function: var(--ease-smooth);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: var(--dur-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}