/* Hypha · Invitation · #film, the lit window (js/film-room.js). STUNNING-PLAN 4.1 with the founder's ruling of
   2026-10-29 22:46 (no desk footage): the section is a dim room. Vitaliy's still is the one lit window, the brightest
   thing in it; behind it, full-bleed, our own rendered loop (Video Studio invitation-loops-1029: d agent army by
   default, b launch night on ?filmloop=b) under a dark grade and a scrim from the text side, opaque where the words
   sit. The JS writes three numbers on the section, all from the scroll, never a timer:
     --fr-k     0..1  the room has come in (the section's top rising from below)
     --fr-glow  0..1  the window is centred (its halo grows)
   The loop is a <video poster=...>: the poster shows first and stays under reduced motion; js plays it only when
   40% of the room is on screen and pauses it off screen (data-playing on the section says which).
   The loop's teal/mint bars are a background only, never the brand green. Copy is unchanged. */

.film.film-room {
  --fr-k: 0;
  --fr-glow: 0;
  /* measured polish (2026-10-30, scratchpad film-room/contrast.js at the loop's brightest frames): the browser lays the
     scrim on in sRGB, far darker than the studio's linear-light figures, so the room-wide scrim is light and the words
     get their own soft dark pool (--fr-pool) that travels with them; the world shows everywhere else */
  --fr-scrim: 0.24;      /* the world side, round the window */
  --fr-scrim-hot: 0.46;  /* the text side */
  --fr-pool: 0.52;       /* under each block of body words, feathered (see .film-copy::before, .slot-note::before) */
  --fr-dusk: clamp(160px, 26vh, 300px);
  background: #020605;
  color: var(--white);
  padding-top: clamp(150px, 26vh, 300px);
  padding-bottom: calc(clamp(90px, 14vh, 160px) + var(--fr-dusk));
  overflow: clip; /* clip, not hidden: hidden makes the section a scroll box and the world could not stay pinned */
  isolation: isolate;
}
.film-room[data-loop="b"] { --fr-scrim: 0.22; --fr-scrim-hot: 0.48; }

/* ---------- the world behind: pinned to the screen while the room is on it ---------- */
.fr-world {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fr-stage {
  position: sticky; top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  opacity: calc(0.25 + 0.75 * var(--fr-k));
}
.fr-loop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 62%;
  /* the grade: a room at dusk, never a lit screen, but bright enough that the world reads as a place */
  filter: brightness(0.94) saturate(0.96) contrast(1.06);
}
/* the scrim from the text side: opaque where the words sit (the headline across the top, the copy on the left),
   thinner around the window so the world shows round it */
.fr-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgb(2 6 5 / var(--fr-scrim-hot)) 0%,
      rgb(2 6 5 / var(--fr-scrim-hot)) 34%,
      rgb(2 6 5 / calc(var(--fr-scrim) + 0.08)) 58%,
      rgb(2 6 5 / var(--fr-scrim)) 100%),
    radial-gradient(120% 90% at 55% 50%, rgb(2 6 5 / 0) 58%, rgb(2 6 5 / 0.42) 100%);
}
/* the soft edges: the room comes up out of the revelation's dark, and gives way to the mirror's daylight */
.fr-dawn, .fr-dusk {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
}
.fr-dawn { top: 0; height: clamp(160px, 30vh, 320px); background: linear-gradient(#020605 0%, #020605 18%, rgb(2 6 5 / 0) 100%); }
.fr-dusk {
  bottom: 0; height: var(--fr-dusk);
  background: linear-gradient(to bottom, rgb(2 6 5 / 0) 0%, #2a2a26 34%, #b9b5ac 68%, #f8f5ef 100%);
}

/* ---------- the words: light on the room, above the world ---------- */
.film-room .film-inner { z-index: 1; }
.film-room .film-h {
  position: relative; z-index: 2;
  color: var(--white);
  text-shadow: 0 1px 24px rgb(2 6 5 / 0.6);
}
.film-room .film-copy { position: relative; z-index: 2; }
.film-room .film-copy .lede { color: #e8ede9; text-shadow: 0 1px 18px rgb(2 6 5 / 0.7); }
.film-room .slot-note { position: relative; z-index: 1; color: #eef2ef; }
/* the pools: a feathered dark patch under each block of body words, riding with the words at any scroll position */
.film-room .film-copy::before,
.film-room .slot-note::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -0.4em -0.8em;
  border-radius: 48px;
  pointer-events: none;
  background: rgb(2 6 5 / var(--fr-pool));
  box-shadow: 0 0 64px 36px rgb(2 6 5 / var(--fr-pool));
}

/* ---------- the one lit window: the still, brightest thing in the room; its halo grows as it centres ---------- */
.film-room .slot { position: relative; }
.film-room .slot::before {
  content: "";
  position: absolute;
  left: -14%; right: -14%; top: -26%; bottom: -10%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 246 228 / calc(0.10 + 0.30 * var(--fr-glow))), rgb(255 240 214 / calc(0.04 + 0.10 * var(--fr-glow))) 62%, rgb(255 246 228 / 0) 100%);
  transform: scale(calc(0.86 + 0.14 * var(--fr-glow)));
}
.film-room .slot-frame {
  box-shadow:
    0 0 0 1px rgb(255 250 240 / 0.14),
    0 30px 80px rgb(0 0 0 / 0.55),
    0 0 calc(50px + 130px * var(--fr-glow)) calc(4px + 22px * var(--fr-glow)) rgb(255 244 222 / calc(0.10 + 0.30 * var(--fr-glow)));
}
.film-room .slot-poster { filter: saturate(0.92) contrast(1.04) brightness(calc(0.9 + 0.12 * var(--fr-glow))); }

@media (max-width: 899px) {
  .film.film-room {
    --fr-dusk: clamp(120px, 20vh, 200px);
    padding-top: clamp(110px, 18vh, 180px);
    padding-bottom: calc(40px + var(--fr-dusk));
  }
  /* one column: the words run the full width over the world, so the scrim is even and heavy, lighter round the window */
  .fr-scrim {
    background:
      linear-gradient(rgb(2 6 5 / var(--fr-scrim-hot)), rgb(2 6 5 / var(--fr-scrim-hot))),
      radial-gradient(120% 90% at 50% 50%, rgb(2 6 5 / 0) 58%, rgb(2 6 5 / 0.36) 100%);
  }
  .film.film-room { --fr-scrim-hot: 0.36; }
  .film-room[data-loop="b"] { --fr-scrim-hot: 0.38; }
  .fr-loop { object-position: 50% 62%; }
  .film-room .slot::before { left: -8%; right: -8%; top: -18%; bottom: -8%; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-stage { opacity: 1; }
  .film.film-room { --fr-glow: 1; }
}

/* 2026-10-30 (foreman, lane-2 close-out): the label sits on the photo, which the room lights up (poster brightness up to
   1.02); on phone (20 px, needs 4.5:1) it measured 2.21:1 over the bright frame. The photo's own bottom shade runs deeper
   and higher here, so the label sits in shadow with no box edge over his face (a pool behind the label read as a box). */
.film-room .slot-shade {
  background:
    linear-gradient(90deg, rgb(7 19 16 / 0.9) 0%, rgb(7 19 16 / 0.8) 24%, rgb(7 19 16 / 0.56) 42%, rgb(7 19 16 / 0.2) 60%, rgb(7 19 16 / 0) 76%),
    linear-gradient(to top, rgb(7 19 16 / 0.9) 0%, rgb(7 19 16 / 0.72) 22%, rgb(7 19 16 / 0) 52%),
    radial-gradient(42% 70% at 22% 62%, rgb(57 241 100 / 0.13), transparent 70%);
}