/* ═══════════════════════════════════════════════════════════════════════════
 * 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
 *
 * Part 1: Kill all keyframe animations and transitions globally.
 * Part 2: Re-enable short opacity transitions on state-layer pseudo-elements
 *         so hover/focus feedback remains visible (non-vestibular).
 *         Class selectors (0-1-1) beat universal selector (0-0-0) in
 *         specificity, so these override Part 1 even with !important on both.
 * Part 3: Ensure elements that start at opacity:0 become visible instantly.
 * Part 4: Loading indicators show as static circles.
 * ═══════════════════════════════════════════════════════════════════════════ */

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

  /* Part 2: Re-enable opacity transitions on state-layer elements */
  .m3e-state-layer::before,
  .m3e-button::before,
  .m3e-chip::before,
  .m3e-fab::before,
  .m3e-toolbar__action::before,
  .m3e-nav-drawer__item::before,
  .m3e-tabs__tab::before,
  .m3e-card--interactive::before,
  .m3e-card[href]::before,
  .m3e-list__item::before {
    transition-duration: 150ms !important;
    transition-property: opacity !important;
  }

  /* Part 3: Ensure animated elements that start at opacity:0 become visible */
  .badge-animate,
  .section-animate,
  .field-error-animate {
    opacity: 1 !important;
  }

  /* Part 4: Loading indicators show as static circles */
  .m3e-loading-inline,
  .m3e-loading-indicator {
    animation: none !important;
    border-radius: 50% !important;
    opacity: 0.7;
  }

  /* Part 5: Wavy progress bar falls back to flat rectangle */
  .m3e-progress--wavy .m3e-progress__bar {
    clip-path: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Global Keyframes (extracted from base.html)
 *
 * These are referenced by utility classes in components.css and by
 * animation declarations across the shell and page templates.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── HTMX loading bar ── */
@keyframes loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes loading-pulse-bar {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ── In-page loading pulse ── */
@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── View Transitions ── */
@keyframes vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sheet / modal ── */
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheet-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modal-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ── Mobile menu entrance / exit ── */
@keyframes menu-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes menu-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes menu-panel-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes menu-panel-out {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── Badge pulse on appear ── */
@keyframes badge-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Section header slide ── */
@keyframes section-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Form error slide-in ── */
@keyframes error-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page content entrance ── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#page-content {
  animation: page-enter var(--md-sys-motion-duration-medium1)
             var(--md-sys-motion-easing-standard-effects-default) forwards;
}
@media (prefers-reduced-motion: reduce) {
  #page-content { animation: none; }
}