/* shared/motion/motion.css — DESIGN.md §8. Link on every red-side page, after tokens.css.
   No layout. Builders don't override these selectors (the trace defaults use :where() and may be restyled). */

/* White Construct beat (program side). beat.js sets html.is-beat before first paint. */
html.is-beat { background: var(--construct, #F4F3EF); }
html.is-beat body { visibility: hidden; }

/* Reveal after the beat: opacity only. */
html.is-reveal body { animation: td-reveal var(--t-quick, 120ms) var(--ease, ease-out) both; }
@keyframes td-reveal { from { opacity: 0; } }

/* Leave fade (board side): the page fades to --construct. A fixed layer fades in over the body,
   so it works whatever the page paints its ground on. Removing the class drops it instantly. */
html.is-leaving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: var(--construct, #F4F3EF);
  pointer-events: none;
  animation: td-reveal var(--t-quick, 120ms) var(--ease, ease-out) both;
}

/* Visual bell: one reverse-video frame. Reduced motion uses the session lamp instead. */
html.is-bell { filter: invert(1); }
[data-lamp].is-fault { background-color: var(--fault, #FF3B3F) !important; border-color: var(--fault, #FF3B3F) !important; }

/* Lamp test: every lamp at full legend. */
[data-lamp].is-test { background-color: var(--legend, #E6E1D6) !important; border-color: var(--legend, #E6E1D6) !important; }

/* View Transitions: deliberately not enabled. The beat already makes the program load seamless
   (white last frame → white first frame), and @view-transition { navigation: auto; } would add a
   crossfade to every other navigation, which §3's allowed-motion list doesn't include. */

/* Trace waterfall defaults (renderTrace). Zero specificity: restyle freely. */
:where(.trace) { list-style: none; margin: 0; padding: 0; font: var(--fs-id, 0.6875rem)/var(--lh-ui, 1.35) var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums slashed-zero; }
:where(.trace-span) { display: grid; grid-template-columns: 18ch 1fr 9ch; gap: var(--s-2, 8px); align-items: center; padding-inline-start: calc(var(--depth, 0) * var(--s-3, 12px)); }
:where(.trace-name) { color: var(--legend-dim, #A39E94); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.trace-track) { display: block; block-size: 6px; border-block-end: var(--hair, 1px) solid var(--rule, #2A2F35); }
:where(.trace-bar) { display: block; block-size: 100%; background: var(--legend, #E6E1D6); }
:where(.trace-bar.is-open) { background: var(--caution, #F2B33D); }
:where(.trace-ms) { color: var(--legend, #E6E1D6); text-align: end; }
:where(.trace-label) { margin: 0 0 var(--s-1, 4px); font: var(--fs-small, 0.8125rem)/var(--lh-ui, 1.35) var(--font-mono, ui-monospace, monospace); color: var(--legend-dim, #A39E94); }