/* Confidante · .sfilm, the scroll film chapter (Josh, 2026-10-15: "more scrolling gif sections like on this page, not as
   heroes only, throughout the other pages"). The Development hero made reusable for any section mid-page: a full-bleed
   film on a sticky stage over a tall track, scrubbed frame by frame with the scroll (js/scroll-film.js). As the section
   rises into view the picture opens from a window to the full screen and the head (crest, label, title) rises; the head
   holds, then lifts away while the lede and the action rise in its place. Tokens only, sharp corners, no shadows.

   Markup (every part but the stage, the frame, the media and the inner is optional):
   <section class="sfilm [sfilm--right]" data-sfilm data-tone="dark">
     <div class="sfilm__stage">
       <div class="sfilm__frame" data-sfilm-frame>
         <div class="sfilm__media"><picture>…<img class="sfilm__img"></picture>
           <video class="sfilm__film" data-sfilm-film muted playsinline preload="none" aria-hidden="true" tabindex="-1"
                  data-src="…1920.mp4" data-src-sm="…1280.mp4" data-src-portrait="…portrait-540.mp4"></video></div>
         <div class="sfilm__veil" aria-hidden="true"></div>
       </div>
       <div class="sfilm__inner"><div class="sfilm__head">crest, .sfilm__label, .sfilm__title</div>
         <div class="sfilm__aside">.sfilm__lede, .sfilm__text, .sfilm__action</div></div>
     </div>
   </section>

   Reduced motion and no script: one screen, the still, every word stacked at the foot. With motion allowed the track
   height and the beats' shared cell are set here from the first paint (never by the script), so nothing shifts. The page
   carries a noscript style that shows the second beat (see marketing.html). */

.sfilm { --sfilm-track: 260svh; position: relative; isolation: isolate; background-color: var(--deep); color: var(--text-1); }
.sfilm__stage { position: relative; overflow: hidden; }
.sfilm__frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--deep); }
.sfilm__media { position: absolute; inset: 0; overflow: hidden; }
.sfilm__img, .sfilm__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 767px) { .sfilm__img, .sfilm__film { object-position: var(--focus-phone, var(--focus, 50% 50%)); } }
.sfilm__film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.sfilm__film.is-ready { opacity: 1; }
/* the words sit at the foot (phones, and the default) on a deep veil */
.sfilm__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--veil) / 0.92) 0%, rgb(var(--veil) / 0.7) 32%, rgb(var(--veil) / 0.3) 56%, rgb(var(--veil) / 0) 76%); }
.sfilm__inner { display: grid; align-content: end; gap: var(--space-head); min-height: max(36rem, 100svh);
  padding: calc(var(--nav-h) + 3rem) var(--edge) clamp(3rem, 2rem + 4vw, 6rem); }
.sfilm__head, .sfilm__aside { display: grid; gap: var(--space-head); justify-items: start; align-content: end; }
.sfilm__crest { width: 2rem; height: calc(2rem * 1210 / 1092); color: var(--gold); }
.sfilm__label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1); }
.sfilm__title { max-width: 18ch; font-family: var(--font-display); font-size: clamp(2.3rem, 1.4rem + 3vw, 4.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-1); text-wrap: balance; }
@media (max-width: 767px) { .sfilm__title { font-weight: 400; } }
.sfilm__lede { max-width: 38ch; font-family: var(--font-display); font-size: var(--fs-lede); line-height: 1.5; color: var(--text-1); text-wrap: pretty; }
.sfilm__text { max-width: 46ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.sfilm__action { justify-self: start; max-width: 100%; margin-top: calc(var(--space-action) - var(--space-head)); }
@media (min-width: 992px) {
  .sfilm__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .sfilm__head, .sfilm__aside { grid-column: 1 / span 6; }
  /* the words on the right half where the picture's subject sits left; the veil follows them */
  .sfilm--right .sfilm__head, .sfilm--right .sfilm__aside { grid-column: 7 / -1; }
  .sfilm--right .sfilm__veil { background:
    linear-gradient(to left, rgb(var(--veil) / 0.92) 0%, rgb(var(--veil) / 0.8) 40%, rgb(var(--veil) / 0.34) 66%, rgb(var(--veil) / 0) 84%),
    linear-gradient(to top, rgb(var(--veil) / 0.5), rgb(var(--veil) / 0) 40%); }
}

@media (prefers-reduced-motion: no-preference) {
  .sfilm { height: var(--sfilm-track); }
  .sfilm__stage { position: sticky; top: 0; height: 100svh; }
  .sfilm__inner { min-height: 0; height: 100svh; }
  /* the two beats share one cell; the second waits hidden until the script lifts the first (no-scrub stacks them) */
  .sfilm:not(.no-scrub) .sfilm__head, .sfilm:not(.no-scrub) .sfilm__aside { grid-row: 1; grid-column: 1 / -1; align-self: end; }
  @media (min-width: 992px) {
    .sfilm:not(.no-scrub) .sfilm__head, .sfilm:not(.no-scrub) .sfilm__aside { grid-column: 1 / span 6; }
    .sfilm--right:not(.no-scrub) .sfilm__head, .sfilm--right:not(.no-scrub) .sfilm__aside { grid-column: 7 / -1; }
  }
  .sfilm:not(.no-scrub) .sfilm__aside { pointer-events: none; }
  .sfilm:not(.no-scrub) .sfilm__aside > * { opacity: 0; transform: translateY(24px); }
  .sfilm.is-swapped .sfilm__aside { pointer-events: auto; }
  /* once the head has lifted away its words are gone for good, so nothing faded is ever measured as text over the lede
     (the script fades the head itself; its children keep the arrival's inline opacity) */
  .sfilm.is-swapped .sfilm__head { visibility: hidden; }
  .sfilm.is-swapped .sfilm__head > * { opacity: 0 !important; }
}
/* reduced motion: every word stacks at the foot, so the veil reaches higher */
@media (prefers-reduced-motion: reduce) {
  .sfilm__film { display: none; }
  .sfilm__veil { background: linear-gradient(to top, rgb(var(--veil) / 0.94) 0%, rgb(var(--veil) / 0.82) 40%, rgb(var(--veil) / 0.5) 66%, rgb(var(--veil) / 0.2) 86%); }
}