/* ═══════════════════════════════════════════════════════════════════════════
 * M3E Motion Tokens
 * Reference: docs/m3e/guidelines/motion.md
 *
 * 12 easing curves (4 categories × 3 speeds) + 1 general spring
 * 16 duration tokens (short1-4, medium1-4, long1-4, extra-long1-4)
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Expressive Spatial (bouncy, for position/size/shape) ── */
  --md-sys-motion-easing-expressive-spatial-fast: cubic-bezier(0.42, 1.85, 0.21, 0.90);
  --md-sys-motion-easing-expressive-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1.00);
  --md-sys-motion-easing-expressive-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);

  /* ── Expressive Effects (no overshoot, for color/opacity) ── */
  --md-sys-motion-easing-expressive-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1.00);
  --md-sys-motion-easing-expressive-effects-default: cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --md-sys-motion-easing-expressive-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1.00);

  /* ── Standard Spatial (subtle, for system-initiated motion) ── */
  --md-sys-motion-easing-standard-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1.00);
  --md-sys-motion-easing-standard-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1.00);
  --md-sys-motion-easing-standard-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1.00);

  /* ── Standard Effects (functional, for color/opacity) ── */
  --md-sys-motion-easing-standard-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1.00);
  --md-sys-motion-easing-standard-effects-default: cubic-bezier(0.34, 0.80, 0.34, 1.00);
  --md-sys-motion-easing-standard-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1.00);

  /* ── General spring approximation ── */
  --md-sys-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Duration tokens ── */
  /* Short — micro-interactions, tooltips, ripples */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;

  /* Medium — buttons, chips, small component transitions */
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;

  /* Long — cards, dialogs, navigation transitions */
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;

  /* Extra Long — page transitions, complex orchestrations */
  --md-sys-motion-duration-extra-long1: 700ms;
  --md-sys-motion-duration-extra-long2: 800ms;
  --md-sys-motion-duration-extra-long3: 900ms;
  --md-sys-motion-duration-extra-long4: 1000ms;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Reduced Motion
 *
 * Disables all animations and transitions when the user prefers reduced
 * motion. Phase 6 may refine this to selectively preserve short opacity
 * fades for state-change visibility while still disabling spatial motion.
 * For Phase 2 foundation, the aggressive approach is safer.
 * ═══════════════════════════════════════════════════════════════════════════ */

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