/* film: "From file to proof", a five-step isometric film with a numbered step rail. Scoped to .fl
   v5: the films' world ("paper studio"): a paper stage, warm-grey blocks with fine ink outlines, records as outlined data
   cells, orange only for the key element, Figtree caps labels with hairline leaders, Newsreader answers and italic
   captions, mono data.
   Motion is calm and continuous: the read line glides, the hashes dissolve, the blocks settle; no pops. */

.fl .fl-card { container: fl / inline-size; border: 1px solid var(--ink); background: var(--white); }
.fl .fl-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

/* Phone first: rail as a five-cell timeline, then the stage, then caption and readouts */
.fl .fl-side { display: contents; }
.fl .fl-rail { order: 1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 6px; padding: 18px 14px 14px; border-bottom: 1px solid var(--line); }
.fl .fl-stage { order: 2; }
.fl .fl-panel { order: 3; padding: 16px 16px 6px; }

.fl .fl-tab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
/* Step number: a small Figtree figure in a hairline cell */
.fl .fl-tn { display: grid; place-items: center; width: 100%; height: 30px; border: 1px solid var(--line-2); background: var(--white); font-family: var(--font); font-weight: 500; font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); transition: background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.fl .fl-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fl .fl-tab:hover .fl-tn { border-color: var(--ink); color: var(--ink); }
.fl .fl-tab:focus-visible { outline-offset: 2px; }
.fl .fl-tab[aria-selected="true"] { color: var(--ink); }
.fl .fl-tab[aria-selected="true"] .fl-tn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fl .fl-tab.fl-done .fl-tn { background: var(--g1); border-color: var(--g1); color: var(--ink); }
/* current step: a small ink triangle */
.fl .fl-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; top: -11px; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid var(--ink); border-bottom: 0; }

/* Progress: a hairline that draws on while the step plays (its end moves the film on: keep the name fl-tick) */
.fl .fl-tk { --tn: 6; display: block; width: calc(var(--tn) * 8px - 3px); max-width: 100%; height: 2px; background: var(--line); }
.fl .fl-tk b { display: block; height: 100%; background: var(--ink); clip-path: inset(0 100% 0 0); }
.fl .fl-tab.fl-done .fl-tk b { clip-path: none; background: var(--blue-500); }
.fl .fl-tab[aria-selected="true"] .fl-tk b { clip-path: none; }
.fl .fl-auto .fl-tab[aria-selected="true"] .fl-tk b { animation: fl-tick var(--dur, 7s) linear both; }
@keyframes fl-tick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Caption and readouts: every step's copy sits in the same grid cell, so switching never shifts the page */
.fl .fl-caps, .fl .fl-reads { display: grid; }
.fl .fl-caps > *, .fl .fl-reads > * { grid-area: 1 / 1; visibility: hidden; }
.fl .fl-caps > .on, .fl .fl-reads > .on { visibility: visible; }
.fl .fl-k { margin: 0 0 6px; font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* The step's caption in the films' voice: one Newsreader italic sentence beside the figure */
.fl .fl-ct { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
.fl .fl-reads { margin-top: 14px; }
.fl .fl-read { margin: 0; align-self: start; }
.fl .fl-read > div { display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr); gap: 2px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.fl .fl-read dt { margin: 0; font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Values read like the films' read-out cards: Newsreader figures; hashes and genotypes stay mono */
.fl .fl-read dd { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.005em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.fl .fl-read .fl-mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.fl .fl-fade { animation: fl-fade .45s var(--ease) both; }
@keyframes fl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Stage: the films' paper, the figure, a corner tag and a square play control */
.fl .fl-stage { position: relative; display: flex; align-items: center; background: var(--paper); min-width: 0; }
.fl .fl-svg { display: block; width: 100%; height: auto; }
.fl .fl-svg text { font-family: var(--mono); }
.fl .fl-svg .fl-t2 { font-family: var(--font); }
.fl .fl-svg .fl-lb { font-family: var(--font); font-weight: 500; letter-spacing: .1em; fill-opacity: .9; }
.fl .fl-svg .fl-nr { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; }
.fl .fl-svg .fl-it { font-family: var(--display); font-style: italic; font-weight: 400; }
.fl .fl-svg .fl-mo { font-family: var(--mono); }
.fl .fl-svg image { image-rendering: auto; }
/* The sample tag: the core synthetic chip's type (.syn-chip: small Figtree caps, an outlined orange square), on a hairline */
.fl .fl-chip { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 27px; margin: 0; padding: 0 9px 0 8px; background: var(--white); border: 1px solid var(--line-2); font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.fl .fl-chip i { width: 6px; height: 6px; flex: none; background: var(--signal); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 50%, transparent); }
/* Play/pause: the chip's twin on the right (same height, hairline, same caps), a Figtree control; hover darkens the rule. */
.fl .fl-play { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 27px; margin: 0; padding: 0 10px 0 9px; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease); }
.fl .fl-play:hover { border-color: var(--ink); }
.fl .fl-play:active { background: var(--paper); }
.fl .fl-play svg { width: 8px; height: 8px; flex: none; fill: currentColor; }
.fl .fl-play span { min-width: 5ch; text-align: left; }

/* ---------- What shows in which step (data-step 1–5 on the svg) ---------- */
.fl .fl-sheet, .fl .fl-co, .fl .fl-twl { opacity: 0; transition: opacity .4s var(--ease); }
.fl .fl-svg[data-step="1"] .fl-sheet { opacity: 1; transition-delay: .15s; }
.fl .fl-svg[data-step="1"] .fl-co-1, .fl .fl-svg[data-step="2"] .fl-twl, .fl .fl-svg[data-step="3"] .fl-co-3, .fl .fl-svg[data-step="4"] .fl-co-4 { opacity: 1; transition-delay: .9s; }
.fl .fl-svg[data-step="2"] .fl-twl { transition-delay: 1.8s; }

/* 1 · Read: an ink line glides down the slab and the records appear behind it; the file's lines are read one by one */
.fl .fl-unread, .fl .fl-scan, .fl .fl-tex2, .fl .fl-hot { opacity: 0; }
.fl .fl-unread { transform-box: fill-box; transform-origin: 50% 100%; }
.fl .fl-svg[data-step="1"] .fl-unread { opacity: 1; transform: scaleY(0); animation: fl-unread var(--scan) linear both; }
.fl .fl-svg[data-step="1"] .fl-scan { animation: fl-scan var(--scan) linear both; }
.fl .fl-svg[data-step="1"] .fl-hl { animation: fl-hl var(--scan) steps(var(--hn), end) both; }
@keyframes fl-unread { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes fl-scan { 0% { opacity: 0; transform: translateY(0); } 4% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--gh)); } }
@keyframes fl-hl { from { transform: none; } to { transform: translateY(var(--hy)); } }

/* 2 · Classify: six panel squares turn orange, rise out as cubes and stack into three towers */
.fl .fl-hot { transition: opacity .45s var(--ease); }
.fl .fl-svg:not([data-step="1"]) .fl-hot { opacity: 1; }
.fl .fl-vx { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.fl .fl-svg[data-step="2"] .fl-vx { opacity: 1; transform: none; animation: fl-rise 1.6s var(--ease-io) var(--d) both; }
@keyframes fl-rise {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.18); }
  14% { opacity: 1; }
  50% { transform: translate(var(--sx), calc(var(--sy) - 60px)) scale(.6); }
  100% { opacity: 1; transform: none; }
}

/* 3 · Commit: the records dissolve into salted hashes and the pyramid settles up to the root */
.fl .fl-tex2 { transition: opacity .9s var(--ease); }
.fl .fl-svg:is([data-step="3"], [data-step="4"], [data-step="5"]) .fl-tex2 { opacity: 1; }
.fl .fl-lv { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.fl .fl-svg:is([data-step="3"], [data-step="4"], [data-step="5"]) .fl-lv { opacity: 1; transform: none; }
.fl .fl-svg[data-step="3"] .fl-lv { animation: fl-tier .8s var(--ease) calc(var(--d) + .5s) both; }
@keyframes fl-tier { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fl .fl-rt { opacity: 0; transition: opacity .35s var(--ease); }
.fl .fl-svg[data-step="3"] .fl-rt { opacity: 1; animation: fl-drop .8s var(--ease) calc(var(--d) + .5s) both; }
@keyframes fl-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }

/* 4 · Prove: the chip settles in, the root rises into its lock, the inputs below go quiet */
.fl .fl-base { transition: opacity .8s var(--ease); }
.fl .fl-svg[data-step="4"] .fl-base { opacity: .34; }
.fl .fl-svg[data-step="5"] .fl-base { opacity: .5; }
.fl .fl-svg[data-step="4"] .fl-rt { opacity: 0; transform: translateY(var(--ru)); transition: transform .8s var(--ease-io) .75s, opacity .2s linear 1.45s; }
.fl .fl-jm { opacity: 0; transform: translateY(-34px); transition: opacity .5s var(--ease), transform .9s var(--ease); }
.fl .fl-svg[data-step="4"] .fl-jm { opacity: 1; transform: none; }
.fl .fl-key { opacity: 0; transition: opacity .25s var(--ease); }
.fl .fl-svg[data-step="4"] .fl-key { opacity: 1; transition-delay: 1.5s; }
.fl .fl-svg[data-step="5"] .fl-key { opacity: 1; }

/* 5 · Verify: the world steps back, the chip slides onto the verifier's card, the verdict settles */
.fl .fl-world { transition: transform 1.1s var(--ease-io); }
.fl .fl-svg[data-step="5"] .fl-world { transform: translate(var(--wx), var(--wy)) scale(var(--wk)); }
.fl .fl-svg[data-step="5"] .fl-jm { opacity: 1; transform: translate(var(--cx), var(--cy)) scale(var(--ck)); transition: transform 1.1s var(--ease-io) .35s, opacity .3s var(--ease); }
.fl .fl-vc { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .7s var(--ease); }
.fl .fl-svg[data-step="5"] .fl-vc { opacity: 1; transform: none; transition-delay: .15s; }
.fl .fl-vr { opacity: 0; transition: opacity .4s var(--ease); }
.fl .fl-svg[data-step="5"] .fl-vr { opacity: 1; transition-delay: calc(1.4s + var(--d)); }
.fl .fl-stamp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.fl .fl-svg[data-step="5"] .fl-stamp { opacity: 1; animation: fl-stamp .6s var(--ease) 2.5s both; }
@keyframes fl-stamp { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

/* Paused (by the reader, off-screen, hidden tab or a side page on top) */
.fl .fl-hold .fl-svg *, .fl .fl-hold .fl-tk b { animation-play-state: paused !important; }

/* Under the card: the source note (core .fnote) and the two tools it leads to */
.fl .fl-acts { margin-top: var(--s5); }

/* Tablet: stage on top, then the rail and the readouts side by side */
@container fl (min-width: 560px) {
  .fl .fl-side { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 0 32px; order: 2; padding: 22px 24px 18px; border-top: 1px solid var(--ink); }
  .fl .fl-stage { order: 1; }
  .fl .fl-panel { padding: 0; }
  .fl .fl-rail { display: block; padding: 0 0 0 16px; border: 0; }
  .fl .fl-tab { width: 100%; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 7px; padding: 7px 0; }
  .fl .fl-tn { grid-row: 1 / 3; width: 30px; position: relative; z-index: 1; }
  .fl .fl-tl { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 16px; font-weight: 500; line-height: 1; }
  .fl .fl-tk { --tn: 12; }
  .fl .fl-tab::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
  .fl .fl-tab:first-child::before { top: 50%; }
  .fl .fl-tab:last-child::before { bottom: 50%; }
  .fl .fl-tab[aria-selected="true"]::after { left: -15px; top: 50%; margin: -5px 0 0; border: 5px solid transparent; border-left: 6px solid var(--ink); border-right: 0; }
  .fl .fl-k { display: none; }
  .fl .fl-reads { margin-top: 16px; }
  .fl .fl-read dd { font-size: 18px; }
}
/* Desktop: the rail, caption and readouts in a column beside the stage */
@container fl (min-width: 820px) {
  .fl .fl-grid { grid-template-columns: 268px minmax(0, 1fr); }
  .fl .fl-side { order: 1; display: flex; flex-direction: column; gap: 0; padding: 24px 24px 20px; border-top: 0; border-right: 1px solid var(--ink); }
  .fl .fl-stage { order: 2; }
  .fl .fl-panel { margin-top: auto; padding-top: 22px; }
  .fl .fl-read > div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 0; }
  .fl .fl-read dd { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl .fl-fade { animation: none; }
  .fl .fl-svg, .fl .fl-svg * { animation: none !important; transition: none !important; }
}