/* Inside the factory (Owner, 1 November 2026): a circuit board seen from the front. The stage stays under the header while
   the section scrolls past; the board on the left, the words for the part in focus on the right. Tokens only. */
.scene-board{height:calc(550svh - var(--fb-top,80px));margin-top:120px}
.fb-stage{position:sticky;top:var(--fb-top,80px);height:calc(100svh - var(--fb-top,80px));display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center}
.fb-view{min-width:0}
.fb-svg{--fb-u:1;--fb-draw:1;--fb-show:1;--fb-ring:0;display:block;width:100%;height:auto;max-height:calc(100svh - var(--fb-top,80px) - 64px)}
.fb-svg *{fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round}

/* The board, its holes, the dotted track the circuit closes on. */
.fb-svg .fb-board{fill:var(--at-bg)}
.fb-svg .fb-edge{stroke:var(--at-line);stroke-width:1px;vector-effect:non-scaling-stroke}
.fb-svg .fb-hole-ring{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1)}
.fb-svg .fb-hole-in{fill:var(--at-surface);stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1)}
.fb-svg .fb-track{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1);stroke-dasharray:calc(var(--fb-u) * 1) calc(var(--fb-u) * 6)}
.fb-svg .fb-ring{stroke:var(--at-accent);stroke-width:calc(var(--fb-u) * 2);stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--fb-ring))}

/* The traces draw themselves as the board comes in; the ones to the part in focus carry current. */
.fb-svg .fb-tr{stroke:color-mix(in srgb,var(--at-line-strong) 62%,transparent);stroke-width:calc(var(--fb-u) * 1.2);stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--fb-draw));transition:stroke .4s var(--at-ease)}
.fb-svg .fb-net.is-focus .fb-tr,.fb-svg.is-closed .fb-tr{stroke:var(--at-accent)}
.fb-svg .fb-flow{stroke:var(--at-accent);stroke-width:calc(var(--fb-u) * 2.6);stroke-dasharray:4 96;opacity:0;transition:opacity .4s var(--at-ease)}
.fb-svg .fb-net.is-focus .fb-flow,.fb-svg.is-closed .fb-flow,.fb-svg .is-focus .fb-loopflow{opacity:1;animation:fb-flow 1.8s linear infinite}
.fb-svg .fb-via{fill:var(--at-bg);stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1)}
.fb-svg .fb-net.is-focus .fb-via,.fb-svg.is-closed .fb-via{stroke:var(--at-accent)}

/* The parts: quiet until one is in focus, then the others step back. */
.fb-parts{opacity:var(--fb-show)}
.fb-part{transition:opacity .5s var(--at-ease)}
.fb-svg[data-dim] .fb-part:not(.is-focus){opacity:.3}
.fb-svg .fb-body{fill:var(--at-surface);stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1.2);transition:stroke .4s var(--at-ease)}
.fb-svg .is-focus .fb-body,.fb-svg.is-closed .fb-body{stroke:var(--at-text)}
.fb-svg .fb-pin,.fb-svg .fb-pad{fill:var(--at-line-strong)}
.fb-svg .fb-die{fill:var(--at-bg);stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1)}
.fb-svg .is-focus .fb-die{stroke:var(--at-accent)}
.fb-svg .fb-glyph{stroke:var(--at-text);stroke-width:calc(var(--fb-u) * 1.5)}
.fb-svg .fb-glyph3{stroke-width:calc(var(--fb-u) * .7)}
.fb-svg .fb-dot{fill:var(--at-accent);transform-box:fill-box;transform-origin:center}
.fb-svg .fb-mark1{fill:var(--at-line-strong)}
.fb-svg .fb-notch{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1.2)}
.fb-svg .fb-specline{stroke:var(--at-text-muted);stroke-width:calc(var(--fb-u) * 2.4);stroke-dasharray:1 1;stroke-dashoffset:0}
.fb-svg .fb-link{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1.2)}
.fb-svg .fb-loop{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1.2);stroke-dasharray:calc(var(--fb-u) * 4) calc(var(--fb-u) * 4)}
.fb-svg .fb-hole{fill:var(--at-line)}
.fb-svg .fb-cell{fill:var(--at-line)}
.fb-svg .fb-socket{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1);stroke-dasharray:calc(var(--fb-u) * 3) calc(var(--fb-u) * 3)}
.fb-svg .fb-mod{transform-box:fill-box;transform-origin:center}
.fb-svg .fb-swap-in{opacity:0}
.fb-svg .fb-fill{fill:var(--at-line);transform-box:fill-box;transform-origin:0 50%}
.fb-svg .fb-silk{stroke:var(--at-line-strong);stroke-width:calc(var(--fb-u) * 1);stroke-dasharray:calc(var(--fb-u) * 3) calc(var(--fb-u) * 3)}
.fb-svg .fb-pop{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .45s var(--at-ease),transform .45s var(--at-ease)}
.fb-svg.is-closed .fb-pop{opacity:1;transform:none}
.fb-svg.is-closed .fb-foot:nth-of-type(2) .fb-pop{transition-delay:.08s}.fb-svg.is-closed .fb-foot:nth-of-type(3) .fb-pop{transition-delay:.16s}
.fb-svg.is-closed .fb-foot:nth-of-type(4) .fb-pop{transition-delay:.24s}.fb-svg.is-closed .fb-foot:nth-of-type(5) .fb-pop{transition-delay:.32s}
.fb-svg.is-closed .fb-foot:nth-of-type(6) .fb-pop{transition-delay:.4s}.fb-svg.is-closed .fb-foot:nth-of-type(7) .fb-pop{transition-delay:.48s}
.fb-svg.is-closed .fb-foot:nth-of-type(8) .fb-pop{transition-delay:.56s}

/* What each part does while it is in focus. */
.fb-svg .is-focus .fb-dot{animation:fb-beat 1.2s var(--at-ease) infinite}
.fb-svg .is-focus .fb-specline{stroke:var(--at-text);animation:fb-write 2.8s var(--at-ease) infinite}
.fb-svg .is-focus .fb-step{animation:fb-step 2.4s linear infinite}
.fb-svg .is-focus .fb-hole{animation:fb-glow 2.4s var(--at-ease) infinite}
.fb-svg .is-focus .fb-cell{animation:fb-glow 1.8s var(--at-ease) infinite}
.fb-svg .is-focus .fb-swap-out{animation:fb-out 4s var(--at-ease) infinite}
.fb-svg .is-focus .fb-swap-in{animation:fb-in 4s var(--at-ease) infinite}
.fb-svg .is-focus .fb-fill{fill:var(--at-accent);animation:fb-fill 3s var(--at-ease) infinite}
/* Each piece starts a little after the one before it (after the rules above, which reset the delay). */
.fb-svg .is-focus .fb-d1,.fb-svg .is-focus .fb-d1 .fb-hole{animation-delay:.3s}.fb-svg .is-focus .fb-d2,.fb-svg .is-focus .fb-d2 .fb-hole{animation-delay:.6s}
.fb-svg .is-focus .fb-d3{animation-delay:.9s}.fb-svg .is-focus .fb-d4{animation-delay:1.2s}.fb-svg .is-focus .fb-d5{animation-delay:1.5s}
@keyframes fb-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fb-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
@keyframes fb-write{0%{stroke-dashoffset:1}35%,100%{stroke-dashoffset:0}}
@keyframes fb-step{0%,100%{fill:var(--at-surface)}8%,22%{fill:var(--at-accent-soft);stroke:var(--at-accent)}34%{fill:var(--at-surface)}}
@keyframes fb-glow{0%,100%{fill:var(--at-line)}45%{fill:var(--at-accent)}}
@keyframes fb-out{0%,30%{opacity:1;transform:none}45%,80%{opacity:0;transform:translateY(-34px)}95%,100%{opacity:1;transform:none}}
@keyframes fb-in{0%,30%{opacity:0;transform:translateY(-34px)}45%,80%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-34px)}}
@keyframes fb-fill{0%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}

/* The words: one part at a time, all of them in the page for readers that do not see the board. */
.fb-caps{display:grid;align-items:center;overflow-x:clip}
.fb-cap{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s var(--at-ease),transform .45s var(--at-ease)}
.fb-cap.is-on{opacity:1;transform:none}
.scene-board .fb-cap h2,.scene-board .fb-cap h3{margin:0;font:500 clamp(28px,2.6vw,38px)/1.12 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:balance}
.fb-cap p{margin:16px 0 0;max-width:34ch;font-size:18px;line-height:1.55;color:var(--at-text-muted)}
.scene-board .fb-cap h2{font-size:clamp(34px,3.4vw,48px)}
/* A second line slides in over the first halfway through the stop. */
.fb-lines{display:grid}
.fb-lines p{grid-area:1/1;transition:opacity .4s var(--at-ease),transform .4s var(--at-ease)}
.fb-line1{transition-delay:.14s}
.fb-line2{opacity:0;transform:translateX(32px)}
.fb-cap.is-next .fb-line1{opacity:0;transform:translateX(-32px);transition-delay:0s}
.fb-cap.is-next .fb-line2{opacity:1;transform:none;transition-delay:.14s}
.fb-cap.fb-more p{margin:0;font:italic 500 clamp(40px,4.2vw,58px)/1.05 var(--at-font-editorial);letter-spacing:var(--at-track-tight);color:var(--at-accent)}

/* At the foot of the screen, centred: the title that comes next, small and quiet, with its arrow; a click goes there. */
.fb-step{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0;border:0;background:none;color:var(--at-text-muted);font:400 18px/1.3 var(--at-font-editorial);cursor:pointer;opacity:0;transition:opacity .4s var(--at-ease),color .2s var(--at-ease)}
.fb-stage.is-live .fb-step{opacity:1}
.fb-step[hidden]{display:none}
.fb-step:hover,.fb-step:focus-visible{color:var(--at-text)}
.fb-step:focus-visible{outline:2px solid var(--at-accent);outline-offset:4px;border-radius:4px}
.fb-arrow{flex:none;width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--at-ease),color .2s var(--at-ease)}
.fb-step:hover .fb-arrow{color:var(--at-accent)}
.fb-step:hover .fb-arrow{transform:translateY(3px)}
.fb-step-name{display:grid;min-width:0}
.fb-step-name span{grid-area:1/1;transition:opacity .35s var(--at-ease),transform .35s var(--at-ease)}
.fb-step-name span:not(.is-on){opacity:0;transform:translateY(8px)}
/* A short window has no room to spare: the titles stay out. */
@media(max-height:700px){.fb-step{display:none}}

@media(prefers-reduced-motion:reduce){
 .fb-svg *,.fb-cap,.fb-lines p,.fb-step,.fb-step-name span,.fb-arrow{animation:none!important;transition:none!important}
}
/* A phone: the board from edge to edge of the screen, the words under it, the camera closer on each part. Each part gets
   about a screen of scrolling, so a light swipe does not skip one (Owner, 2 November 2026: "too sensitive to touch"). */
@media(max-width:680px){
 .scene-board{height:calc(800svh - var(--fb-top,124px));margin-top:72px}
 .fb-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:28px}
 .fb-view{width:100vw;margin-left:calc(50% - 50vw)}
 .fb-svg{max-height:none}
 .fb-caps{align-items:start;min-height:168px}
 .scene-board .fb-cap h2,.scene-board .fb-cap h3{font-size:26px}
 .scene-board .fb-cap h2{font-size:32px}
 .fb-cap p{margin-top:12px;font-size:16px}
 .fb-cap.fb-more p{font-size:40px}
 .fb-step{font-size:16px}
 /* The first line stays and the second slides in under it, so a swipe that lands past halfway still shows both, in
    order (Owner, 2 November 2026: "the factory slides on mobile jump to the 50% text instantly"). */
 .fb-lines p{grid-area:auto}
 .fb-line2{transform:translateY(10px)}
 .fb-cap.is-next .fb-line1{opacity:1;transform:none}
}