/**
 * Project-wide motion tokens.
 * Use these variables for any transition or animation; do not hardcode
 * durations or easings in feature CSS. Keeps menus, drawers, overlays,
 * and card expansion visually consistent and easy to tune in one place.
 *
 * Durations: fast (hover/feedback), normal (panels/drawers), slow (overlays).
 * Easing: ease-out (entering), ease-in-out (symmetric), optional smooth curve.
 * Add new tokens here when you need another timing or curve.
 */

:root {
  /* --- Durations (seconds) --- */
  /* Use for: hover feedback, small UI reactions, progress ticks */
  --motion-duration-fast: 0.2s;
  /* Use for: panels, drawers, menus open/close, toggles */
  --motion-duration-normal: 0.4s;
  /* Use for: overlays (e.g. splash fade), page-level transitions, larger reveals */
  --motion-duration-slow: 0.8s;
  /* Use for: cross-document page transitions (View Transition API) */
  --motion-duration-page: 0.25s;

  /* --- Easing (expo-style, AE-like) --- */
  /* Use for: slow start, fast finish (acceleration). Expo in. */
  --motion-ease-in: cubic-bezier(0.78, 0, 0.81, 0);
  /* Use for: fast start, slow finish (entering, opening). Expo out. */
  --motion-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  /* Use for: symmetric expand/collapse. Slow start then slow end. */
  --motion-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  /* Use for: expo out, slightly gentler tail than --motion-ease-out */
  --motion-ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Cross-document View Transitions (MPA page navigation) --- */
/* Opt all same-origin navigations into the View Transition API.
   Progressive enhancement: no-op in browsers that don't support it. */
@view-transition {
  navigation: auto;
}

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Only animate when the user hasn't requested reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Fade the entire page content (root snapshot) using motion tokens. */
  ::view-transition-old(root) {
    animation: page-fade-out var(--motion-duration-page) var(--motion-ease-in) both;
  }
  ::view-transition-new(root) {
    animation: page-fade-in var(--motion-duration-page) var(--motion-ease-out) both;
  }
  /* Named layers (tab-bar, app-header) hold position - no animation. */
  ::view-transition-old(tab-bar),
  ::view-transition-new(tab-bar),
  ::view-transition-old(app-header),
  ::view-transition-new(app-header) {
    animation: none;
  }
}

/* Optional utility classes: use where they reduce repetition. */

/* Fade (opacity only) — e.g. overlays, hover states */
.motion-fade {
  transition: opacity var(--motion-duration-normal) var(--motion-ease-out);
}

/* Panels/drawers: transform + opacity */
.motion-slide-in {
  transition:
    transform var(--motion-duration-normal) var(--motion-ease-out-smooth),
    opacity var(--motion-duration-normal) var(--motion-ease-out-smooth);
}