/* ════════════════════════════════════════════════════════════════
   SuperCat Design System — Motion tokens
   ────────────────────────────────────────────────────────────────
   Durations + easings for every animated transition.
   Reduce to no-op under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Durations ── */
  --duration-instant: 0ms;
  --duration-fast:    120ms;   /* hover, ripple */
  --duration-base:    200ms;   /* default UI    */
  --duration-medium:  320ms;   /* drawer, sheet */
  --duration-slow:    520ms;   /* page-scale    */
  --duration-slower:  800ms;   /* hero reveal   */

  /* ── Easings ──
     out = decelerate (most UI), in = accelerate (exits),
     in-out = symmetric (size changes), spring = playful */
  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.42, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emph:    cubic-bezier(0.2, 0.8, 0.2, 1.0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-medium:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}