/* Tend · motion. Loaded last. Small, quick movements in one easing language (after Lext): things arrive by rising a few
   pixels as they fade in, in sequence; presses give way; hovers lift; bars, rings and charts fill; a check-in glows.
   Arrivals run only when you navigate (a re-render after a check-in stays still). Reduced motion turns all of it off
   (the global rule in tend.css, plus public/js/motion.js skipping its own work). */
:root {
  --ease-out: cubic-bezier(.2, .75, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --m-step: 55ms;
}

/* ---------- arrivals ---------- */
.page { animation: none; }
.page.m-arrive { animation: m-page 380ms var(--ease-out) backwards; }
.m-rise { animation: m-rise 560ms var(--ease-out) backwards; animation-delay: calc(var(--mi, 0) * var(--m-step)); }
@keyframes m-page { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(16px) scale(.992); } }

/* bars fill, rings close, charts grow and draw, heatmaps sweep in; nested items inherit their card's --mi */
.m-arrive .bar i { animation: m-bar 900ms var(--ease-out) backwards; animation-delay: calc(var(--mi, 0) * var(--m-step) + 180ms); transform-origin: left; }
html[dir="rtl"] .m-arrive .bar i { transform-origin: right; }
@keyframes m-bar { from { scale: 0 1; } }
.m-arrive .ring circle:last-of-type { animation: m-ring 1000ms var(--ease-out) backwards; animation-delay: calc(var(--mi, 0) * var(--m-step) + 150ms); }
@keyframes m-ring { from { stroke-dashoffset: var(--rc); } }
.m-arrive .cc-bar, .m-arrive .cc-ghost { animation: m-col 700ms var(--ease-out) backwards; animation-delay: calc(var(--mi, 0) * var(--m-step) + var(--ci, 0) * 22ms + 160ms); transform-origin: bottom; }
@keyframes m-col { from { scale: 1 0; } }
.m-arrive .lc-plot, .m-arrive .heatmap, .m-arrive .cal-strip { animation: m-wipe 1100ms var(--ease-out) backwards; animation-delay: calc(var(--mi, 0) * var(--m-step) + 160ms); }
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html[dir="rtl"] .m-arrive .lc-plot, html[dir="rtl"] .m-arrive .heatmap, html[dir="rtl"] .m-arrive .cal-strip { animation-name: m-wipe-rtl; }
@keyframes m-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.m-count { display: inline-block; }

/* ---------- press, hover, focus ---------- */
.btn, .icon-btn, .chip-btn, .tl-quick, .seg button, .opt, .type-card, .accent-pick, .toast-act, .notif .snz button { transition: transform 170ms var(--ease-out), background-color 200ms, border-color 200ms, color 200ms, box-shadow 220ms, opacity 200ms; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.975); }
.icon-btn:active:not(:disabled) { transform: scale(.88); }
.chip-btn:active, .tl-quick:active, .seg button:active, .opt:active, .type-card:active, .accent-pick:active { transform: scale(.96); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
a.hcard, .hp-main .hcard, .goal-card, .rem-idea, .starter, .unlock, .ach-card, .sci-card, .draft-row, .rem-row, .kind-row, .recent-row, .prompt-chip { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 200ms, background-color 200ms; }
@media (hover: hover) {
  a.hcard:hover, .goal-card:hover, .starter:hover, .unlock:not(.locked):hover, .sci-card:hover, .ach-card:not(.locked):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .rem-idea:hover, .draft-row:hover, .rem-row:hover { transform: translateY(-2px); }
  .hcard .hactions .ic, .goal-card .ic { transition: transform 260ms var(--ease-out); }
  a.hcard:hover .hactions .ic { transform: translateX(3px); }
  html[dir="rtl"] a.hcard:hover .hactions .ic { transform: translateX(-3px) scaleX(-1); }
}
.switch::after { transition: transform 300ms var(--ease-spring), width 200ms var(--ease-out); }
.switch:active::after { width: 24px; }
.switch[aria-checked="true"]:active::after { transform: translateX(14px); }
html[dir="rtl"] .switch[aria-checked="true"]:active::after { transform: translateX(-14px); }
:focus-visible { transition: outline-offset 160ms var(--ease-out); }

/* the active tab's underline grows from its centre; the tab row's pill slides in */
.nav a.active::after { animation: m-navmark 420ms var(--ease-out) backwards; transform-origin: center; }
@keyframes m-navmark { from { opacity: 0; transform: scaleX(.3); } }
.nav a .ic { transition: transform 260ms var(--ease-out); }
.nav a:hover .ic { transform: translateY(-1px) rotate(-6deg); }
.seg button.active, .settings-nav a.active, .ws-nav a.active { animation: m-pill 300ms var(--ease-out) backwards; }
@keyframes m-pill { from { opacity: .4; transform: scale(.94); } }
.chip-btn.selected, .tl-quick.on, .opt.selected, .type-card.selected { animation: m-pop 320ms var(--ease-spring); }
@keyframes m-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }

/* ---------- overlays ---------- */
.modal-back { animation: m-fade 220ms var(--ease-out) both; }
.modal { animation: m-modal 380ms var(--ease-spring) both; }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-modal { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.modal-back.closing { animation: m-fade-out 200ms var(--ease-out) forwards; pointer-events: none; }
.modal-back.closing .modal { animation: m-modal-out 200ms var(--ease-out) forwards; }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-modal-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 640px) {
  .modal { animation-name: m-sheet; animation-timing-function: var(--ease-out); animation-duration: 420ms; }
  .modal-back.closing .modal { animation-name: m-sheet-out; }
  @keyframes m-sheet { from { transform: translateY(100%); } }
  @keyframes m-sheet-out { to { transform: translateY(100%); } }
}
/* a step in a multi-step form slides in from the side it came from */
.m-step-next { animation: m-step-in 360ms var(--ease-out) backwards; --from: 22px; }
.m-step-back { animation: m-step-in 360ms var(--ease-out) backwards; --from: -22px; }
html[dir="rtl"] .m-step-next { --from: -22px; } html[dir="rtl"] .m-step-back { --from: 22px; }
@keyframes m-step-in { from { opacity: 0; transform: translateX(var(--from)); } }
.steps i { transition: background-color 400ms var(--ease-out), transform 400ms var(--ease-out); }
.steps i.on:last-of-type { animation: m-stepbar 500ms var(--ease-out); }
@keyframes m-stepbar { from { transform: scaleX(.2); } }
.menu { animation: m-menu 220ms var(--ease-out) both; transform-origin: top right; }
html[dir="rtl"] .menu { transform-origin: top left; }
@keyframes m-menu { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.toast { animation: m-toast 420ms var(--ease-spring) both; }
@keyframes m-toast { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.notif { animation: m-rise 380ms var(--ease-out) backwards; }
.notif:nth-child(2) { animation-delay: 30ms; } .notif:nth-child(3) { animation-delay: 60ms; } .notif:nth-child(4) { animation-delay: 90ms; } .notif:nth-child(n+5) { animation-delay: 120ms; }

/* ---------- a check-in ---------- */
.hcard.m-done { animation: m-done 900ms var(--ease-out); }
@keyframes m-done { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hc, var(--accent)) 55%, transparent), var(--shadow); transform: scale(.985); } 35% { transform: scale(1.01); } 100% { box-shadow: 0 0 0 14px transparent, var(--shadow); transform: none; } }
.hcard.m-done .hstate .ic path, .hcard.m-done .hstate .ic polyline { stroke-dasharray: 30; animation: m-check 520ms 120ms var(--ease-out) backwards; }
@keyframes m-check { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.hcard.m-done .hstate { animation: m-pop 420ms var(--ease-spring); }
.hcard.m-logged { animation: m-logged 500ms var(--ease-out); }
@keyframes m-logged { from { opacity: .6; transform: translateY(4px); } }
.th-meter .bar i, .bar i { transition: width 700ms var(--ease-out); }
.tl-chip { animation: m-pop 300ms var(--ease-spring); }

/* ---------- the arranger ---------- */
.ar-tile.dragging { z-index: 5; box-shadow: var(--shadow-lg); cursor: grabbing; transition: box-shadow 200ms; }
.ar-tile.dragging .ar-handle { cursor: grabbing; }
.ar-map .m-slot { transition: background-color 200ms, border-color 200ms, transform 220ms var(--ease-out); }
.ar-map .m-slot.hl { transform: scale(1.04); }