/* Hypha · JV partner · the film stage (WORLD.md §5): the centre of each page. The page's ground sinks to Hypha's own
   room with the scroll; a big frame rises, lit edge, darker interior, the founder's photo graded into teal light, a
   wide dim aura and its light on the floor below; the film's headline inside it as its title, the honest line under
   the title: the film is not here yet. No play button, no timeline, no controls, never marked watched. Driven by js/film.js.

   <section id="film" class="film scene" data-place="air|table|meet" data-from="paper|table|dark" data-to="paper|table|dark" style="--len: 2.6">
     <div class="stage">
       <div class="fm-room" aria-hidden="true"><i class="fm-g fm-from"></i><i class="fm-g fm-dark"></i><i class="fm-g fm-to"></i>
         <i class="fm-aura"></i><i class="fm-floor"></i></div>
       <div class="fm-in">
         <h2 class="fm-h display h2">… <span class="sig">…</span></h2>
         <figure class="fm-frame"><div class="fm-pic"><img src="…/assets/founder.jpg" alt="" loading="lazy" decoding="async" fetchpriority="low"></div>
           <figcaption class="fm-status"><i class="fm-dot" aria-hidden="true"></i>Film coming soon</figcaption></figure>
       </div>
     </div>
   </section>
   (Recall's rewind passes every section.film slowly: it reads its --len.) */

.film .stage { background: var(--carbon); }
.fm-room { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fm-g { position: absolute; inset: 0; }
/* layers of their own only while the stage is near (WORLD §8; js/film.js sets .is-near) */
.film .stage.is-near .fm-g { will-change: opacity; }
.film .stage.is-near :is(.fm-aura, .fm-floor, .fm-h, .fm-frame) { will-change: opacity, transform; }
.fm-from, .fm-to { background: var(--paper-in); }
.film[data-from="table"] .fm-from, .film[data-to="table"] .fm-to { background: var(--table); }
.film[data-from="dark"] .fm-from, .film[data-to="dark"] .fm-to { background: var(--cine); }
.film[data-to="paper"] .fm-to { background: var(--paper-in); }
.fm-dark {
  opacity: 0;
  background:
    radial-gradient(circle at 50% 52%, rgb(8 132 85 / 0.3) 0%, rgb(1 58 33 / 0.3) 25%, rgb(1 19 13 / 0.38) 45%, transparent 66%),
    linear-gradient(180deg, #020605 0%, #04100c 55%, #020605 100%);
}
.fm-to { opacity: 0; }
.fm-aura {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 130vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -65vmax;
  background: radial-gradient(closest-side, rgb(77 218 199 / 0.26), rgb(29 130 82 / 0.18) 38%, rgb(4 33 23 / 0.1) 62%, transparent);
  opacity: 0;
}
/* the screen's light on the floor below it */
.fm-floor {
  position: absolute;
  left: 50%;
  bottom: calc(-8 * var(--sv));
  width: 86vw;
  height: calc(30 * var(--sv));
  margin-left: -43vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(189 246 199 / 0.16), rgb(57 241 100 / 0.07) 45%, rgb(14 63 40 / 0.06) 70%, transparent);
  opacity: 0;
}
/* each page stands the frame in its own place: hanging in the air (01: the light lies far below it), at the table's
   edge (02: a hard bright edge under it), at the head of the meeting table (03: green light rising from the table) */
.film[data-place="air"] .fm-floor { bottom: calc(-16 * var(--sv)); width: 70vw; margin-left: -35vw; }
.film[data-place="table"] .fm-floor { bottom: 0; height: calc(22 * var(--sv)); border-radius: 0; background: linear-gradient(180deg, rgb(198 215 207 / 0.16) 0, rgb(198 215 207 / 0.05) 2px, rgb(189 246 199 / 0.07) 3px, transparent 100%); width: 100vw; margin-left: -50vw; }
.film[data-place="meet"] .fm-floor { background: radial-gradient(closest-side, rgb(57 241 100 / 0.32), rgb(29 130 82 / 0.18) 40%, rgb(4 33 23 / 0.12) 70%, transparent); }

.fm-in {
  /* the frame's size lives here, so the film's headline can stand inside the frame as its title */
  --w: min(1240px, 88vw, calc((var(--stage-h) - 140px) * 1.7778));
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
}
/* the film's headline is the frame's title: on its dark left side on a desktop, under the founder on a phone.
   js/film.js writes its transform; the CSS `translate` property composes with it. */
.fm-h {
  position: absolute;
  z-index: 3;
  left: calc(50% - var(--w) / 2 + var(--w) * 0.065);
  top: 50%;
  translate: 0 -56%;
  width: calc(var(--w) * 0.4);
  max-width: none;
  margin: 0;
  color: var(--white);
  text-align: left;
  text-wrap: balance;
  font-size: clamp(30px, calc(var(--w) * 0.044), 56px);
  text-shadow: 0 2px 28px rgb(3 9 7 / 0.65);
  opacity: 0;
}
.fm-frame {
  position: relative;
  width: var(--w);
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  /* the screen is the room's light: lit from inside, brightest behind the founder */
  background: radial-gradient(60% 84% at 68% 42%, #1d5545 0%, #0e2e24 40%, #061410 70%, #030907 100%);
  box-shadow:
    0 0 0 1px rgb(77 218 199 / 0.62),
    0 0 0 3px rgb(45 151 94 / 0.16),
    0 0 56px rgb(57 241 100 / 0.26),
    0 0 180px rgb(29 130 82 / 0.34),
    0 40px 90px rgb(0 0 0 / 0.55);
  opacity: 0;
}
.fm-pic {
  position: absolute; top: 0; bottom: 0; right: 0; width: 64%;
  /* the founder in the screen's light: the photo melts into the frame on an oval (no straight edge); the pale wall
     behind him is left only as the light round his head */
  -webkit-mask-image: radial-gradient(56% 68% at 54% 44%, #000 42%, rgb(0 0 0 / 0.55) 66%, transparent 90%);
  mask-image: radial-gradient(56% 68% at 54% 44%, #000 42%, rgb(0 0 0 / 0.55) 66%, transparent 90%);
}
.fm-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* the founder in natural colour: no tint on the only person on the pages */
}
/* the screen's own light on his face, from the right and above */
.fm-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 52% at 60% 34%, rgb(189 246 199 / 0.16), transparent 70%);
}
/* the honest line: the title's last line, quiet but read at a glance (the master's size), its dot still hollow grey */
.fm-status {
  position: absolute;
  z-index: 2;
  left: 6.5%;
  bottom: 7.5%;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: clamp(15px, 1.15vw, 17.5px);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--silver);
}
.fm-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--steel); }

@media (max-width: 899px) {
  .fm-in { --w: min(400px, calc(100vw - 2 * var(--gutter)), calc((var(--stage-h) - 120px) * 0.8)); }
  /* the card is centred, so its bottom is 50% + w*5/8: the headline stands 58px above it, the honest line under it */
  .fm-h {
    left: calc(50% - var(--w) / 2 + 20px);
    top: auto;
    bottom: calc(50% - var(--w) * 0.625 + 58px);
    translate: none;
    width: calc(var(--w) - 40px);
    font-size: clamp(22px, calc(var(--w) * 0.074), 30px);
  }
  .fm-frame { aspect-ratio: 4 / 5; border-radius: 12px; background: radial-gradient(92% 64% at 50% 30%, #1d5545 0%, #0e2e24 44%, #061410 74%, #030907 100%); }
  /* the photo box ends inside the card, so its last 14% also fades out: no straight edge across his shoulders */
  .fm-pic {
    left: 0; width: 100%; bottom: 36%;
    -webkit-mask-image: radial-gradient(76% 72% at 50% 40%, #000 46%, rgb(0 0 0 / 0.5) 70%, transparent 96%), linear-gradient(0deg, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(76% 72% at 50% 40%, #000 46%, rgb(0 0 0 / 0.5) 70%, transparent 96%), linear-gradient(0deg, transparent 0%, #000 14%);
    mask-composite: intersect;
  }
  .fm-pic::after { background: radial-gradient(60% 50% at 56% 28%, rgb(189 246 199 / 0.14), transparent 70%); }
  .fm-status { left: 20px; bottom: 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-h, .fm-frame { opacity: 1; }
}