/* ============ motion-tokens.css ============ */
:root {
  /* Named easings (easings.net conventions: the v1 named-bezier table; not from a verified award claim) */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);   /* default UI entrance */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* emphasized entrance */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);    /* hero/display reveals */
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);/* move-in-place */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);/* large shared-element moves */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS drawer/sheet: Ionic curve, via emil-design-eng */

  /* Duration bands (v1 law: micro 100-150 / UI 150-250 / modal 200-300, exits 20% faster) */
  --dur-micro: 120ms;
  --dur-ui: 200ms;
  --dur-modal: 260ms;
  --exit: 0.8; /* multiply any entrance duration for its exit */
  --stagger-step: 60ms;

  /* View-transition group timing */
  --vt-dur: 0.5s;
  --vt-ease: var(--ease-out-quart);
}

/* Reveal pattern: transform/opacity only */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-modal) var(--ease-out-cubic),
    transform var(--dur-modal) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
[data-reveal][data-inview] { opacity: 1; transform: none; }

/* View transitions: match-element + class (Chrome/Edge 137+, FF 144+, Safari 18.4+) */
.vt-card { view-transition-name: match-element; view-transition-class: card; }
::view-transition-group(*.card) {
  animation-duration: var(--vt-dur);
  animation-timing-function: var(--vt-ease);
}

/* Reduced motion: land final state, kill transitions */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}