/* ── MOTION ──
   Page transitions (CMS.renderPage adds .page-enter / .page-enter-back to
   #main-content), staggered entrances (.enter with --i), and the keyframes
   the components share. Reduced motion keeps only short fades. */
.page-enter      { animation: rise var(--dur-4) var(--ease-out) both; }
.page-enter-fwd  { animation: slide-from-right var(--dur-4) var(--ease-out) both; }
.page-enter-back { animation: slide-from-left var(--dur-4) var(--ease-out) both; }
.enter     { animation: rise var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.enter-pop { animation: pop-in var(--dur-3) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.view-swap { animation: rise var(--dur-3) var(--ease-out) both; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-out { to { transform: translateX(100%); } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes seat-pop { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes bump { 40% { transform: scale(1.35); color: var(--accent); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes cell-flash { from { background-color: var(--sage); } }

:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-name: fade-in !important; animation-duration: 120ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 80ms !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after {
    animation-name: fade-in !important; animation-duration: 120ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 80ms !important; }
}