/* ============================================================
   FOR LUCID — main stylesheet
   tokens → base → components → sections → product page →
   motion (html.motion only) → responsive → reduced-motion
   Reference: HANDOFF-SPEC.md §2–§6, For Lucid.dc.html
   Default (no JS / reduced motion) = the fully AWAKE page.
   ============================================================ */

@import url('tokens.css');

/* ---------- 1. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* The hidden attribute must always win, even over classes that set display
   (e.g. .poster) — the record-lookup state relies on it. */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
p { margin: 0; }

a { color: var(--copper); text-decoration: none; }
a:hover { color: var(--copper-bright); }

input, textarea, button { font-family: var(--font-mono); border-radius: var(--radius); }
::placeholder { color: var(--patina); }

:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 2. Layout primitives ---------- */

.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  max-width: var(--content-w);
  margin: 0 auto;
}
.section--wide   { max-width: var(--content-w-wide); }
.section--narrow { max-width: var(--content-w-narrow); }

/* full-bleed dark / porcelain bands with constrained inner column */
.section-dark {
  background: var(--lacquer);
  color: var(--porcelain);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.section-porcelain {
  background: var(--porcelain);
  border-top: var(--hairline-ink-soft);
  border-bottom: var(--hairline-ink-soft);
  padding: var(--section-pad-y) var(--section-pad-x);
}
.section-inner { max-width: var(--content-w); margin: 0 auto; }
.section-inner--narrow { max-width: var(--content-w-narrow); }

/* SalvageLabel header row */
.section-head {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  flex-wrap: wrap;
  border-bottom: var(--hairline-ink);
  padding-bottom: 14px; margin-bottom: 44px;
}
.section-head--tight { margin-bottom: var(--sp-2); }
.section-head--dark { border-bottom: var(--hairline-solder); margin-bottom: var(--sp-4); }
.salvage-label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); line-height: var(--lh-mono);
  color: var(--copper);                      /* awake by default */
  transition: color var(--dur-wake) ease-out;
}
.section-head__counter {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; line-height: var(--lh-mono);
  color: var(--graphite);
}
.section-head--dark .section-head__counter { color: var(--patina); }

/* wake phrases (manifesto) — awake by default */
[data-wake-phrase] { color: var(--copper); transition: color .7s ease-out calc(var(--wi, 0) * var(--dur-phrase-stagger)); }

/* clearly-marked placeholder slot */
.placeholder-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; padding: var(--sp-1);
  border: 1px dashed rgb(var(--ink-rgb) / .35);
  background: rgb(var(--ink-rgb) / .04);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro); line-height: var(--lh-mono);
  text-transform: uppercase; color: var(--patina);
}
.placeholder-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--patina); margin-top: 18px;
}

/* ---------- 3. SpineTrace / SpinePulse ---------- */

.spine-trace {
  position: fixed; left: var(--spine-left); top: 0; bottom: 0; width: 1px;
  background: rgb(var(--patina-rgb) / .45);
  z-index: 4; pointer-events: none;
}
.spine-pulse {
  position: fixed; left: calc(var(--spine-left) - 1.5px); top: 0;
  width: 4px; height: var(--spine-pulse-h);
  background: linear-gradient(to bottom, rgb(var(--copper-bright-rgb) / 0), var(--copper-bright) 45%, rgb(var(--copper-bright-rgb) / 0));
  box-shadow: var(--glow-copper);            /* the only permitted glow */
  z-index: 4; pointer-events: none;
  will-change: transform;
}

/* ---------- 4. Hero ---------- */

.section-hero {
  min-height: 100vh; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px var(--sp-3) 70px;
  overflow: hidden;
}
.site-nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(24px, 6vw, 72px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label);
}
.site-nav__links { display: flex; gap: clamp(14px, 3vw, 34px); flex-wrap: wrap; }
.site-nav__links a { color: var(--graphite); padding: 14px 2px; }  /* ≥44px hit target */
.site-nav__links a:hover { color: var(--copper); }
.site-nav__links a.site-nav__join { color: var(--copper); }
.site-nav__links a.site-nav__join:hover { color: var(--copper-bright); }

.hero-corner {
  position: absolute; bottom: var(--sp-3);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--patina);
}
.hero-corner--left  { left: clamp(24px, 6vw, 72px); }
.hero-corner--right { right: clamp(24px, 6vw, 72px); }
.hero-scroll-cue {
  position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-micro-wide);
  color: var(--copper); white-space: nowrap;
}

.hero-hands { position: relative; width: min(880px, 92vw, calc(46vh * 1.7735)); }
.hero-hands__stage { display: block; width: 100%; height: auto; aspect-ratio: 750 / 423; }

.binary-hand text {
  font-family: var(--font-mono); font-size: 8.5px;
  /* font-weight comes per glyph (inline) — the point alpha picks 400/500 */
  text-anchor: middle;
  fill: var(--copper);                       /* awake by default */
  opacity: var(--a, 1);                      /* per-glyph floored alpha (inline) */
}
.binary-hand--bright text { fill: var(--copper-bright); }
.hero-spark { filter: drop-shadow(0 0 8px rgb(var(--copper-bright-rgb) / .9)); }

.hero-title { text-align: center; margin-top: -30px; position: relative; z-index: 2; }
.wordmark {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-wordmark);
}
.hero-tagline {
  font-size: clamp(19px, 2.4vw, 26px); font-style: italic;
  color: var(--graphite); margin: 18px 0 0;
}
.hero-title .email-capture { margin: 36px auto 0; }

/* ---------- 5. EmailCapture ---------- */

.email-capture { display: flex; gap: 0; width: min(460px, 88vw); }
.email-capture input {
  flex: 1; min-width: 0;
  font-size: 13px; letter-spacing: .06em; padding: 14px 16px;   /* ≈47px tall */
  background: var(--porcelain); border: 1px solid var(--ink); border-right: none;
  color: var(--ink);
}
.email-capture button {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); padding: 14px 24px;
  background: var(--copper); color: var(--porcelain); border: 1px solid var(--copper);
  cursor: pointer;
}
.email-capture button:hover { background: var(--copper-bright); border-color: var(--copper-bright); }

/* dark (terminal) variant */
.email-capture--dark { width: min(460px, 100%); }
.email-capture--dark input {
  background: var(--lacquer); border-color: var(--solder); color: var(--porcelain);
}
.email-capture--dark button {
  background: var(--copper-bright); color: var(--lacquer); border-color: var(--copper-bright);
}
.email-capture--dark button:hover { background: var(--copper); border-color: var(--copper); }

.form-success {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  color: var(--copper); padding: 15px 0;
}
.form-success--bright { color: var(--copper-bright); }
.form-success--small { font-size: var(--fs-label); letter-spacing: .12em; padding: 0; }

/* ---------- 6. Manifesto ---------- */

.manifesto__cols { display: flex; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.manifesto__body {
  flex: 1 1 480px; max-width: var(--measure);
  font-size: var(--fs-body-lg); line-height: var(--lh-body-lg);
}
.manifesto__body p + p { margin-top: 1.2em; }
.manifesto__close { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); }
.manifesto__footnotes {
  flex: 0 1 240px; display: flex; flex-direction: column; gap: 22px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: var(--graphite);
  border-left: 1px solid rgb(var(--ink-rgb) / .2); padding-left: 20px;
}
.fn-no { color: var(--copper); }
.fn-placeholder { color: var(--patina); }

/* ---------- 7. Machines — SpecimenPlate / SpecStrip / StatusTag ---------- */

.machines-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}
#machines h2, #log h2 { margin-bottom: var(--sp-4); }

.specimen-plate {
  background: var(--lacquer); position: relative; cursor: pointer;
  outline: 1px solid rgb(var(--ink-rgb) / .4);
}
.specimen-plate:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.specimen-plate__head {
  display: flex; justify-content: space-between; padding: 16px 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-micro);
}
.specimen-plate__acc { color: var(--patina); }
.status-tag--awake   { color: var(--status-awake); }
.status-tag--waking  { color: var(--status-waking); }
.status-tag--dormant { color: var(--status-dormant); }

.specimen-plate__plate {
  height: 300px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.specimen-plate__plate svg { width: 230px; height: auto; }
.specimen-plate [data-layer] {
  transition: transform var(--dur-explode) var(--ease-explode);
  will-change: transform;
}
[data-layer="2"]  { --n: 2; }
[data-layer="1"]  { --n: 1; }
[data-layer="0"]  { --n: 0; }
[data-layer="-1"] { --n: -1; }
[data-layer="-2"] { --n: -2; }

.specimen-plate__body { padding: 6px 18px 20px; }
.specimen-plate__name { font-size: var(--fs-h3-card); line-height: var(--lh-h3); }
.specimen-plate__name a { color: var(--porcelain); }
.specimen-plate__name a:hover { color: var(--copper-bright); }
.specimen-plate__line {
  font-size: 16px; font-style: italic; color: var(--solder);
  margin: 6px 0 16px; line-height: 1.5;
}
.spec-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-data);
  line-height: var(--lh-mono); color: var(--patina);
  border-top: var(--hairline-solder-soft); padding-top: 12px;
}
.specimen-plate__open {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-label);
  color: var(--copper-bright); margin-top: 14px;
}

/* ---------- 8. Detail — ExplodedView ---------- */

.detail__cols { display: flex; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.exploded-view { flex: 1 1 420px; position: relative; }
.exploded-view svg { width: min(560px, 100%); height: auto; display: block; margin: 0 auto; }
.exploded-view [data-xk] { will-change: transform; }
.exploded-view .ev-axis { transition: opacity .4s; opacity: .9; }
.exploded-view .ev-callouts { transition: opacity .5s; opacity: 1; }
/* static presentation (no motion) = spec's reduced-motion state: p = .65 */
html:not(.motion) .exploded-view [data-xk] { transform: translateY(calc(var(--xk) * 0.35px)); }
.exploded-view__caption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-micro);
  color: var(--graphite); text-align: center; margin-top: 10px;
}
.detail__meta { flex: 1 1 320px; max-width: 520px; }
.detail__meta h1, .detail__meta h2 { font-size: clamp(36px, 4.4vw, 54px); line-height: var(--lh-h2); }
.detail__line { font-size: var(--fs-body); font-style: italic; color: var(--solder); margin: 8px 0 28px; }
.detail__grid {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 22px;
  font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: var(--ls-data);
  line-height: var(--lh-mono);
  border-top: var(--hairline-solder); padding-top: 18px;
}
.detail__grid dt { color: var(--patina); margin: 0; }
.detail__grid dd { margin: 0; }
.detail__narrative {
  font-size: 18px; line-height: 1.65; color: #E7E4DC;
  margin: 30px 0 0; max-width: 56ch;
}
.detail__narrative .fn-placeholder { color: var(--patina); }

/* ---------- 9. Build Log — strata ---------- */

.strata {
  border-left: 2px solid var(--copper);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-left: clamp(20px, 4vw, 44px);
}
.log-entry {
  display: flex; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap;
  align-items: flex-start; position: relative;
  transition: opacity var(--dur-rise) ease-out, transform var(--dur-rise) ease-out;
}
.log-entry::before {                          /* node dot on the spine */
  content: ""; position: absolute; top: 6px;
  left: calc(-6.5px - clamp(20px, 4vw, 44px));
  width: 11px; height: 11px;
  background: var(--bone); border: 2px solid var(--copper); border-radius: 50%;
}
.log-entry__when { flex: 0 0 210px; }
.log-entry__date { font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: .14em; color: var(--copper); }
.log-entry__tag  { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--patina); margin-top: 4px; }
.log-entry__text { flex: 1 1 280px; font-size: var(--fs-body); line-height: 1.55; max-width: 48ch; }
.log-entry__slot { flex: 0 0 190px; height: 126px; }

/* ---------- 10. About — LuciaFigure ---------- */

.about__cols { display: flex; gap: clamp(32px, 6vw, 84px); flex-wrap: wrap; align-items: center; }
.about__copy { flex: 1 1 420px; max-width: 60ch; }
.about__copy h2 { margin-bottom: var(--sp-3); }
.about__copy p { font-size: 20px; line-height: var(--lh-body); }
.about__quiet { font-style: italic; color: var(--graphite); margin-top: 20px; }
.lucia-figure {
  flex: 0 1 360px; margin: 0;
  background: var(--bone); border: var(--hairline-ink); padding: 18px;
}
.lucia-figure__slot { width: 100%; height: 340px; position: relative; }
.lucia-figure figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--patina); margin-top: 12px;
}
.lucia-figure__name { color: var(--copper); }

/* ---------- 11. Support / Ask — OfferingPanel ---------- */

.offerings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.offering-panel {
  background: var(--porcelain); border: 1px solid rgb(var(--ink-rgb) / .3);
  padding: clamp(22px, 3vw, 36px);
  transition: border-color var(--dur-focus);
}
.offering-panel:focus-within { border-color: var(--copper); }   /* §4.10 — pure CSS */
.offering-panel h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.offering-panel__sub { font-size: var(--fs-quiet); font-style: italic; color: var(--graphite); margin: 8px 0 22px; }
.offering-panel form { display: flex; flex-direction: column; gap: 12px; }
.offering-panel label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-micro);
  color: var(--patina); text-transform: uppercase;
}
.offering-panel input, .offering-panel textarea {
  display: block; width: 100%; margin-top: 6px;
  font-size: 13px; padding: 13px 14px;                          /* ≈45px tall */
  background: var(--bone); border: 1px solid var(--ink); color: var(--ink);
}
.offering-panel textarea { resize: vertical; }
.offering-panel button {
  align-self: flex-start;
  font-size: var(--fs-label); letter-spacing: var(--ls-label); padding: 13px 26px;
  cursor: pointer;
}
.offering-panel .btn-copper {
  background: var(--copper); color: var(--porcelain); border: 1px solid var(--copper);
}
.offering-panel .btn-copper:hover { background: var(--copper-bright); border-color: var(--copper-bright); }
.offering-panel .btn-ghost {
  background: var(--bone); color: var(--ink); border: 1px solid var(--ink);
}
.offering-panel .btn-ghost:hover { background: var(--ink); color: var(--bone); }

/* ---------- 12. Terminal / Footer — FooterSchematic ---------- */

.section-terminal { padding-bottom: var(--sp-4); }
.terminal__title { font-size: clamp(34px, 5vw, 64px); margin-bottom: 12px; max-width: 20ch; }
.terminal__sub { font-size: var(--fs-body); font-style: italic; color: var(--solder); margin-bottom: 34px; }
.terminal__row {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
  margin-bottom: 70px;
}
.terminal__social { display: flex; gap: 26px; font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: var(--ls-micro); }
.terminal__social a { color: var(--solder); padding: 14px 0; }
.terminal__social a:hover { color: var(--copper-bright); }
.footer-schematic svg { width: 100%; height: auto; display: block; opacity: .55; }
.colophon {
  display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  border-top: var(--hairline-solder-soft); margin-top: 26px; padding-top: 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-micro);
  color: var(--patina);
}

/* ============================================================
   PRODUCT PAGE — SpecimenRecord (poster / exploded / notes)
   ============================================================ */

.poster {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: 0 clamp(24px, 6vw, 72px) 34px;
}
.poster__nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label);
  border-bottom: var(--hairline-ink);
}
.poster__nav a { color: var(--graphite); padding: 14px 0; }
.poster__nav a:hover { color: var(--copper); }
.poster__corners { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 8px; gap: var(--sp-2); }
.poster__corner--right { text-align: right; }
.poster__numeral {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-display); font-size: clamp(84px, 13vw, 168px); line-height: .95;
}
.poster__corner--right .poster__numeral { justify-content: flex-end; }
.poster__numeral--accession { color: var(--copper); }
.poster__numeral small {
  font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: var(--ls-micro);
  color: var(--graphite); margin-top: 18px;
}
.poster__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--graphite); line-height: 1.8; margin-top: 10px;
}
.poster__meta strong { color: var(--ink); font-weight: 400; }
.poster__meta .is-awake-text { color: var(--copper); }

.poster__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 0; }
.poster__plate-wrap { position: relative; width: min(420px, 84vw); }
.poster__plate { background: var(--porcelain); border: var(--hairline-ink-strong); padding: 26px; }
.poster__plate svg { width: 100%; height: auto; display: block; }
.copper-band {
  position: absolute; left: -13%; top: 43%; width: 56%; height: 104px;
  background: var(--copper); mix-blend-mode: multiply; opacity: .9;
  pointer-events: none;
  will-change: transform, opacity;
}
.poster__caption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-micro);
  color: var(--patina); text-align: center; margin-top: 12px;
}
.poster__baseline {
  border-top: var(--hairline-ink-strong); padding-top: 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3); align-items: start;
}
.poster__baseline .b-date { font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: .1em; color: var(--ink); }
.poster__baseline .b-narrative { font-size: 16px; line-height: 1.55; max-width: 38ch; }
.poster__baseline .b-block {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  line-height: 1.8; color: var(--graphite);
}
.poster__baseline .b-block strong { color: var(--ink); font-weight: 400; }

.record-foot {
  display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  border-top: var(--hairline-ink); margin-top: var(--sp-5); padding-top: 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-micro);
  color: var(--patina);
}

/* Unknown-accession lookup state (product.html?id= missing or no match) */
.record-notfound { min-height: 72vh; }
.record-notfound h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: var(--lh-h2); margin-top: var(--sp-4); }
.record-notfound__copy { font-size: 19px; line-height: 1.55; color: var(--graphite); margin-top: var(--sp-2); max-width: 48ch; }
.record-notfound__list {
  list-style: none; padding: 0; margin: var(--sp-3) 0 0;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
}
.record-notfound__list a { color: var(--copper); }
.record-notfound__list a:hover { color: var(--copper-bright); }

/* ============================================================
   MOTION — only under html.motion (JS present + motion allowed).
   Everything here has its static fallback above.  Spec §4.
   ============================================================ */

/* §4.6 section wake — dormant until IO fires .is-awake */
.motion [data-wake-section]:not(.is-awake) [data-wake],
.motion [data-wake-section]:not(.is-awake) [data-wake-phrase] { color: var(--patina); }

/* §4.9 build-log rise */
.motion .log-entry:not(.is-risen) { opacity: 0; transform: translateY(14px); }

/* §4.7 SpecimenPlate explode — exploded statically; on motion, on hover/focus */
html:not(.motion) .specimen-plate [data-layer],
.motion .specimen-plate:is(:hover, :focus-visible, :focus) [data-layer] {
  transform: translateY(calc(var(--n) * var(--explode-step) * -1));
}

/* §4.8 detail scroll explode — collapsed + hidden until JS drives it */
.motion .exploded-view [data-xk] { transform: translateY(calc(var(--xk) * 1px)); }
.motion .exploded-view .ev-axis { opacity: 0; }
.motion .exploded-view .ev-callouts { opacity: 0; }

/* §4.1 hero glide-in — hands start 60px further apart */
.hero-glide { transition: transform var(--dur-glide) var(--ease-glide); will-change: transform; }
.motion .hero-hands__stage:not(.is-in) .hero-glide--binary { transform: translateX(-60px); }
.motion .hero-hands__stage:not(.is-in) .hero-glide--human  { transform: translateX(60px); }

/* §4.1b binary assemble + §4.3 wake wave (per-glyph one-shot transitions) */
.motion .binary-hand text {
  transition: opacity .5s ease-out calc(var(--da, 0) * 1ms),
              fill .25s linear calc(var(--dw, 0) * 1ms);
}
.motion .binary-hand:not(.is-on) text { opacity: 0; }
.motion .binary-hand:not(.is-awake) text { fill: var(--patina); }

/* §4.3 heartbeat — copper-bright band travels wrist→fingertip every 4.6s.
   The bright duplicate layer is revealed through a clip rect; only the
   rect's transform animates (compositor-only). */
.binary-hand--bright { visibility: hidden; }
.motion .is-beating .binary-hand--bright { visibility: visible; }
.motion .is-beating .hb-band { animation: heartbeat 4.6s linear infinite; }
@keyframes heartbeat {
  0%   { transform: translateX(0); }
  26%  { transform: translateX(620px); }   /* ≈1.2s traverse */
  100% { transform: translateX(620px); }
}

/* §4.2 hero title rise */
.motion .hero-title { transition: opacity var(--dur-title) ease-out, transform var(--dur-title) ease-out; }
.motion .hero-title:not(.is-risen) { opacity: 0; transform: translateY(16px); }

/* §4.11 copper band slide-in (product page) */
.motion .copper-band { transition: transform var(--dur-band) var(--ease-explode), opacity .5s ease-out; }
.motion .copper-band:not(.is-in) { transform: translateX(-130%); opacity: 0; }

/* ============================================================
   RESPONSIVE — spec §5
   ============================================================ */

@media (max-width: 820px) {
  .spine-trace, .spine-pulse { display: none; }
  .hero-hands { width: 94vw; }
  .hero-spark circle[data-ring]:nth-of-type(3) { display: none; } /* one spark loop retained */
  .log-entry__when { flex-basis: 100%; }
}

/* narrow phones: corner labels would collide with the centered scroll cue —
   stack all three on the center line instead */
@media (max-width: 560px) {
  .section-hero { padding-bottom: 130px; }
  .hero-corner { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .hero-corner--left { bottom: 64px; }
  .hero-corner--right { bottom: 44px; }
  .hero-scroll-cue { bottom: var(--sp-3); }
}

/* ============================================================
   REDUCED MOTION — html.motion is never set when reduced, so the
   static-awake defaults above already apply. Belt-and-braces for
   JS-independent motion (SMIL spark rings, smooth scroll):
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero-spark circle[data-ring] { display: none; }  /* dot stays */
  html { scroll-behavior: auto; }
}