/* ============================================================
   HERO ENGINE → VIDEO   (focus-in, then a clean cross-dissolve to film)

   A single fixed, full-viewport cinematic layer owns the whole moment, so the
   page never reflows and nothing is masked (masks on video look muddy). It
   holds two perfectly-aligned things:
     • a crisp cut-out of the hero engine (the "focus" subject)
     • a full-bleed <video> of the same engine, same angle, same frame
   As you scroll we push into the engine until it fills the screen and lines up
   exactly with the engine in the film; a further scroll cross-dissolves the
   still engine into the moving film (which starts at the matching frame). When
   it's done the layer fades away to the normal, in-flow video section that is
   already playing — so it "rests down" seamlessly.

   Only transform + opacity animate (both GPU-composited) → smooth, sharp, no
   jank. Reduced-motion / no-JS: the layer never shows and the normal section
   plays as usual.
   ============================================================ */

/* The cinematic layer sits above the page during the sequence only. */
.eng-cine{
  position: fixed;
  inset: 0;
  z-index: 8;                       /* above hero, below the fixed nav (30) */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background: transparent;          /* the hero shows through during the zoom */
  contain: strict;
}
html.eng-cine-on .eng-cine{ visibility: visible; opacity: 1; }
/* While the sequence/settle is active, lift the film above the flow's own
   background (z-index 9) — otherwise the page gradient paints over the fixed
   film and you scroll a blank area. Stays below the nav (30). */
html.eng-cine-on .eng-cine,
html.eng-cine-live .eng-cine,
html.eng-cine-settled .eng-cine{ z-index: 11; }

/* A solid dark cinematic backdrop behind the film. It fades in during the
   focus/zoom phase so that BY THE TIME the film frame arrives, the bright hero
   page background is already gone — the film lands on a clean stage, never on
   the busy hero gradient. Sits behind the film and the engine cut-out.
   Theme-aware: a deep stage in dark mode, a soft white stage in light mode. */
.eng-cine__back{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, #0a0e14 0%, #06080c 55%, #040507 100%);
  will-change: opacity;
}
html[data-theme=light] .eng-cine__back{
  background: #fdfdfd;   /* flat, matches the film's white studio bg exactly */
}

/* Full-bleed film inside the layer; hidden until the cross-dissolve. */
.eng-cine__film{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  will-change: opacity;
}
.eng-cine__film video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* 16:9 clip covers the viewport, centred */
  display: block;
}

/* A soft cinematic vignette on the film so full-bleed video feels graded, not
   flat — subtle, only while the layer is up. */
.eng-cine__grade{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 100% at 50% 48%, transparent 58%, rgba(4,6,10,.42) 100%),
    linear-gradient(180deg, rgba(4,6,10,.20) 0%, transparent 18% 82%, rgba(4,6,10,.28) 100%);
  will-change: opacity;
}
/* Light theme: a gentler vignette so the graded video doesn't look muddy. */
html[data-theme=light] .eng-cine__grade{
  background: none;   /* white studio footage needs no vignette — avoids grey cast */
}

/* The zoom engine cut-out — the subject we focus into. Positioned/scaled
   entirely by JS (transform), from the hero engine's box to full screen. */
.eng-cine__engine{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform-origin: top left;
  will-change: transform, opacity;
  filter: drop-shadow(0 42px 60px rgba(3,6,14,.5));
}
html[data-theme=light] .eng-cine__engine{
  filter: drop-shadow(0 30px 46px rgba(120,130,150,.28));
}
.eng-cine__engine img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* While the cinematic layer owns the engine, hide the real hero engine so we
   never see two. The hero's own float/parallax stay intact underneath. */
html.eng-cine-live .hero-engine-wrap{ opacity: 0 !important; }

/* The in-flow video section keeps its normal look; JS just makes sure it's the
   playing clip by the time the layer fades away. Nothing here reflows. */

/* ============================================================
   SETTLED STATE — the layer has become the real video section.
   The film keeps playing full-bleed; the caption + mute + tab strip act as
   its controls. Pointer events turn on so the controls are usable.
   ============================================================ */

/* UI overlay that rides on the cinematic layer (caption + mute button). */
.eng-cine__ui{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;              /* only the individual controls catch input */
  opacity: 0;
  transition: opacity .5s ease;
}
html.eng-cine-settled .eng-cine__ui{ opacity: 1; }

/* The caption sits bottom-left of the film, matching the old .vstage look. */
.eng-cine__ui .vcap{
  position: absolute;
  left: clamp(20px,5vw,64px);
  bottom: clamp(26px,5vh,52px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.eng-cine__ui .vmute{ pointer-events: auto; }

/* When settled, the layer becomes interactive so the mute button works and the
   film is no longer just a passive fly-through. It stays fixed and full-bleed —
   the tab strip beneath (#view) drives which clip plays. */
html.eng-cine-settled .eng-cine{
  pointer-events: none;              /* container stays transparent to input… */
}
html.eng-cine-settled .eng-cine__ui .vmute,
html.eng-cine-settled .vtab{ pointer-events: auto; }  /* …controls opt back in */

/* A gentle grade stays up in settled mode so the full-bleed video reads as
   graded footage rather than flat. */
html.eng-cine-settled .eng-cine__grade{ opacity: 1 !important; }

/* ============================================================
   FALLBACK (no GSAP / reduced motion): there's no scroll choreography, but the
   cinematic layer is still the ONE video surface — so instead of hiding it, we
   show it as a static, full-bleed video sitting inside the #view slot, with the
   engine cut-out hidden and the caption/tabs visible. Tabs still drive it.
   ============================================================ */
html.eng-no-transition #view{
  position: relative;
  min-height: 0;
  padding-top: clamp(48px,8vh,110px);
}
/* Give the slot a 16:9 stage the absolute film can fill. */
html.eng-no-transition #view::before{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 82vh;
}
html.eng-no-transition .eng-cine{
  position: absolute;              /* flow with #view instead of covering screen */
  top: clamp(48px,8vh,110px);
  left: 0; right: 0; bottom: auto;
  height: min(82vh, 56.25vw);      /* match the 16:9 ::before stage */
  opacity: 1;
  visibility: visible;
  z-index: 0;                      /* behind the tab strip in #view */
}
html.eng-no-transition .eng-cine__back{ opacity: 1; }
html.eng-no-transition .eng-cine__engine{ display: none; }   /* no zoom subject */
html.eng-no-transition .eng-cine__film{ opacity: 1; }
html.eng-no-transition .eng-cine__grade{ opacity: 1; }
html.eng-no-transition .eng-cine__ui{ opacity: 1; }
html.eng-no-transition .eng-cine__ui .vmute{ pointer-events: auto; }
/* Reveal the tab strip (now inside the UI overlay) in the static fallback. */
html.eng-no-transition .eng-cine__ui .vstrip{ opacity: 1; pointer-events: auto; }
html.eng-no-transition .eng-cine__ui .vtab{ pointer-events: auto; }
html.eng-no-transition .hero-engine-wrap{ opacity: 1 !important; }

@media (prefers-reduced-motion: reduce){
  html.eng-cine-live .hero-engine-wrap{ opacity: 1 !important; }
}

/* ============================================================
   STATIC VIDEO SECTION SIZING (eng-no-transition)
   Show the FULL 16:9 clip — never crop the engine. The clip is contained
   inside a true 16:9 stage so top/bottom are never clipped. The video's own
   white studio background blends into the white section backdrop.
   ============================================================ */
html.eng-no-transition #view::before{
  aspect-ratio: 16 / 9;
  max-height: none;                 /* no 82vh cap — keep the full 16:9 stage */
}
html.eng-no-transition .eng-cine{
  height: 56.25vw;                  /* exact 16:9 of full width — matches ::before */
  max-height: none;
}
html.eng-no-transition .eng-cine__film video{
  object-fit: contain;             /* whole engine always visible, no crop */
}
html.eng-no-transition .eng-cine__film{
  object-fit: contain;
}