/* VideoOS · cinema.css — shared cinema compositing layer
   Source of truth: /preview-e (gold-standard hero). Drop-in, data-driven.
   Opt in with:  <div class="vo-cinema" data-clip=… data-poster=… data-light=reel|ambient | data-mesh>…</div>
   cinema.js injects .vo-fill/.vo-sharp/.vo-gl/.vo-grade/.vo-scrim/.vo-grain at runtime.
   Everything degrades: reduced-motion / saveData / mobile -> static poster, no canvas, copy stays visible. */

/* Display + wordmark fonts (kept on Google Fonts — already used site-wide, no new origin / no CSP change). */

:root{
  --vo-ink:#f4f4f6; --vo-mut:#cdd0d8; --vo-accent:#ff6a3d; --vo-gold:#ffce8a; --vo-bg:#050506;
}

/* ---- container: self-contained "stage" so MANY sections can use it on one page ---- */
.vo-cinema{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--vo-bg); color:var(--vo-ink);
  font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
/* hero opt-in: pin the stage to the viewport like preview-e (parallax bg behind scroll) */
.vo-cinema[data-fixed]{min-height:100vh}
.vo-cinema[data-fixed] .vo-stage,
.vo-cinema[data-fixed] .vo-gl,
.vo-cinema[data-fixed] .vo-grade,
.vo-cinema[data-fixed] .vo-scrim,
.vo-cinema[data-fixed] .vo-grain{position:fixed}

/* ---- z-ordered compositing layers (mirrors preview-e: stage<gl<grade<content<badge<grain) ---- */
.vo-stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--vo-bg)}
.vo-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.14) translate3d(var(--vo-fx,0),var(--vo-fy,0),0);
  filter:blur(42px) brightness(.42) saturate(1.25)}
/* sharp 9:16 inset — right-anchored portrait reel (the hero "subject") */
.vo-sharp{position:absolute;top:50%;right:7vw;left:auto;
  transform:translate3d(var(--vo-sx,0),var(--vo-sy,0),0) translateY(-50%) rotate(.6deg);
  height:90vh;max-height:760px;aspect-ratio:9/16;object-fit:cover;border-radius:24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 5%,#000 12%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 5%,#000 12%);
  filter:saturate(.62) contrast(.92) brightness(1.04) drop-shadow(0 50px 90px rgba(0,0,0,.8));
  transition:filter 1s ease;will-change:transform}
/* grade-resolve: ungraded log footage -> graded on load (the brand "behavior", not an asset) */
.vo-cinema.vo-graded .vo-sharp{filter:saturate(1.16) contrast(1.07) brightness(1) drop-shadow(0 50px 90px rgba(0,0,0,.8))}
.vo-cinema.vo-graded .vo-fill{filter:blur(42px) brightness(.46) saturate(1.3)}

.vo-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;mix-blend-mode:screen;pointer-events:none;display:block}
.vo-cinema[data-fixed] .vo-gl{width:100vw;height:100vh}
.vo-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   radial-gradient(78% 78% at 70% 42%,transparent 36%,rgba(8,14,20,.34) 82%,rgba(6,12,18,.5)),
   radial-gradient(120% 90% at 72% 44%,rgba(255,120,60,.05),transparent 46%),
   linear-gradient(180deg,rgba(8,5,12,.25),transparent 30%)}
.vo-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
   linear-gradient(95deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.6) 34%,rgba(5,5,6,.12) 56%,transparent 72%),
   linear-gradient(0deg,rgba(5,5,6,.6),transparent 32%)}
.vo-grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* content sits above the compositing stack */
.vo-cinema > :not(.vo-stage):not(.vo-gl):not(.vo-grade):not(.vo-scrim):not(.vo-grain){position:relative;z-index:4}

/* ---- data-light=ambient: subtle wash, no right-side portrait; centered glow + gentler scrim ----
   for content sections that want the cinema "air" without a hero subject. */
.vo-cinema[data-light="ambient"] .vo-sharp{display:none}
.vo-cinema[data-light="ambient"] .vo-fill{filter:blur(60px) brightness(.5) saturate(1.2)}
.vo-cinema[data-light="ambient"] .vo-grade{
  background:radial-gradient(70% 70% at 50% 45%,rgba(255,120,60,.05),transparent 55%),
            radial-gradient(120% 100% at 50% 50%,transparent 40%,rgba(6,12,18,.5))}
.vo-cinema[data-light="ambient"] .vo-scrim{
  background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,.2) 40%,rgba(5,5,6,.55))}
.vo-cinema.vo-graded[data-light="ambient"] .vo-fill{filter:blur(60px) brightness(.56) saturate(1.28)}

/* ---- data-mesh: CSS-ONLY animated gradient-mesh (login/panel chrome — no WebGL, no video) ----
   cinema.js skips the shader + video mount entirely when data-mesh is present. */
.vo-cinema[data-mesh]{background:var(--vo-bg)}
.vo-cinema[data-mesh] .vo-stage{
  background:
   radial-gradient(40% 55% at 18% 22%,rgba(255,106,61,.20),transparent 60%),
   radial-gradient(45% 50% at 82% 18%,rgba(255,170,90,.16),transparent 62%),
   radial-gradient(55% 60% at 70% 88%,rgba(120,80,200,.16),transparent 60%),
   radial-gradient(50% 55% at 20% 90%,rgba(40,120,180,.14),transparent 60%),
   var(--vo-bg);
  background-size:200% 200%,200% 200%,200% 200%,200% 200%,100% 100%;
  animation:vo-mesh 26s ease-in-out infinite alternate}
@keyframes vo-mesh{
  0%{background-position:0% 0%,100% 0%,100% 100%,0% 100%,0 0}
  50%{background-position:30% 20%,70% 30%,60% 70%,30% 80%,0 0}
  100%{background-position:0% 0%,100% 0%,100% 100%,0% 100%,0 0}}

/* ---- entrance: ungraded copy rises in (same easing/stagger as preview-e) ---- */
@keyframes vo-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.vo-rise{opacity:0;animation:vo-rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.vo-rise.d1{animation-delay:.16s}.vo-rise.d2{animation-delay:.28s}
.vo-rise.d3{animation-delay:.4s}.vo-rise.d4{animation-delay:.52s}.vo-rise.d5{animation-delay:.64s}

/* ---- typographic helpers extracted from the hero (optional, opt-in) ---- */
.vo-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--vo-gold);text-shadow:0 1px 16px rgba(0,0,0,.6)}
.vo-serif{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;letter-spacing:-.01em;
  background:linear-gradient(95deg,var(--vo-accent),var(--vo-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vo-wordmark{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.04em;
  background:linear-gradient(105deg,#ff6a32 0%,#ff7e3a 35%,#ffe2b0 50%,#ff7e3a 65%,#ff6a32 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:vo-wmflow 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 1px 1px rgba(4,4,6,.55)) drop-shadow(0 0 3px rgba(4,4,6,.45))}
@keyframes vo-wmflow{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* ---- reduced-motion: no canvas, no animation, copy fully visible, footage static-graded ---- */
@media (prefers-reduced-motion:reduce){
  .vo-cinema *{animation:none!important;transition:none!important}
  .vo-rise{opacity:1!important;transform:none!important}
  .vo-gl{display:none}
  .vo-sharp{filter:saturate(1.1) contrast(1.05) drop-shadow(0 50px 90px rgba(0,0,0,.8))}
  .vo-grain{opacity:.05}
  .vo-cinema[data-mesh] .vo-stage{animation:none}
}

/* ---- mobile (<=880px): drop the blurred fill, make the sharp reel a full-bleed backdrop,
   strengthen scrim for text legibility — mirrors preview-e mobile block. ---- */
@media (max-width:880px){
  .vo-cinema .vo-fill{display:none}
  .vo-cinema .vo-sharp{position:absolute;inset:0;width:100%;height:100%;max-height:none;border-radius:0;
    transform:none;right:0;-webkit-mask-image:none;mask-image:none}
  .vo-cinema[data-fixed] .vo-sharp{position:fixed}
  .vo-cinema[data-light="ambient"] .vo-sharp{display:none}
  .vo-cinema .vo-scrim{
    background:
     linear-gradient(0deg,rgba(4,4,6,.96) 0%,rgba(4,4,6,.9) 26%,rgba(4,4,6,.72) 46%,rgba(4,4,6,.46) 60%,rgba(4,4,6,.16) 76%,transparent 90%),
     linear-gradient(180deg,rgba(4,4,6,.78) 0%,rgba(4,4,6,.46) 14%,rgba(4,4,6,.12) 28%,transparent 36%)}
}