/* ═══════════════════════════════════════════════════════════
   SCENE 06 — THE FILM
   One screen, edge to edge, and the footage is the whole of it.

   NOTHING ON IT. No claim, no veil — the only thing over the film
   is the sound switch, and only because a browser will not autoplay
   with sound and something has to offer the alternative. A veil
   existed here to keep type legible; with no type it was dimming
   the footage for nobody.

   FULL-BLEED, NOT FULL-WIDTH. The section ignores the page's
   content column entirely — every other section is held inside
   those margins, which is exactly what makes one that is not read
   as a change of register rather than as a wider version of the
   same thing.

   COVER, NOT CONTAIN. The file is 16:9 and almost no screen is, so
   something has to give: either the frame is cropped or the section
   is letterboxed. Letterboxing puts two black bars on a page that
   has no black in it anywhere, so the crop wins.
   ═══════════════════════════════════════════════════════════ */

.fm {
  position: relative;
  /* ABOVE THE TRAVELLING PICTURE, which sits at z-index 5 and would
     otherwise paint over this section as it rises into view. Same
     lift as .fx, .tl and .wk. */
  z-index: 6;
  background: var(--ink);
  color: var(--paper);
}

/* .scene-stage already supplies position:sticky, 100svh and the
   overflow that crops the film. */
.fm-stage { background: var(--ink); }

/* ── The runway ──────────────────────────────────────────
   film.js SPLITS THIS UP and its tween durations are these same vh:
   28 of the film with nothing over it, 18 for the sheet to rise (the
   monogram starting 6 in), 42 for it to close, 14 at rest. The
   height and the timeline are one decision written once.

   HALVED, FROM 164vh. The mark was reaching its resting size well
   before the section let go, so the last stretch asked to be
   scrolled and gave nothing back — a held composition reads as a
   stuck one the moment the scrolling outlasts the movement. The
   film's own hold is the one part not cut: that was asked for. */
.fm-runway { height: 118vh; }
@media (max-width: 767px) { .fm-runway { height: 100vh; } }

.fm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* max-width:none — the reset caps every media element at 100%,
     which is not what a cover-fitted film in a full-screen box
     wants. */
  max-width: none;
  object-fit: cover;
  display: block;
  /* The poster carries the first frame until the file is ready, so
     the section is never an empty black rectangle. */
  background: var(--ink) center / cover no-repeat;
}

/* ── The sound switch ────────────────────────────────────
   The film starts muted because every browser requires it to —
   autoplay with sound is refused outright — so the only honest
   thing to do is say so and offer the alternative.

   IT CARRIES ITS OWN GROUND. With the veil gone there is nothing
   between this and the footage, and a film has no fixed colour: a
   white glyph is invisible against a bright frame a second later.
   A dark disc under it holds on every frame, and is small enough
   not to be furniture. */
.fm-sound {
  position: absolute;
  right: var(--pad);
  bottom: 5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 .1rem 1.4rem rgba(19, 25, 38, .5);
  transition: color .45s var(--ease-out), opacity .5s var(--ease-out);
}

/* ── And out again, once the page starts closing ─────────
   THE SWITCH BELONGS TO THE FILM, NOT TO THE COMPOSITION. Once the
   sheet is over the footage the section is a monogram and two
   words, and an offer to turn the sound on is furniture left over
   from the screen before — it sat in the corner of the settled
   frame with nothing left to do.

   film.js sets .is-masking on the first frame that moves and this
   owns the value from there. A timed fade rather than a scrubbed
   one on purpose: the switch is not part of the choreography, it is
   getting out of its way, and anything that leaves on the scroll
   wheel reads as one more moving part. */
.fm.is-masking .fm-sound {
  opacity: 0;
  pointer-events: none;
}
.fm-sound:hover { color: var(--gold-lift); }
.fm-sound:focus-visible { outline: 2px solid var(--gold); outline-offset: 1rem; }

.fm-sound i {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: var(--hair) solid rgba(255, 255, 255, .5);
  border-radius: 100vmax;
  background: rgba(19, 25, 38, .38);
  transition: border-color .45s var(--ease-out), background .45s var(--ease-out);
}
.fm-sound:hover i { border-color: var(--gold-lift); background: rgba(19, 25, 38, .55); }
.fm-sound svg { width: 1.7rem; height: 1.7rem; display: block; }

/* Which glyph shows is the switch's whole state: the one that says
   what pressing it will DO, not what is happening now. */
.fm-sound .on { display: none; }
.fm-sound.is-on .on { display: block; }
.fm-sound.is-on .off { display: none; }

/* ── The pre-JS state ────────────────────────────────────
   Guarded, so a browser without GSAP shows the switch rather than
   hiding it for good. */
.has-gsap .fm:not(.is-in) .fm-sound { opacity: 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .fm-sound { bottom: 4rem; }
}
@media (max-width: 767px) {
  .fm-sound {
    right: auto;
    left: var(--pad);
    bottom: 3.2rem;
    font-size: 1.05rem;
  }
  .fm-sound i { width: 3.8rem; height: 3.8rem; }
}