/* Mast Innovations — sketch-to-reality film section. Shared shell lives in style.css;
   every value here traces to design-system.md. Loaded after style.css. */

/* Driver + sticky stage. ~165vh of scroll per chapter, three chapters + settle. */
/* 560vh desktop / 400vh phone: the film still scrubs smoothly (553 frames) but each
   beat costs far fewer thumb-swipes. Beat envelopes are progress fractions, so they
   rescale automatically. */
.film-driver{position:relative;height:560vh;background:var(--parchment)}
.film-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--parchment);
  display:flex;align-items:flex-start;justify-content:center}
/* Inset plate: frames are 1280px wide - capping the box at 1280 keeps the draw at or
   under 1:1 source pixels, which is where the sharpness lives. Framed like every other
   image on the site (4px radius), parchment around it. */
.film-box{position:relative;margin-top:clamp(20px,5vh,48px);
  width:min(1280px,calc(100vw - clamp(32px,7vw,128px)));
  height:min(720px,calc(100vh - clamp(32px,8vh,96px)));border-radius:4px;overflow:hidden;
  background:var(--ink)}
#film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Loader: parchment card, copper bar. Removed from flow once the opening run lands. */
.film-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--ink);transition:opacity .5s ease;z-index:4}
.film-loader.done{opacity:0;pointer-events:none}
.film-loader b{display:block;width:180px;height:2px;background:var(--line-inverse);position:relative;overflow:hidden}
.film-loader i{position:absolute;inset:0 auto 0 0;width:0;background:var(--copper);display:block}

/* Beats: parchment-raised cards, lower left, one at a time. */
.film-beat{position:absolute;max-width:min(46ch,74vw);background:rgba(248,244,235,0.94);border-radius:4px;
  padding:28px 32px;opacity:0;transform:translateY(14px);will-change:opacity,transform;z-index:2}
.film-beat .small em{font-style:normal;color:var(--copper)}
.film-beat .small{color:var(--muted)}
/* The hook line carries the beat: display serif at h3 weight. Body reads at lead size. */
.film-beat .bt{font-family:"Fraunces",Georgia,serif;font-size:clamp(24px,1.2vw + 18px,30px);
  line-height:1.2;color:var(--ink);margin-top:12px}
.film-beat p{margin-top:10px;color:var(--body);max-width:42ch;font-size:17px;line-height:1.55}
.film-beat p.bt{margin-top:12px;max-width:24ch}
/* Beat positions rotate around the plate as the film travels. */
.film-beat.pos-bl{left:clamp(20px,3.5vw,56px);bottom:clamp(20px,6vh,64px)}
.film-beat.pos-tl{left:clamp(20px,3.5vw,56px);top:clamp(20px,6vh,64px)}
.film-beat.pos-br{right:clamp(20px,3.5vw,56px);bottom:clamp(20px,6vh,64px)}

/* Seam handoff: the film's last frames melt into the parchment section below. */
.film-fade{position:absolute;inset:auto 0 0 0;height:34vh;opacity:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(242,237,227,0) 0%,var(--parchment) 96%)}

/* Static fallback (no JS, reduced motion, small screens): the film section hides,
   the three-frame strip shows. Mirrors the original section's behaviour. */
.film-section .film-fallback{display:none}
html.film-static .film-driver{display:none}
html.film-static .film-fallback{display:block}
html:not(.film-live):not(.film-static) .film-driver{display:none}
html:not(.film-live):not(.film-static) .film-fallback{display:block}
.film-fallback{padding:0 0 96px}
.film-fallback .s-frame{margin:0 0 48px}
.film-fallback .s-frame img{width:100%;border-radius:4px;display:block}
.film-fallback figcaption{margin-top:16px}
.film-fallback figcaption em{font-style:normal;color:var(--copper)}
.film-fallback figcaption p{margin-top:8px;color:var(--body);max-width:45ch}

/* The hook's closing question: the line the film answers. */
.film-hook .hook-q{font-family:"Fraunces",Georgia,serif;font-size:clamp(26px,1.4vw + 19px,34px);
  line-height:1.25;font-style:italic;color:var(--copper);margin-top:24px;max-width:24ch}
.film-hook .lead + .lead{margin-top:12px}

/* The hook heading sits a step above the standard section h2. */
.film-hook .h2{font-size:clamp(40px,2.6vw+29px,64px);line-height:1.05}

/* Hero support line under the lead: quieter than the lead, still legible on ink. */
.hero .hero-sub{margin-top:16px;color:var(--muted-inverse);font-size:17px;line-height:1.55;max-width:52ch}

/* Hook sits close to the plate: the question should hand straight into the film. */
.film-section .film-hook{margin-bottom:8px}

/* ---- Cinematic opening: brand ident video, then the light opens the site. ----
   The film's flare lives at ~22% across the frame; the reveal band erupts from there
   and sweeps right, dragging the wipe edge with it. Once per session; js/ident.js. */
.ident{position:fixed;inset:0;z-index:999;background:var(--parchment);
  display:flex;align-items:center;justify-content:center}
/* The ident sits as an inset cinema plate on parchment - the same framing language as
   the scroll-film plate below, so the intro and the film read as one system. */
.ident-plate{position:relative;width:min(1120px,calc(100vw - clamp(32px,10vw,160px)));
  height:min(630px,calc(100vh - clamp(48px,14vh,160px)));border-radius:4px;overflow:hidden;
  background:#000}
.ident video{width:100%;height:100%;object-fit:cover;display:block}
.ident-band{position:absolute;top:-12%;bottom:-12%;left:0;width:16%;opacity:0;
  transform:translateX(140%) skewX(-14deg);
  background:linear-gradient(90deg,rgba(248,244,235,0) 0%,rgba(248,244,235,.95) 45%,rgba(255,255,255,.85) 55%,rgba(248,244,235,0) 100%);
  filter:blur(7px);mix-blend-mode:screen;pointer-events:none}
/* The reveal: band sweeps from the flare's x to offscreen right while the overlay's
   clip edge chases it - the site appears in the light's wake. */
.ident.reveal{animation:ident-open .65s cubic-bezier(.6,.05,.25,1) forwards}
.ident.reveal .ident-band{opacity:1;
  animation:ident-band-sweep .65s cubic-bezier(.6,.05,.25,1) forwards}
@keyframes ident-band-sweep{
  from{transform:translateX(140%) skewX(-14deg)}
  to{transform:translateX(660%) skewX(-14deg)}}
@keyframes ident-open{
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(0 0 0 100%)}}
/* harness holds */
.ident.hold-wipe,.ident.hold-wipe .ident-band{animation-play-state:paused;animation-delay:-0.4s}

/* Mobile film: the plate goes 16:9 full width near the top of the stage, and the beats
   sit in the space beneath it instead of overlaying - cards over a small plate would
   bury the film. Position classes all collapse to the same slot. */
@media (max-width:640px){
  .film-stage{align-items:flex-start}
  /* The beats live inside the plate, which clips its children. On mobile they sit
     BELOW the 16:9 plate, so the plate must not clip - the canvas rounds itself. */
  /* Centre the plate + card as one group in the viewport - splitting the spare space
     above and below kills the dead parchment field under the card. */
  .film-box{width:calc(100vw - 24px);height:auto;aspect-ratio:16/9;
    margin-top:max(16px, calc((100vh - ((100vw - 24px) * 9 / 16) - 360px) / 2));
    overflow:visible}
  #film-canvas{border-radius:4px}
  .film-loader{border-radius:4px}
  .film-beat.pos-bl,.film-beat.pos-tl,.film-beat.pos-br{
    left:12px;right:12px;bottom:auto;max-width:none;
    /* beats position against the plate itself, so no centering term here - the plate's
       own margin already carries the group down the viewport */
    top:calc(((100vw - 24px) * 9 / 16) + 32px);
    padding:20px 22px;
    background:var(--parchment-raised);border:1px solid var(--line);
    box-shadow:0 8px 28px rgba(27,25,22,0.08)}
  .film-beat .bt{font-size:21px;max-width:none}
  .film-beat p{font-size:15px;max-width:none}
}

/* Mobile ident: the plate keeps the film's own shape instead of a portrait crop. */
@media (max-width:640px){
  .ident-plate{width:calc(100vw - 24px);height:auto;aspect-ratio:16/9}
}

@media (max-width:640px){
  .film-driver{height:400vh}
}