/* Motion layer: interaction states. Entrances live in motion.js (WAAPI, transform/opacity only). */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* Press feedback: fast scale on press, background and border keep their app.css timing. */
.btn { transition: background-color .15s ease, border-color .15s ease, transform .12s var(--ease-out); }
.btn:active { transform: scale(.97); }
.segmented button, .pages button { transition: background-color .12s ease, transform .1s var(--ease-out); }
.segmented button:active, .pages button:active { transform: scale(.96); }

/* Sidebar hover: colour only, 120 ms. */
.nav a, .nav-group-toggle { transition: background-color .12s ease, color .12s ease; }

/* Bars grow from their own baseline. */
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; }

/* Toast: transition, not keyframes, so a second toast never restarts the first. */
.toast { animation: none; transition: opacity .24s ease, transform .26s var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.m-out { opacity: 0; transition-duration: .18s; }

@media (prefers-reduced-motion: reduce) {
  .btn, .segmented button, .pages button { transition: background-color .15s ease, border-color .15s ease; }
  .btn:active, .segmented button:active, .pages button:active { transform: none; }
  .toast { transition: opacity .2s ease; }
  @starting-style { .toast { opacity: 0; transform: none; } }
}