/**
 * @fileoverview The Home told along the cable (guion approved by Eneko on 03/11/2026, DESIGN.md):
 * the layout of the beats and the look of the thread scripts/story.js draws.
 *
 * @remarks
 * Drawn for real, as Eneko chose after round home r2 (its variant C): a black sheath with its
 * printed marking, three cores as tubes with an edge and a highlight, a clamp with a hinge. Colours
 * only from tokens.css: L1 is the violet, L2 ink and L3 the muted grey, as everywhere else on the
 * site; the terminals are drawn in ink like the logo. The cable passes behind the two headlines
 * only, and fades there (a mask in scripts/story.js) so the letters stay legible over it. A halo
 * round the letters was tried first (03/11): it read as outlined type.
 */
.story { position: relative; --lane: 112px; }
.thread { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
/* The thread is drawn down to the reading line (62 % of the screen) as the page scrolls. The two
   lengths come from scripts/story.js; under reduced motion it is all drawn at once. */
@media (prefers-reduced-motion: no-preference) {
  .thread { animation: thread-reveal linear both; animation-timeline: scroll(root); animation-range: 0px var(--thread-scroll, 0px); }
}
@keyframes thread-reveal { from { clip-path: inset(0 0 var(--thread-hidden, 0px) 0); } to { clip-path: inset(0 0 0 0); } }

.beat { position: relative; z-index: 1; padding-left: var(--lane); }
.beat + .beat { margin-top: var(--section-gap); }
.beat-hero { padding-top: clamp(72px, 11vw, 160px); }
.beat-gap h2 { max-width: 16ch; }
/* The lead leaves a lane on its right for the cable's right-hand run (scripts/story.js). */
.story { --rlane: 72px; }
.beat-hero .lead { max-width: min(30ch, calc(100% - var(--rlane))); }

.story-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.story-steps[start="3"] { counter-reset: step 2; }
.story-steps li { counter-increment: step; display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: 16px; padding: 28px 0; border-top: 1px solid var(--line); }
.story-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 3; font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--fg-muted); transition: color .4s; }
.story-steps li.lit::before { color: var(--accent-text); }
.story-steps h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; color: var(--fg); }
.story-steps p { margin: 6px 0 0; max-width: var(--measure); }
.story-steps .readout { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--accent-text); }
.story-device { max-width: 34ch; margin: clamp(56px, 7vw, 96px) 0; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--fg); }

/* The cable. */
.thread .sheath { fill: none; stroke: var(--carbon-raised); stroke-linecap: round; }
.thread .sheath-shine { fill: none; stroke: rgb(255 255 255 / .2); stroke-linecap: round; }
.thread .sheath-print { font: 500 9px var(--mono); letter-spacing: .12em; fill: var(--carbon-muted); }
.thread .sheath-end { fill: var(--muted); }
.thread :is(.core-edge, .core, .core-shine) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread .core-edge { stroke: var(--carbon); }
.thread .core.l1 { stroke: var(--l1); }
.thread .core.l2 { stroke: var(--body); }
.thread .core.l3 { stroke: var(--muted); }
.thread .core-shine { stroke: rgb(255 255 255 / .35); }

/* The clamp, the device and the data. */
.thread .jaw { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.6; transform-box: fill-box; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.thread .jaw-l { transform: translateX(-10px) rotate(-14deg); transform-origin: 100% 100%; }
.thread .jaw-r { transform: translateX(10px) rotate(14deg); transform-origin: 0 100%; }
.thread .clamp.on .jaw { transform: none; }
.thread .hinge { fill: var(--ink); }
.thread .bar { fill: transparent; stroke: var(--ink); stroke-width: 1.2; transition: fill .5s; }
.thread .device.on .bar { fill: var(--ink); }
.thread .body { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.2; }
.thread .led { fill: var(--rule); transition: fill .4s; }
.thread .device.on .led { fill: var(--l1); }
.thread .data { fill: none; stroke: var(--l1); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.thread .node { fill: var(--chalk); stroke: var(--l1); stroke-width: 1.5; }
.thread .wave { fill: none; stroke: var(--l1); stroke-width: 1.5; opacity: 0; transition: opacity .5s; }
.thread .mark-report.on .wave { opacity: 1; }
.thread .card { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.2; transition: fill .5s; }
.thread .mark-work.on .card { fill: var(--l1-pale); }
.thread .tick { fill: none; stroke: var(--l1-ink); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.thread .mark-close.on .tick { opacity: 1; }

@media (max-width: 760px) {
  .story { --lane: 56px; --rlane: 36px; }
  /* At 390 "Electrification" at full size ran 8 px past the screen with this lane (seen 03/11). */
  .beat-hero h1 { font-size: min(var(--h1-size), 12vw); }
}