/* motion.css — optional, reversible motion layer for the mockup (proposal 2026-10-30).
   Every rule is scoped to html.mk-motion, which js/motion.js adds unless motion is switched off
   (localStorage mk:motion = "off", URL ?motion=off, or the OS "reduce motion" setting).
   To remove the whole layer: delete the motion.css link and the motion.js script from the host pages.
   Principles: short (120–400 ms), eased, one idea per element, nothing loops, nothing moves more than 8 px. */

html.mk-motion { --mo-fast: 120ms; --mo-base: 160ms; --mo-slow: 320ms; --mo-ease: cubic-bezier(.2, .7, .2, 1); }

/* 1. Page enter — content rises 8 px and fades in; cards stagger a few steps behind */
html.mk-motion .mk-content > * { animation: mo-rise var(--mo-base) var(--mo-ease) both; }
/* a partial re-rendered in place (.mo-refreshed) skips the enter / grow animations; only state changes (e.g. a task turning green) still animate */
html.mk-motion .mo-refreshed, html.mk-motion .mo-refreshed .mk-card, html.mk-motion .mo-refreshed .mk-alert, html.mk-motion .mo-refreshed .mk-progress > span, html.mk-motion .mo-refreshed .util i, html.mk-motion .mo-refreshed .cal td.cell { animation: none; }
html.mk-motion .mk-content .mk-card,
html.mk-motion .mk-content .mk-alert { animation: mo-rise var(--mo-base) var(--mo-ease) both; }
html.mk-motion .mk-content .mk-card:nth-child(2), html.mk-motion .mk-content .mk-alert:nth-child(2) { animation-delay: 25ms; }
html.mk-motion .mk-content .mk-card:nth-child(3), html.mk-motion .mk-content .mk-alert:nth-child(3) { animation-delay: 50ms; }
html.mk-motion .mk-content .mk-card:nth-child(4), html.mk-motion .mk-content .mk-alert:nth-child(4) { animation-delay: 75ms; }
html.mk-motion .mk-content .mk-card:nth-child(5), html.mk-motion .mk-content .mk-alert:nth-child(5) { animation-delay: 100ms; }
html.mk-motion .mk-content .mk-card:nth-child(6), html.mk-motion .mk-content .mk-alert:nth-child(6) { animation-delay: 125ms; }
html.mk-motion .mk-picker__grid .mk-logo-card { animation: mo-rise var(--mo-slow) var(--mo-ease) both; }
html.mk-motion .mk-picker__grid .mk-logo-card:nth-child(2) { animation-delay: 30ms; }
html.mk-motion .mk-picker__grid .mk-logo-card:nth-child(3) { animation-delay: 60ms; }
html.mk-motion .mk-picker__grid .mk-logo-card:nth-child(4) { animation-delay: 90ms; }
html.mk-motion .mk-picker__grid .mk-logo-card:nth-child(5) { animation-delay: 120ms; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 2. (page leave fade removed 2026-10-30: it made every navigation feel slow) */

/* 3. Hover lift — clickable cards, tiles and rows rise 1 px and gain a soft shadow */
html.mk-motion .mk-card--clickable, html.mk-motion .mk-logo-card { transition: transform var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease), border-color var(--mo-fast); }
html.mk-motion .mk-card--clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 31, 75, .14); border-color: var(--mk-color-primary); background: color-mix(in srgb, var(--mk-color-primary) 5%, var(--mk-color-surface)); }
html.mk-motion .mk-card--clickable { transition: transform var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease), border-color var(--mo-fast) ease, background-color var(--mo-fast) ease; }
html.mk-motion .mk-logo-card:not(.is-disabled):hover { background: color-mix(in srgb, var(--mk-color-brand-navy) 12%, var(--mk-color-brand-tile)); }
html.mk-motion .mk-table tbody tr { transition: background-color var(--mo-fast) ease; }
html.mk-motion .mk-table tr[data-go]:hover td:first-child { box-shadow: inset 3px 0 0 var(--mk-color-primary); }
html.mk-motion .mk-table td:first-child { transition: box-shadow var(--mo-fast) ease; }

/* 4. Bars grow — progress bars and heat cells animate from empty on load */
html.mk-motion .mk-progress > span { animation: mo-grow var(--mo-slow) var(--mo-ease) both; transform-origin: left; }
@keyframes mo-grow { from { transform: scaleX(0); } }
html.mk-motion .page-attractions .util i { animation: mo-grow-y var(--mo-slow) var(--mo-ease) both; transform-origin: bottom; }
@keyframes mo-grow-y { from { transform: scaleY(0); } }
html.mk-motion .page-attraction .cal td.cell { animation: mo-fade var(--mo-slow) ease both; }
html.mk-motion .page-attraction .cal td.cell:nth-child(3) { animation-delay: 30ms; } html.mk-motion .page-attraction .cal td.cell:nth-child(4) { animation-delay: 60ms; }
html.mk-motion .page-attraction .cal td.cell:nth-child(5) { animation-delay: 90ms; } html.mk-motion .page-attraction .cal td.cell:nth-child(6) { animation-delay: 120ms; }
html.mk-motion .page-attraction .cal td.cell:nth-child(7) { animation-delay: 150ms; } html.mk-motion .page-attraction .cal td.cell:nth-child(8) { animation-delay: 180ms; }
@keyframes mo-fade { from { opacity: 0; } }
html.mk-motion .page-attraction .cal td.cell.is-low { transition: background-color var(--mo-fast) ease, transform var(--mo-fast) var(--mo-ease); }
html.mk-motion .page-attraction .cal td.cell.is-low:hover { transform: scale(1.04); }

/* 5. Numbers count up — motion.js animates .mk-stat__value and h1 leading numbers; this only smooths the final settle */
html.mk-motion .mk-stat__value { transition: color var(--mo-base) ease; }

/* 6. Dialogs — backdrop fades, dialog settles from 98 % scale */
html.mk-motion .mk-modal.is-open { animation: mo-fade var(--mo-fast) ease both; }
html.mk-motion .mk-modal.is-open .mk-modal__dialog { animation: mo-settle var(--mo-base) var(--mo-ease) both; }
@keyframes mo-settle { from { opacity: 0; transform: translateY(6px) scale(.98); } }
html.mk-motion .mk-toast { transition: opacity var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease); }

/* 7. Sidebar collapse — slides instead of snapping */
html.mk-motion .mk-shell { transition: grid-template-columns var(--mo-base) var(--mo-ease); }
html.mk-motion .mk-shell.is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
html.mk-motion .mk-shell.is-collapsed .mk-sidebar { display: flex; overflow: hidden; }
html.mk-motion .mk-sidebar { transition: opacity var(--mo-fast) ease; }
html.mk-motion .mk-shell.is-collapsed .mk-sidebar { opacity: 0; }
html.mk-motion .mk-sidebar__link { transition: background-color var(--mo-fast) ease, box-shadow var(--mo-fast) ease; }

/* 8. Controls — buttons press, checkboxes tick, language switch slides */
html.mk-motion .mk-btn { transition: background-color var(--mo-fast) ease, border-color var(--mo-fast) ease, transform 80ms ease; }
html.mk-motion .mk-btn:active { transform: scale(.98); }
html.mk-motion input[type="checkbox"] { transition: transform 120ms var(--mo-ease); }
html.mk-motion input[type="checkbox"]:checked { transform: scale(1.1); }
html.mk-motion .mk-badge { transition: background-color var(--mo-base) ease, color var(--mo-base) ease; }
html.mk-motion .mk-lang__btn { transition: background-color var(--mo-base) var(--mo-ease), color var(--mo-base) var(--mo-ease); }

/* 9. Done tasks — the green tint and the check mark fade in */
html.mk-motion .page-fnb tr.is-done td { animation: mo-fade var(--mo-slow) ease 150ms both; }

/* 10. Gate — the sign-in card settles, a wrong password shakes once */
html.mk-motion .mk-gate form { animation: mo-settle var(--mo-slow) var(--mo-ease) both; }
html.mk-motion .mk-gate form.is-wrong { animation: mo-shake 320ms ease; }
@keyframes mo-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) { html.mk-motion *, html.mk-motion *::before, html.mk-motion *::after { animation: none !important; transition: none !important; } }