/* ── v8-motion: one easing, one spring, applied only where state changes ── */
:root { --spring: cubic-bezier(.34,1.56,.64,1); --ease: cubic-bezier(.2,.8,.2,1); --t: 200ms; --tl: 320ms; --soft: color-mix(in srgb, var(--blue) 6%, white); }
@media (prefers-reduced-motion: reduce) {
  :root { --t: 1ms; --tl: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
@keyframes m-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-pop { from { transform: scale(.6); } }
@keyframes m-popin { from { transform: scale(.96) translateY(6px); opacity: 0; } }
@keyframes m-grow { from { transform: scaleY(0); } }
@keyframes m-fillx { from { transform: scaleX(0); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-shake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } }
@keyframes m-toastin { from { transform: translateY(12px); opacity: 0; } }
@keyframes m-toastout { to { transform: translateY(8px); opacity: 0; } }
@keyframes m-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* controls: hover settles, press gives */
.btn { transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease), transform 120ms var(--ease), opacity var(--t) var(--ease); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.linkbtn, .pill, .tabs a, .sidenav a, .acct-name, .acct-w, .pop a, .pop button, .notif, .detect .row, .acct .dot, .attn { transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); }
.side-cta { transition: transform 120ms var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
.side-cta:hover { box-shadow: 0 6px 16px rgba(19,18,20,.16); transform: translateY(-1px); }
.side-cta:active { transform: scale(.97); }
.choice .c { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.choice .c:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.detect button.row:hover { background: var(--soft); }

/* fields: the label tints on focus, the box shakes on a rejected value */
.field input, .field select { transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
.field > span { transition: color var(--t) var(--ease); }
.field:focus-within > span { color: var(--blue); }
.field.bad > span { color: var(--crit); }
.field.bad input { border-color: var(--crit); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crit) 30%, transparent); animation: m-shake 420ms var(--ease); }
.err:not(.hidden) { animation: m-rise 240ms var(--ease) both; }
.rv { overflow: hidden; transition: height var(--tl) var(--ease), opacity var(--tl) var(--ease), margin-top var(--tl) var(--ease); }
.swap > * { animation: m-rise 200ms var(--ease) both; }

/* Match the old and new marker at page reveal, without a late JS replay. */
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
::view-transition-group(nav-marker) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
::view-transition-old(nav-marker),
::view-transition-new(nav-marker) { animation: none; mix-blend-mode: normal; }
::view-transition-old(nav-marker) { display: none; }
.side .sidenav { position: relative; }
.nav-marker { display: none; }
.side .sidenav a[aria-current="page"] .nav-marker {
    display: block; position: absolute; left: 2px; top: calc(50% - 8px);
    width: 2.5px; height: 16px; border-radius: 2px; background: var(--ink);
    pointer-events: none; view-transition-name: nav-marker;
}
@media (max-width: 960px) {
  .side .sidenav a[aria-current="page"] .nav-marker {
    left: calc(50% - 8px); top: auto; bottom: 2px;
    width: 16px; height: 2.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(nav-marker) { animation-duration: 0s; }
}
.badge.in { animation: m-pop 320ms var(--spring); }
.pop:not([hidden]) { animation: m-popin 220ms var(--spring); transform-origin: bottom center; }
.pop > * { animation: m-rise 240ms var(--ease) both; }
.pop > :nth-child(2) { animation-delay: 25ms; } .pop > :nth-child(3) { animation-delay: 50ms; } .pop > :nth-child(4) { animation-delay: 75ms; }
.pop > :nth-child(5) { animation-delay: 100ms; } .pop > :nth-child(6) { animation-delay: 125ms; } .pop > :nth-child(7) { animation-delay: 150ms; }
@media (max-width: 960px) {
  .pop:not([hidden]) { transform-origin: top right; }
}

/* In-page segmented controls retain their interaction animation. */
.tabs { position: relative; }
.seg { position: relative; }
.seg button { position: relative; z-index: 1; transition: color var(--t) var(--ease); }
.seg.js button.on { background: transparent; box-shadow: none; }
.seg .pillbg { position: absolute; border-radius: 999px; background: var(--white); box-shadow: var(--shadow); z-index: 0; pointer-events: none; transition: left var(--tl) var(--spring), width var(--tl) var(--spring), top var(--tl) var(--ease), height var(--tl) var(--ease); }

/* wizard steps: the circle fills, the check pops once */
.wsteps li { transition: color var(--t) var(--ease); }
.wsteps .n { transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.wsteps li.just .n { animation: m-pop 360ms var(--spring); }

/* rows: the tint fades in, the chevron leans toward the click */
table.data td { transition: background var(--t) var(--ease); }
table.data tr.rowlink td:last-child { transition: transform var(--t) var(--spring); }
table.data tr.rowlink:hover td:last-child { transform: translateX(3px); }
.notif > .muted { transition: transform var(--t) var(--spring); display: inline-block; }
.notif:hover > .muted { transform: translateX(3px); }

/* charts: bars grow from the baseline once, the tooltip springs in */
.chart-box .bar { transform-box: fill-box; transform-origin: bottom; transition: opacity var(--t) var(--ease); }
.chart-box .bar:hover { opacity: 1; }
.enter .chart-box .bar, .enter-board .chart-box .bar { animation: m-grow 480ms var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
.tooltip { animation: m-popin 180ms var(--spring); transform-origin: bottom left; }
.enter .prog i, .enter-board .prog i { transform-origin: left; animation: m-fillx 600ms var(--ease) both; }

/* entering a screen: masthead, band, then the board one card at a time */
.view.enter .mast > * { animation: m-rise 280ms var(--ease) both; }
.view.enter .mast-right { animation-delay: 40ms; }
.view.enter .band { animation: m-rise 280ms var(--ease) both; animation-delay: 60ms; }
.view.enter .board > * { animation: m-rise 300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 90ms); }
.view.enter-board .board > * { animation: m-rise 260ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.solo.enter .l-hero > * { animation: m-rise 360ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.solo.enter .wm { background-size: 200% 100%; animation: m-rise 360ms var(--ease) both, m-sweep 1100ms var(--ease) 200ms both; }
.solo.enter .l-trust .t { animation: m-rise 360ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 260ms); }
.solo.enter .auth > * { animation: m-rise 300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 140ms); }
.solo.enter .l-foot, .solo.enter .foot { animation: m-rise 360ms var(--ease) both; animation-delay: 420ms; }

/* signing: the button holds its width, spins while the wallet asks, turns green when the chain answers */
.btn.busy, .btn.done { pointer-events: none; opacity: 1 !important; white-space: nowrap; justify-content: center; }
.btn .ring { width: 16px; height: 16px; flex: none; }
.btn .ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; }
.btn .ring .arc { stroke-dasharray: 44; stroke-dashoffset: 22; transform-origin: center; animation: m-spin 1s linear infinite; }
.btn.done .ring .arc { animation: none; stroke-dashoffset: 0; transition: stroke-dashoffset 320ms var(--ease); }
.btn.done { background: var(--green) !important; color: #fff !important; box-shadow: none !important; }
.btn.reject { animation: m-shake 420ms var(--ease); }

/* toasts: stacked, spring in, fade out; a check draws when something went through */
#toast { display: none; }
.toastbox { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; z-index: 50; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toastbox .tst { background: var(--ink); color: #fff; font-size: 13px; line-height: 1.35; padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.18); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; animation: m-toastin 320ms var(--spring); }
.toastbox .tst.out { animation: m-toastout 260ms var(--ease) forwards; }
.toastbox .tst svg { width: 14px; height: 14px; color: #34d399; flex: none; }
.toastbox .tst svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: m-draw 320ms var(--ease) 140ms forwards; }

/* the scenario drawer slides; the page makes room */
.shell { transition: margin-right var(--tl) var(--ease); }
.sc-drawer { transition: transform var(--tl) var(--ease), visibility 0s linear var(--tl); }
.sc-drawer[hidden] { display: block; transform: translateX(100%); visibility: hidden; }
.sc-drawer:not([hidden]) { transition: transform var(--tl) var(--ease), visibility 0s; }
.sc-tab { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.sc-tab[hidden] { display: block; opacity: 0; transform: translate(100%, -50%); pointer-events: none; }

/* digit roll that keeps layout: old and new digits share one grid cell */
/* the wrappers must not pick up the stat blocks' own span rules (.bstat span, .stats span are block labels) */
span.fig, span.rl { display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
span.rl { display: inline-grid; grid-template-areas: "x"; overflow: hidden; vertical-align: baseline; line-height: inherit; }
.rl > span { grid-area: x; display: block; white-space: nowrap; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; transition: transform 280ms var(--spring), opacity 180ms var(--ease); }
.rl .b { transform: translateY(100%); opacity: 0; }
.rl.go .a { transform: translateY(-100%); opacity: 0; }
.rl.go .b { transform: none; opacity: 1; }
.badge .rl, .rank-badge .rl { line-height: 1; }