/* ===========================================================================
   SiloForge cinematic program-hero laptop — scroll-driven lid open (v2).
   program-cinema.js wraps the existing lid+base in .pdemo__stage and drives the
   lid hinge from scroll (~50% open -> fully open, one-way/latched), then runs a
   subtle float once locked. The glow stays strictly BEHIND (service.css
   .pdemo-glow, z-index:-1); the demo video autoplay-loops untouched.
   Compositor-only. data-motion off / reduced motion -> lid fully open, static.
   =========================================================================== */

/* .pdemo is the perspective camera; JS wraps lid+base in .pdemo__stage.
   container-type makes it a query container so the frame can size in cqw (below). */
.pdemo[data-cinema]{ perspective: 1700px; perspective-origin: 50% 50%; container-type: inline-size; }

/* Neutralize the parent reveal's competing translate/scale + opacity gate so
   the cinema module owns 100% of the pdemo column's motion. */
html[data-motion="on"] body[data-page="siloforge"] .pg-hero .svc2-hgrid
  > .reveal.reveal-d1:has(.pdemo[data-cinema]){
  transform: none !important; opacity: 1 !important; transition: none !important;
}

/* Camera + float unit. The CAM down-tilt here MUST match program-cinema.js CAM.
   JS overrides this inline (float + cursor) only after the lid locks fully open. */
.pdemo[data-cinema] .pdemo__stage{
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 88%;            /* near the hinge / base line */
  transform: rotateX(0deg);
  will-change: transform;               /* the float animates the stage */
}

/* The lid hinges about the base line; JS drives rotateX from scroll
   (LID_BACK -> 0). Default 0deg = fully open (used by the no-motion fallbacks). */
.pdemo[data-cinema] .pdemo-lid{
  transform-origin: 50% 100%;
  transform: rotateX(0deg);
  will-change: transform;
}

/* ---- Proportional frame (container-query units) ----------------------------
   The base .pdemo frame uses fixed px — 9px bezel, 15px base, 18/8px radii, and
   a 72px-min camera notch — which look slim on the wide desktop laptop but
   chunky on the narrow mobile one. Sizing them in cqw (relative to the laptop's
   own width) keeps the proportions identical at every viewport. At ~980px wide
   these reproduce the original pixel sizes; on mobile they scale down to match. */
.pdemo[data-cinema] .pdemo-lid{ padding: 0.92cqw; border-radius: 1.84cqw; }
.pdemo[data-cinema] .pdemo-base{ height: 1.53cqw; border-radius: 0.3cqw 0.3cqw 1.12cqw 1.12cqw; }
.pdemo[data-cinema] .pdemo-base::before{ height: 0.92cqw; }
.pdemo[data-cinema] .pdemo-base::after{ height: 1.3cqw; }
.pdemo[data-cinema] .pdemo-screen{ border-radius: 0.82cqw; }
.pdemo[data-cinema] .pdemo-screen::after{   /* camera notch — scale, drop the fixed 72px min */
  width: 12cqw; min-width: 0; max-width: none; height: 1.63cqw; border-radius: 0 0 0.92cqw 0.92cqw;
}

/* No-motion: lid fully open, camera tilt only, no scroll, no float. */
.pdemo[data-cinema].is-static .pdemo-lid,
html[data-motion="off"] .pdemo[data-cinema] .pdemo-lid{ transform: rotateX(0deg) !important; }
.pdemo[data-cinema].is-static .pdemo__stage,
html[data-motion="off"] .pdemo[data-cinema] .pdemo__stage{ transform: rotateX(0deg) !important; }

@media (prefers-reduced-motion: reduce){
  .pdemo[data-cinema] .pdemo-lid{ transform: rotateX(0deg) !important; }
  .pdemo[data-cinema] .pdemo__stage{ transform: rotateX(0deg) !important; }
}