/* ==========================================================================
   Soul Sounds Academy (SSA) — motion tokens
   The single source for how the whole app moves. CSS reads these directly;
   app.js reads the same variables through Fx (getComputedStyle), so a change
   here retunes the CSS transitions and the Motion / anime.js animations alike.

   To make the app feel calmer or livelier, change the few tokens under
   "Feel" first; everything else follows from them.
   ========================================================================== */
:root {
  /* ---------- Curves ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);        /* the house curve */
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);        /* decisive state changes */
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);         /* things arriving */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);              /* things leaving */
  --ease-btn: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Durations ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-exit: 160ms;           /* dialogs, dropdowns and toasts leaving */
  --dur-accent: 240ms;         /* leading-edge rules and fills */
  --dur-lift: 220ms;
  --dur-sheen: 620ms;
  --dur-count: 750ms;          /* figures counting to a new value */
  --dur-bar: 700ms;            /* chart bars growing from the baseline */
  --dur-flash: 900ms;          /* the brass wash on a row that just changed */
  --dur-shake: 280ms;          /* an invalid field */

  /* Page change: the leaving screen fades out, the arriving one assembles */
  --dur-page-out: 70ms;
  --dur-page-in: 140ms;

  /* ---------- Buttons: one tactile system ---------- */
  --dur-btn-hover: 150ms;
  --dur-btn-press: 90ms;
  --dur-btn-release: 200ms;
  --btn-press-scale: 0.96;

  /* ---------- Feel ---------- */
  /* Distances */
  --lift: -1px;                /* hover elevation for buttons and presets */
  --lift-card: -1px;
  --rise-dist: 16px;           /* how far entering content travels */
  --shake-dist: 4px;

  /* Staggers */
  --stagger: 55ms;             /* sections of a screen arriving */
  --stagger-list: 18ms;        /* rows of a list or table arriving */
  --stagger-bar: 34ms;
  --stagger-max: 12;           /* after this many items, the rest arrive together */

  /* Springs, read by Motion: "stiffness damping mass".
     Higher stiffness = faster; lower damping = more bounce. */
  --spring-snappy: 520 38 1;   /* small things: markers, underlines, presses */
  --spring-smooth: 300 34 1;   /* panels, dialogs, toasts, rows gliding */
  --spring-gentle: 150 24 1;   /* screen content arriving */
}

/* Reduced motion: every travelling distance and duration drops to zero, so
   state changes stay (colour, opacity) and movement goes. app.js reads the
   same preference and turns its animations into fades or instant changes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-exit: 0ms;
    --dur-accent: 0ms;
    --dur-lift: 0ms;
    --dur-sheen: 0ms;
    --dur-bar: 0ms;
    --dur-shake: 0ms;
    --stagger: 0ms;
    --stagger-list: 0ms;
    --stagger-bar: 0ms;
    --rise-dist: 0px;
    --shake-dist: 0px;
    --lift: 0px;
    --lift-card: 0px;
  }
}