/* Hypha · JV partner · the Paper Trail: its places and their light, the art and caption areas of a pinned scene,
   and the way-on cue. WORLD.md §2-3. Every change of light is written by the scroll (js/trail.js J.ground).

   <div class="gnd" aria-hidden="true">                   the grounds of one pinned stage, stacked; J.ground() sets
     <i class="g g-paper"></i>                            each one's opacity from the scroll
     <i class="g g-dusk"></i>        page 01: the light narrowing round the signature
     <i class="g g-dark"></i>        Hypha's tinted near-black with its teal haze
     <i class="g g-table"></i>       page 02: the daylight table (its window's light, .wl, lies over the paper: below)
     <i class="g g-room"><b class="pool"></b><b class="pool pool--g"></b></i>  page 03: the meeting room, its pendant pool
   </div>
   <div class="art">sheets…</div>                         where the paperwork lives (right of the words; above them on a phone)
   <div class="caps">…</div>                              the copy (css/base.css)
   .stage.is-dark                                         words go light while a dark ground is under them */

body { background: var(--paper-in); }
:root {
  --table: #e6e9e6;
  --room: #040908;
  --dusk: #1c221f;
}

/* ---------- grounds ---------- */
.gnd { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
/* layers of their own only while their scene is near (WORLD §8): the grounds here, the light and the lines below */
.stage.is-near .g { will-change: opacity; }
/* every ground's top and bottom edges are its own flat colour (any light sits in the middle), so two stages meet
   with no edge as one scrolls away over the next */
.g-paper {
  background:
    radial-gradient(64% 44% at 50% 50%, rgb(255 255 255 / 0.75) 0%, rgb(255 255 255 / 0) 100%),
    var(--paper-in);
}
.g-dusk {
  background:
    radial-gradient(56% 58% at 64% 50%, #39413d 0%, #262d29 38%, var(--dusk) 64%, #0f1412 100%);
}
.g-dark {
  background:
    radial-gradient(circle at 60% 48%, rgb(8 132 85 / 0.13) 0%, rgb(1 58 33 / 0.2) 26%, rgb(1 19 13 / 0.38) 48%, transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgb(10 40 30 / 0.55), transparent 60%),
    var(--carbon);
}
.g-table {
  background:
    radial-gradient(70% 46% at 40% 50%, #f3f5f2 0%, rgb(243 245 242 / 0) 100%),
    var(--table);
}
/* daylight through a window (page 02), lying across the table, the paper on it and Hypha's words set on the desk, on
   ONE layer over them all (the stage's z: .art 10, .caps 40), so no quiet surface shows as a box against the shade
   and nobody can click it (pointer-events: none). Light on white paper shows only by its shade, so the layer
   only shades, never whitens (the ink stays as dark as it is): a soft shadow everywhere but the twelve panes of a
   six-over-six sash (three across, the glazing bars, the meeting rail thicker), its frame's shadow falling between
   them, the edges soft as a frame's shadow is. Drawn once (an SVG with its blur) on a layer twice the stage's size,
   so it covers the stage however far it slides; the scenes slide it with the scroll and fade it with the table's
   daylight (J.light: transform and opacity only); --wx and the opacity here are the first paint's */
.wl {
  position: absolute;
  z-index: 45;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0.085;   /* the shade's whole strength (its SVG is solid): faint enough never to hide a word */
  transform: translate3d(var(--wx, 0px), 0, 0) rotate(24deg) skewX(-14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='0.7 0.9'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' fill='rgb(34,37,40)' fill-rule='evenodd' d='M-10 -10H210V210H-10Z M58 30H78.93V65.4H58Z M80.53 30H101.47V65.4H80.53Z M103.07 30H124V65.4H103.07Z M58 67.4H78.93V102.8H58Z M80.53 67.4H101.47V102.8H80.53Z M103.07 67.4H124V102.8H103.07Z M58 107.2H78.93V142.6H58Z M80.53 107.2H101.47V142.6H80.53Z M103.07 107.2H124V142.6H103.07Z M58 144.6H78.93V180H58Z M80.53 144.6H101.47V180H80.53Z M103.07 144.6H124V180H103.07Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.stage.is-near .wl { will-change: transform, opacity; }
.g-room { background: radial-gradient(140% 100% at 50% 0%, #0b1513 0%, var(--room) 60%); }
/* the pendant's pool on the table; .pool--g is the light agreement adds (js sets their scale and opacity) */
.pool {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 92vmin;
  height: 62vmin;
  margin: -31vmin 0 0 -46vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(226 236 230 / 0.2), rgb(190 214 204 / 0.09) 52%, transparent);
}
.stage.is-near .pool { will-change: transform, opacity; }
.pool--g {
  opacity: 0;
  background: radial-gradient(closest-side, rgb(57 241 100 / 0.2), rgb(29 130 82 / 0.12) 46%, rgb(4 33 23 / 0.08) 70%, transparent);
}

/* ---------- the art area of a pinned stage ---------- */
.art { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
@media (min-width: 900px) {
  .art { left: calc(var(--gutter) + min(34vw, 540px) + clamp(28px, 3.4vw, 64px)); right: var(--gutter); }
}
@media (max-width: 899px) {
  .art { top: 0; bottom: calc(var(--stage-h) - var(--cap-top-px, calc(58 * var(--sv)))); }
}

/* ---------- the words in this world ---------- */
.cap .say { color: var(--ink); }
.cap .long {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cap strong { font-weight: 700; color: var(--ink); }
.cap .say strong { font-weight: 700; }
.cap .display { color: var(--ink); }
.cap [data-line] { display: block; }
.stage.is-near .cap [data-line] { will-change: opacity, transform; }
.cap [data-line] + [data-line] { margin-top: 0.42em; }
.stage.is-dark .cap .say, .stage.is-dark .cap .display, .stage.is-dark .cap strong { color: var(--white); }
.stage.is-dark .cap .long { color: var(--silver); }
@media (max-width: 899px) {
  .cap .say { font-size: clamp(22px, 6.2vw, 27px); }
  .cap .long { font-size: clamp(17px, 4.6vw, 19px); line-height: 1.48; }
}

/* ---------- the way on: a small cue in the toast's shape, shown only at rest and only where no words are under it ---------- */
.cue {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 16px 11px 14px;
  border: 1px solid rgb(77 218 199 / 0.35);
  border-radius: 999px;
  background: #101916;
  color: var(--white);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.35), 0 0 22px rgb(57 241 100 / 0.12), var(--btn-glow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.cue::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.cue-arw { color: var(--neon); font-size: 15px; line-height: 1; }
.cue.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
html.rc-on .cue { visibility: hidden; }
@media (max-width: 899px) { html.rc-again .cue { left: var(--gutter); translate: 0 0; } }