/* ============================================================
   HACKIEE — CINEMATIC DEPTH LAYER  (assets/css/cinematic.css)
   Additive, STOREFRONT-ONLY, loaded AFTER v2.css. Turns browsing
   into a "lit scene" experience: ambient aurora depth behind the
   paper canvas, a soft pointer spotlight, an edge vignette,
   camera-style section reveals, and pointer-tracked card glare.

   Rules: animates transform / opacity / filter only · zero layout
   shift (all overlays are position:fixed or absolute) · fully
   guarded for prefers-reduced-motion + touch · never covers or
   blocks any interactive control (all layers pointer-events:none).
   Everything activates only when JS adds `body.cine-on`, so with
   JS off the page is byte-for-byte unchanged.
   ============================================================ */
:root{
  --cine-blur:64px;
  --cine-rise:26px;
  --cine-ease:cubic-bezier(.16,1,.3,1);
}

/* Lift the real page above the ambient set — no visual change, just
   establishes stacking so the depth layers sit behind the content.
   NOTE: never override the header's position (it is sticky) — only its
   stacking. Overriding position here previously broke the sticky nav. */
body.cine-on > #maincontent,
body.cine-on > .site-footer,
body.cine-on > .promo-bar{ position:relative; z-index:1; }
body.cine-on > .site-header{ z-index:60; }

/* ---- 1. Ambient aurora depth backdrop ---- */
.cine-atmos{
  position:fixed; inset:-12vmax; z-index:0; pointer-events:none;
  overflow:hidden; contain:layout paint;
  transform:translate3d(var(--ax,0),var(--ay,0),0);
  will-change:transform;
}
.cine-atmos b{
  position:absolute; display:block; border-radius:50%;
  filter:blur(var(--cine-blur)); will-change:transform;
}
.cine-atmos .b1{
  width:48vmax;height:48vmax;left:-4vmax;top:-4vmax;
  background:radial-gradient(circle at 30% 30%, rgba(117,102,244,.22), transparent 62%);
  animation:cineDrift1 28s var(--cine-ease) infinite alternate;
}
.cine-atmos .b2{
  width:42vmax;height:42vmax;right:-8vmax;top:10vmax;
  background:radial-gradient(circle at 60% 40%, rgba(91,70,229,.16), transparent 62%);
  animation:cineDrift2 34s var(--cine-ease) infinite alternate;
}
.cine-atmos .b3{
  width:54vmax;height:54vmax;left:18vmax;bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%, rgba(245,166,35,.10), transparent 60%);
  animation:cineDrift3 40s var(--cine-ease) infinite alternate;
}
@keyframes cineDrift1{ to{ transform:translate3d(6vmax,4vmax,0) scale(1.12) } }
@keyframes cineDrift2{ to{ transform:translate3d(-5vmax,6vmax,0) scale(1.10) } }
@keyframes cineDrift3{ to{ transform:translate3d(5vmax,-5vmax,0) scale(1.14) } }

/* ---- 2. Pointer spotlight (a soft pool of light following the cursor) ---- */
.cine-spot{
  position:fixed; top:0; left:0; z-index:0; pointer-events:none;
  width:64vmax; height:64vmax; margin:-32vmax 0 0 -32vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(91,70,229,.12), rgba(91,70,229,.05) 42%, transparent 66%);
  transform:translate3d(var(--sx,50vw),var(--sy,40vh),0);
  opacity:0; transition:opacity .6s ease; will-change:transform;
}
body.cine-on.cine-spot-ready .cine-spot{ opacity:1; }

/* ---- 3. Edge vignette (subtle cinematic framing) ---- */
.cine-vignette{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 20vmax rgba(17,19,24,.10), inset 0 0 6vmax rgba(17,19,24,.04);
}

/* ---- 4. Camera-style section reveals ---- */
body.cine-on .cine-scene{
  opacity:0; transform:translate3d(0,var(--cine-rise),0) scale(.988);
  transition:opacity .75s var(--cine-ease), transform .85s var(--cine-ease);
  will-change:transform,opacity;
}
body.cine-on .cine-scene.cine-in{ opacity:1; transform:none; }

/* ---- 5. Pointer-tracked card glare (a moving highlight = lit 3D object) ---- */
body.cine-on .cine-glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.22), transparent 60%);
  opacity:0; transition:opacity .35s ease; mix-blend-mode:soft-light;
}
body.cine-on .cine-glare.on{ opacity:1; }

/* ============================================================
   Guards — belt-and-suspenders on top of the JS flags
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cine-atmos{ transform:none !important; }
  .cine-atmos b{ animation:none !important; }
  .cine-spot,.cine-glare{ display:none !important; }
  body.cine-on .cine-scene{ opacity:1 !important; transform:none !important; transition:none !important; }
}
@media (hover:none),(pointer:coarse){
  .cine-spot,.cine-glare{ display:none !important; }
  .cine-atmos{ transform:none !important; }
}