/* =============================================================================
   VISION, STUDENT VERSIONS (mock, 2 Oct 2026). #vision-b and #vision-c, classes vlb-.
   The student's hand-drawn valley on the same ink band as the live section,
   with the same words in the same places. Her painting is a stack of layers
   on one artboard, 2048 x 1552 (build/vision-student.py). This file places
   the artboard where the LAST frame has it, at first light, so without script
   the section is static and complete. home-vision-b.js (.is-live) then pins
   the stage in a longer runway and plays night into first light over it.
   ========================================================================== */

.vlb {
  --vlb-h: clamp(30rem, calc(100svh - var(--nav-h)), 64rem);
  --vlb-pad: clamp(1.25rem, 5svh, 3.5rem);
  --vlb-fs: clamp(2.125rem, .75rem + 4.9vw, 5.25rem);
  padding: 0; background-color: var(--ink); color: var(--leaf-100);
}
.vlb-head { padding-top: var(--sp-8); padding-bottom: var(--sp-5); }
.vlb-intro {
  margin: 0; max-width: 32ch;
  font-family: var(--font-display);
  font-size: var(--text-h2); font-weight: 700; line-height: 1.14; letter-spacing: -.018em;
  color: var(--white); text-wrap: balance;
}

.vlb-run { position: relative; }
.vlb-stage {
  position: relative; overflow: hidden;
  height: var(--vlb-h);
  background-color: var(--ink);
  isolation: isolate;
}

/* ---- the artboard at its last frame: it covers the stage, foot on foot ---- */
.vlb-art {
  position: absolute; z-index: 0; bottom: 0; left: 50%;
  width: max(100%, calc(var(--vlb-h) * 2048 / 1552)); aspect-ratio: 2048 / 1552;
  transform: translateX(-50%); transform-origin: 0 0;
  pointer-events: none;
}
.vlb-layer {
  position: absolute; display: block; max-width: none;
  -webkit-user-select: none; user-select: none;
}
/* without script only first light is shown */
.vlb-layer[data-layer="sky-night"], .vlb-layer[data-layer="land-night"],
.vlb-layer[data-layer="close"], .vlb-layer[data-layer="reactor"], .vlb-layer[data-layer="lights"] { display: none; }

/* ---- with script: the artboard in px, moved by one transform ---- */
.vlb.is-live .vlb-art { left: 0; top: 0; bottom: auto; aspect-ratio: auto; will-change: transform; }
.vlb.is-live .vlb-layer { display: block; }
.vlb.is-live .vlb-layer[data-layer="sky-dawn"], .vlb.is-live .vlb-layer[data-layer="land-dawn"] { will-change: opacity; }
.vlb.is-live .vlb-layer[data-layer="sun"] { will-change: transform; }
.vlb-pools { position: absolute; display: block; pointer-events: none; }
/* the light her first reactor throws round itself */
.vlb-halo {
  position: absolute; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(53 224 138 / .7), rgb(53 224 138 / .26) 45%, rgb(53 224 138 / 0));
}
.vlb-vig { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.vlb-glows { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.vlb-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background-size: 128px 128px; }

/* The picture has no hard edges: its top melts out of the words above it and
   its foot into the ink below. Over the picture, under the words. */
.vlb-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--ink), rgb(7 11 9 / 0) 3rem),
    linear-gradient(to bottom, rgb(7 11 9 / .34), rgb(7 11 9 / 0) calc(var(--vlb-pad) + 2.04 * var(--vlb-fs) + 7rem)),
    linear-gradient(to top, var(--ink), rgb(7 11 9 / .6) 5%, rgb(7 11 9 / 0) 10%);
}

/* the sky: the line, and the sentence under it */
.vlb-sky { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding-top: var(--vlb-pad); pointer-events: none; }
.vlb-line {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-size: var(--vlb-fs);
  font-weight: 750; line-height: 1.02; letter-spacing: -.034em;
  color: var(--white); text-wrap: balance;
}
.vlb-gloss {
  margin: var(--sp-4) 0 0; max-width: 46ch; text-wrap: balance;
  font-size: var(--text-lede); line-height: 1.5; color: var(--leaf-100);
}
.vlb-line, .vlb-gloss { text-shadow: 0 1px 2px rgb(7 11 9 / .7), 0 0 18px rgb(7 11 9 / .75); }
/* the full stop is one more reactor coming on */
.vlb-stop {
  color: var(--sig-green);
  text-shadow: 0 0 .28em rgb(53 224 138 / .55), 0 1px 2px rgb(7 11 9 / .7);
  transition: color .5s ease, text-shadow .5s ease;
}
.vlb.is-live:not(.is-lit) .vlb-stop { color: var(--white); text-shadow: 0 1px 2px rgb(7 11 9 / .7), 0 0 18px rgb(7 11 9 / .75); }
.vlb.is-live .vlb-line, .vlb.is-live .vlb-gloss { opacity: 0; will-change: opacity, transform; }

/* the first reactor's label, in the opening frame only (placed by the script) */
.vlb-rx {
  position: absolute; left: 0; top: 0; z-index: 1; display: none;
  margin: 0; padding-left: .7rem;
  font-size: var(--text-sm); line-height: 1.4; font-weight: 500; color: var(--leaf-100);
  border-left: 1px solid rgb(227 240 232 / .55);
  text-shadow: 0 1px 2px rgb(7 11 9 / .9), 0 0 8px rgb(7 11 9 / .9), 0 0 16px rgb(7 11 9 / .8);
  pointer-events: none; will-change: transform, opacity;
}
.vlb.is-live:not(.is-still) .vlb-rx { display: block; }

/* the runway: the stage plus a little over two screens of scroll */
.vlb.is-live:not(.is-still) .vlb-run { height: calc(var(--vlb-h) + 220svh); }
.vlb.is-live:not(.is-still) .vlb-stage { position: sticky; top: var(--nav-h); }

@media (max-height: 760px) and (min-width: 640px) {
  .vlb { --vlb-pad: 1.25rem; --vlb-fs: clamp(2rem, .8rem + 3.3vw, 3.6rem); }
}
@media (max-width: 639px) { .vlb-gloss { font-size: var(--text-base); } }
@media (min-width: 900px) { .vlb-gloss { max-width: none; white-space: nowrap; } }

/* ---- version D (#vision-d, .vld): one daylight picture, lit by home-vision-d.js ----
   Same stage and words. The land is a single daylight layer; a canvas
   multiplied over it (.vld-light) is the night and the first light. Without
   script the land is simply dimmed to first light. One scroll takes it from
   the first field to the whole valley with the sun up. */
.vld .vlb-layer[data-layer="land"] { filter: brightness(.62) saturate(.92); }
.vld.is-live .vlb-layer[data-layer="land"] { filter: none; }
.vld.is-live .vlb-art { opacity: 0; transition: opacity .5s ease; }
.vld.is-live.is-ready .vlb-art { opacity: 1; }
.vld-light { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.vld .vlb-line { max-width: none; }
.vld .vlb-line span.vld-l { display: block; white-space: nowrap; }
.vld.is-live:not(.is-still) .vlb-run { height: calc(var(--vlb-h) + 85svh); }
@media (max-width: 420px) { .vld { --vlb-fs: clamp(1.9rem, 9.4vw, 2.4rem); } }

/* ---- version E (#vision-e, .vle): D's stage and light, the valley laid out to a far horizon ----
   One scroll, a little longer, from the first field to the whole plain. */
.vle.is-live:not(.is-still) .vlb-run { height: calc(var(--vlb-h) + 110svh); }

/* ---- version F (#vision-f, .vlf): A's composition in her manner; D's stage and light ---- */
.vlf.is-live:not(.is-still) .vlb-run { height: calc(var(--vlb-h) + 110svh); }

/* ---- the version switcher (mock page only): a pill bar at the foot of the screen ---- */
.vnav {
  position: fixed; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%);
  display: flex; gap: .2rem; padding: .3rem;
  background: rgb(7 11 9 / .84); border: 1px solid rgb(255 255 255 / .14); border-radius: 999px;
  box-shadow: 0 8px 28px rgb(0 0 0 / .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-display, inherit);
}
.vnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 2.9rem; padding: .3rem .55rem; border-radius: 999px;
  color: var(--leaf-100); text-decoration: none; line-height: 1.05;
  transition: background .2s ease, color .2s ease;
}
.vnav a b { font-size: .95rem; font-weight: 750; letter-spacing: -.01em; }
.vnav a small { font-size: .62rem; opacity: .7; margin-top: .1rem; letter-spacing: .02em; }
.vnav a:hover { background: rgb(255 255 255 / .1); }
.vnav a.is-current { background: var(--sig-green); color: var(--ink); }
.vnav a.is-current small { opacity: .85; }
@media (max-width: 520px) {
  .vnav { gap: .1rem; padding: .22rem; }
  .vnav a { min-width: 2.3rem; padding: .25rem .4rem; }
  .vnav a b { font-size: .85rem; }
  .vnav a small { display: none; }
}