/* =============================================================================
   ReLEAF homepage: 3b HOW RELEAF WORKS (#how). One card whose painting
   plays without a cut and whose caption changes at each beat, after Neo's
   18 Oct walkthrough (Lambert-GA's "The Varroa mite"). Later the same day
   (owner): hosted beside the real reactor in #dx, the card stands white on
   the ink; the drawing is a painting after the design team's valley on
   #vision (the rw- rules below; build/how-art.py). 18 Oct evening
   (Jacquelyn): the section's name stands above the card on the ink, and
   the card is a clean technical sheet: white, square-cornered but for a
   2px radius, one hairline round it and one round the picture, the words
   below. No step rail, no numerals, no subtitle (owner). No gradients:
   every ground, card and part is one flat colour; the glows are blurred
   shapes.
   -----------------------------------------------------------------------------
   RESTING (no script, or a screen under 560px tall): the card on the ink,
   the painting still in its overview and the six captions listed under it,
   each with its headline.
   LIVE (.is-live, home-story.js): the section holds one screen for its
   runway (--st-len screens) and the card rises in (--st-in, 0 to 1); the
   painting keeps a 5:4 window and one caption shows at a time.
   HOSTED (.is-hosted, inside #dx's screen): the same card at the right of
   the pinned screen, beside the reactor.
   ========================================================================== */

.st {
  position: relative;
  padding: clamp(3rem, 8vh, 5rem) 0;
  color: var(--st-ink);
}
/* the reactor's ink (home-reactor.css), so the answer runs on without a seam */
.hw {
  --st-card: #fbfcfa; --st-line: rgb(20 64 43 / .12); --st-ink: #1f2522; --st-strong: var(--leaf-900);
  --st-muted: #56605a; --st-accent: #23684a; --st-scene: #78acde; --st-halo: #fbfcf9;
  background-color: var(--ink);
}

/* ------------------------------------------------------------ resting --- */
.st__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.st-card {
  --st-m: clamp(.8rem, 1.4vw, 1.1rem);           /* the sheet's margin round the picture */
  position: relative; width: 100%; max-width: 70rem; box-sizing: border-box;
}
/* the name, on the ink above the sheet. 18 Oct (Jacquelyn): it takes the
   green light. --st-lit (0 to 1, written on the section by the scene in
   home-scenes.js) is the 520 nm light itself, so the name lights with the
   strip at the second step and goes out with it at the last: the same light
   the machine beside it is under. */
.st-head { padding: 0 0 clamp(.8rem, 1.6vw, 1.15rem); }
.st-title {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 720; line-height: 1.05; letter-spacing: -.022em;
  color: var(--white); text-wrap: balance;
  text-shadow: 0 0 22px rgb(53 224 138 / .14);
  text-shadow:
    0 0 calc(16px + 30px * var(--st-lit, 0)) rgb(53 224 138 / calc(.12 + .4 * var(--st-lit, 0))),
    0 0 calc(60px + 60px * var(--st-lit, 0)) rgb(53 224 138 / calc(.06 + .22 * var(--st-lit, 0)));
}
/* the sheet */
.st-face {
  position: relative;
  padding: var(--st-m) var(--st-m) clamp(1.1rem, 2vw, 1.5rem);
  background: var(--st-card); border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 30px 60px -30px rgb(0 0 0 / .7);
}
.st-scene { position: relative; overflow: hidden; background: var(--st-scene); aspect-ratio: 1200 / 680; }
.st-scene::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(20 64 43 / .22); pointer-events: none; }
.st-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.st-panel { padding: clamp(1rem, 1.7vw, 1.3rem) .25rem 0; }
.st-caps { margin: 0; padding: 0; list-style: none; display: grid; row-gap: 1.1rem; font-size: 1rem; line-height: 1.55; color: var(--st-ink); }
.st-caps li { max-width: 58ch; text-wrap: pretty; }
.st-h {
  display: block; margin: 0 0 .4rem;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem); font-weight: 720; line-height: 1.1; letter-spacing: -.02em;
  color: var(--st-strong); text-wrap: balance;
}
/* what only the live scene shows: the labels, the flows, the other states */
.st:not(.is-live) :is([data-k^="lab-"], [data-flow], [data-k="beam"], [data-k="beam-red"], [data-k="halo"],
  [data-k="blink"], [data-k="thrdot"], [data-k="pbeam"], [data-k="broth-on"], [data-k="pores"],
  [data-k="heat"]) { display: none; }

/* ------------------------------------------------------------- live ----- */
.st.is-live { padding: 0; }
.st.is-live .st__run { height: calc(100svh + var(--st-len, 3) * 100svh); }
.st.is-live .st__stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  padding-top: var(--nav-h, 68px); box-sizing: border-box;
}
.st.is-live .st__inner {
  height: 100%; align-items: center;
  padding-block: clamp(.75rem, 3svh, 2rem);
  box-sizing: border-box;
}
/* the card is as tall as its painting and its longest caption, never
   taller than the screen; the painting's window is 5:4, which the camera in
   home-scenes.js frames for (a squarer box moves in a little) */
.st.is-live .st-card {
  --st-h: min(46rem, calc(100svh - var(--nav-h, 68px) - clamp(1.5rem, 6svh, 4rem)));
  max-height: var(--st-h); max-width: min(70rem, calc(var(--st-h) * 1.05));
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.st.is-live .st-face--scene { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.st.is-live .st-scene { aspect-ratio: 5 / 4; }
.st.is-live .st-caps { row-gap: 0; }
.st.is-live .st-caps li { grid-area: 1 / 1; opacity: 0; max-width: none; }
/* the opening beat: the card rises into place out of the ink */
.st.is-live[data-story-beat] .st__inner { opacity: var(--st-in, 1); transform: translateY(calc((1 - var(--st-in, 1)) * 5svh)); }

/* HOSTED (.is-hosted, home-story.js): inside the question's scene (#dx,
   home.js piece 7), over the answer, in the pin's one screen. The card
   stands at the right of the column, its painted sheet and the lime breath
   behind it standing it off the black; the scene fades and
   slides it in with --dx-how (0 to 1) as the reactor glides into the room
   left of it. Nothing in it takes the pointer: the scroll is its only
   control */
.st.is-live.is-hosted { position: absolute; inset: 0; z-index: 4; background: transparent; pointer-events: none; }
.st.is-live.is-hosted .st__run { height: 100%; }
.st.is-live.is-hosted .st__stage { position: static; height: 100%; padding-top: 0; }
.st.is-live.is-hosted .st__inner { justify-items: end; }
.st.is-live.is-hosted .st-card {
  max-width: min(36%, calc(var(--st-h) * 1.05));
  opacity: var(--dx-how, 0); transform: translateX(calc((1 - var(--dx-how, 0)) * 3rem));
  will-change: opacity, transform;
}
.st.is-live.is-hosted .st-caps { font-size: clamp(.95rem, .9rem + .15vw, 1.02rem); line-height: 1.5; }

@media (max-width: 899px) {
  .st.is-live .st-face { padding-bottom: 1.2rem; }
  .st.is-live .st-title { font-size: 1.5rem; }
  .st.is-live .st-caps { font-size: .95rem; }
  .st.is-live .st-h { font-size: 1.35rem; }
}

@media print {
  .st.is-live .st__run { height: auto; }
  .st.is-live .st__stage { position: static; height: auto; }
}

/* ------------------------------------------------------ the drawing ---- */
/* Painted after the design team's valley on the vision section (18 Oct,
   owner): flat shapes in two or three tones, no outlines, brush edges,
   her sky, ridge and patchwork fields (build/how-art.py writes it). Every
   painted shape carries its own fill; only the moving parts, the wires and
   the light are set here. The 520 nm green is whatever is lit, amber the
   protectant, red the off signal. Wires and traces are strokes with
   pathLength="1" inside a [data-draw] group, so the scroll draws them; the
   painted groups wipe on under a brush-shaped clip (data-k="wp-*", moved
   in home-scenes.js). */
.st-svg { overflow: hidden; --on: 0; }
.st-svg [data-draw] path { stroke-dasharray: 1; }
.st-lab {
  font-family: var(--font-body, "Inter", system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  fill: #1c2a22; paint-order: stroke; stroke: rgb(250 247 236 / .94); stroke-width: 5px; stroke-linejoin: round;
}
.st-lab--prot { fill: #9a5410; }
.st-lab--red { fill: #b93a28; }
.st-lab--green { fill: #0b6b3e; }

.rw-paper { fill: var(--st-scene); }
.rw-blink { fill: #35e08a; }
.rw-led-glow { fill: #35e08a; opacity: .7; }
.rw-thr { fill: none; stroke: #e0533d; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.rw-trace { fill: none; stroke: #a6dc78; stroke-width: 3; stroke-linecap: round; }
.rw-thrdot { fill: #a6dc78; }
.rw-wire { fill: none; stroke: #3a4a44; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.rw-pulse { fill: #283038; }
.rw-pulse--g { fill: #35e08a; }
.rw-beam { fill: rgb(166 220 120 / .3); }
.rw-beam--red { fill: rgb(224 83 61 / .24); }
.rw-leds circle { fill: #b4bcb6; }
.rw-leds--on circle { fill: #35e08a; opacity: 0; }
.rw-leds--red circle { fill: #e0533d; opacity: 0; }
.rw-leds--glow { opacity: .6; }
.rw-stir { fill: #2e3e5e; }
.rw-rod { fill: #3a5c82; }
.rw-rod--on { fill: #b8e07a; opacity: var(--on, 0); }
.rw-rod--lit { fill: #b8e07a; }
.rw-dot { fill: #eca830; }
.rw-dot-hi { fill: #ffe2a0; opacity: .85; }
.rw-tube { fill: none; stroke: #c6d2d4; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rw-none { fill: none; stroke: none; }
.rw-flow { fill: none; stroke: #1f9a5a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 15; }
.rw-flow--perm { stroke: #d98a18; }
.rw-pbeam { fill: none; stroke: #eca830; stroke-width: 3; stroke-linecap: round; }
.rw-arm { fill: none; stroke: #283038; stroke-width: 2.5; stroke-linecap: round; }
.rw-roller { fill: #283038; }
.rw-pores { fill: none; stroke: #35e08a; stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.rw-perm { fill: none; stroke: #d2b47a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.rw-perm--case { stroke: #c6d2d4; stroke-width: 7; }
.rw-drop { fill: #eca830; }
.rw-halo { fill: rgb(190 236 140 / .5); }