/* ═══════════════════════════════════════════════════════
   CINEMA v2 — consolidated.
   Only ships features that are actually alive.
   Replaces: cinema.css, cinema-pro.css, cinema-max.css,
             cinema-tune.css, cinema-perf.css, cinema-mov.css,
             cinema-lite.css, cinema-nuclear.css.
   No WebGL atmosphere, no arc reactor, no data panels,
   no VHS scanlines, no custom cursor — those were killed
   for perf. Just the essentials, all in one file.
   ═══════════════════════════════════════════════════════ */

/* ─── SOCIAL-MEDIA SCROLL SNAP ───────────────────────
   Reels/TikTok-style: each major section snaps into place.
   "proximity" instead of "mandatory" so users can still free-scroll between snaps. */
html{scroll-snap-type:y proximity}
.hero,
section.section,
.fullstack-sec,
.faq-sec,
.final-cta,
.founders-sec{scroll-snap-align:start;scroll-snap-stop:normal}
/* Reduce snap intensity if user prefers motion off */
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* ─── TALK TO JARVIS — floating voice chat ─────────── */
.cine-talk-btn{
  position:fixed;right:30px;bottom:30px;z-index:300;
  display:flex;align-items:center;gap:10px;
  height:50px;padding:0 22px 0 18px;border-radius:28px;
  background:linear-gradient(135deg,#21E68A,#0f8a55);
  color:#070A0F;border:none;cursor:pointer;
  font-family:'Syne',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.02em;
  box-shadow:0 12px 36px -8px rgba(33,230,138,.5),0 0 26px rgba(33,230,138,.18);
  transition:all .25s;
}
.cine-talk-btn:hover{transform:translateY(-2px);box-shadow:0 18px 48px -8px rgba(33,230,138,.7),0 0 36px rgba(33,230,138,.32)}
.cine-talk-btn::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:#070A0F;box-shadow:0 0 0 2px #21E68A;
  animation:cineCoPulse 1.8s ease-in-out infinite;
}
@media(max-width:760px){.cine-talk-btn{right:14px;bottom:64px;height:44px;padding:0 18px 0 14px;font-size:12px}}

.cine-talk-panel{
  position:fixed;right:30px;bottom:96px;z-index:9700;
  width:380px;max-width:calc(100vw - 60px);
  background:rgba(7,10,15,.98);
  border:1px solid rgba(33,230,138,.32);
  border-radius:14px;
  display:none;flex-direction:column;
  box-shadow:0 30px 80px -12px rgba(0,0,0,.7),0 0 40px rgba(33,230,138,.12);
  transform-origin:bottom right;
  animation:cinePanelIn .35s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;max-height:75vh;
}
.cine-talk-panel.open{display:flex}
@keyframes cinePanelIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.cine-talk-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;border-bottom:1px solid rgba(33,230,138,.18);
  background:linear-gradient(180deg,rgba(33,230,138,.05),transparent);
}
.cine-talk-title{
  display:flex;align-items:center;gap:10px;
  font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;
  color:#EAF0FF;
}
.cine-talk-title .dot{
  width:8px;height:8px;border-radius:50%;background:#21E68A;
  box-shadow:0 0 10px rgba(33,230,138,.7);
  animation:cineCoPulse 1.4s infinite;
}
.cine-talk-close{
  background:transparent;border:none;cursor:pointer;
  color:rgba(234,240,255,.4);font-size:18px;line-height:1;
  padding:4px 10px;border-radius:6px;transition:all .2s;
}
.cine-talk-close:hover{color:#EAF0FF;background:rgba(234,240,255,.06)}
.cine-talk-log{
  flex:1;padding:18px 20px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.65;
  color:rgba(234,240,255,.85);min-height:200px;max-height:50vh;
}
.cine-talk-msg{display:flex;flex-direction:column;gap:4px}
.cine-talk-msg .who{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(33,230,138,.7);
}
.cine-talk-msg.user .who{color:rgba(234,240,255,.4)}
.cine-talk-msg .body{
  background:rgba(33,230,138,.04);border:1px solid rgba(33,230,138,.14);
  padding:10px 14px;border-radius:8px;
}
.cine-talk-msg.user .body{background:rgba(234,240,255,.04);border-color:rgba(234,240,255,.08)}
/* "Take the Tour" CTA at the top of the chat panel */
.cine-talk-tour-cta{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:14px 16px;
  background:linear-gradient(135deg,rgba(33,230,138,.18),rgba(33,230,138,.06));
  border:1px solid rgba(33,230,138,.4);
  border-radius:10px;cursor:pointer;
  color:#EAF0FF;font-family:'Syne',sans-serif;
  text-align:left;transition:all .2s;
}
.cine-talk-tour-cta:hover{background:linear-gradient(135deg,rgba(33,230,138,.28),rgba(33,230,138,.12));border-color:#21E68A;box-shadow:0 0 24px rgba(33,230,138,.25)}
.cine-talk-tour-cta .ico{font-size:22px;flex-shrink:0}
.cine-talk-tour-cta .text{flex:1;font-size:13px;line-height:1.35}
.cine-talk-tour-cta .text strong{font-weight:700;color:#fff;letter-spacing:.02em}
.cine-talk-tour-cta .text .sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(234,240,255,.55);letter-spacing:.04em}
.cine-talk-tour-cta .arrow{font-size:18px;color:#21E68A;transition:transform .2s}
.cine-talk-tour-cta:hover .arrow{transform:translateX(3px)}

.cine-talk-thinking{display:flex;gap:5px;padding:10px 14px}
.cine-talk-thinking span{
  width:6px;height:6px;border-radius:50%;background:#21E68A;
  animation:cineThink .9s ease-in-out infinite;
}
.cine-talk-thinking span:nth-child(2){animation-delay:.15s}
.cine-talk-thinking span:nth-child(3){animation-delay:.30s}
@keyframes cineThink{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cine-talk-input-wrap{
  display:flex;align-items:flex-end;gap:8px;
  padding:14px 16px;border-top:1px solid rgba(33,230,138,.14);
  background:rgba(13,18,25,.6);
}
.cine-talk-input{
  flex:1;background:rgba(7,10,15,.7);border:1px solid rgba(234,240,255,.1);
  border-radius:8px;padding:10px 12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  color:#EAF0FF;resize:none;min-height:38px;max-height:120px;
  outline:none;transition:border-color .2s;
}
.cine-talk-input:focus{border-color:rgba(33,230,138,.4)}
.cine-talk-mic,.cine-talk-send{
  width:38px;height:38px;border-radius:50%;
  background:rgba(33,230,138,.12);border:1px solid rgba(33,230,138,.32);
  color:#21E68A;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .2s;
}
.cine-talk-mic:hover,.cine-talk-send:hover{background:rgba(33,230,138,.2);border-color:#21E68A}
.cine-talk-mic.listening{background:#21E68A;color:#070A0F;animation:cineCoPulse 1.2s infinite}
.cine-talk-disclaimer{
  padding:10px 18px;font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.12em;
  color:rgba(234,240,255,.32);text-align:center;
  border-top:1px solid rgba(234,240,255,.04);
}

/* ─── CSS VARS ───────────────────────────────────────── */
:root{
  --cine-grade-r:0;
  --cine-grade-g:0;
  --cine-grade-b:0;
  --cine-grade-a:0;
}

/* Color-grade overlay — gated behind body.cinema-on (audit recommendation:
   was the #3 GPU killer alongside film grain + vignette filter). */
.cine-grade{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:rgba(var(--cine-grade-r),var(--cine-grade-g),var(--cine-grade-b),var(--cine-grade-a));
  /* PERF (felt-jank): was mix-blend-mode:overlay — a full-viewport blend
     recomposite fired on every section's grade crossfade, hitching scroll.
     Plain alpha tint composites cheaply. */
  transition:background 1.2s cubic-bezier(.4,0,.3,1);
  display:none;
}
body.cinema-on .cine-grade{display:block}

/* ─── COLD OPEN (5s boot sequence) ──────────────────── */
#cine-cold-open{
  position:fixed;inset:0;z-index:99000;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,#070A0F 0%,#000 100%);
  color:#EAF0FF;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:32px;
  font-family:'Bebas Neue',sans-serif;
  opacity:1;pointer-events:auto;
  transition:opacity .9s cubic-bezier(.6,0,.3,1);
  overflow:hidden;
}
#cine-cold-open.gone{opacity:0;pointer-events:none}
#cine-cold-open::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%,rgba(33,230,138,.05),transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
.cine-co-mark{
  position:relative;z-index:2;
  font-size:clamp(64px,11vw,160px);
  letter-spacing:.5px;line-height:1;
  display:flex;align-items:center;gap:.08em;
  filter:drop-shadow(0 0 30px rgba(33,230,138,.4));
  opacity:0;
  animation:cineMarkIn 1.4s .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.cine-co-mark .c{color:#21E68A;text-shadow:0 0 36px rgba(33,230,138,.55)}
.cine-co-mark .bar{
  display:inline-block;width:.06em;height:.78em;
  background:#21E68A;margin:0 .12em;
  box-shadow:0 0 24px rgba(33,230,138,.7);
  transform-origin:center;transform:scaleY(0);
  animation:cineBar 1.4s 1.5s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes cineMarkIn{
  0%{opacity:0;transform:scale(.6);letter-spacing:.5em;filter:blur(24px) drop-shadow(0 0 0 rgba(33,230,138,0))}
  50%{opacity:1;filter:blur(0) drop-shadow(0 0 50px rgba(33,230,138,.7))}
  100%{opacity:1;transform:scale(1);letter-spacing:.5px;filter:blur(0) drop-shadow(0 0 30px rgba(33,230,138,.4))}
}
@keyframes cineBar{0%{transform:scaleY(0)}40%{transform:scaleY(1.05)}100%{transform:scaleY(1)}}
.cine-co-tag{
  position:relative;z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.42em;text-transform:uppercase;
  color:rgba(234,240,255,.46);opacity:0;
  animation:cineTagIn .8s 1.9s ease-out forwards;
}
.cine-co-tag .pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#21E68A;margin-right:14px;
  box-shadow:0 0 10px rgba(33,230,138,.7);
  animation:cineCoPulse 1.4s 1.9s infinite;
  vertical-align:middle;
}
.cine-co-skip{
  position:absolute;bottom:36px;right:36px;z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,255,.34);
  background:transparent;border:1px solid rgba(234,240,255,.12);
  padding:8px 16px;border-radius:4px;cursor:pointer;
  opacity:0;animation:cineTagIn .6s 2.2s ease-out forwards;
}

/* Cold open "ENABLE TOUR" prompt — visible during boot */
.cine-co-tour-cta{
  position:absolute;bottom:36px;left:36px;z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#21E68A;
  background:rgba(33,230,138,.08);
  border:1px solid rgba(33,230,138,.4);
  padding:10px 18px;border-radius:4px;cursor:pointer;
  opacity:0;animation:cineTagIn .6s 2.2s ease-out forwards;
  display:flex;align-items:center;gap:8px;
}
.cine-co-tour-cta:hover{background:rgba(33,230,138,.15);border-color:#21E68A;color:#fff}
.cine-co-tour-cta .ico{font-size:14px}
.cine-co-tour-cta .pulse{
  width:6px;height:6px;border-radius:50%;background:#21E68A;
  box-shadow:0 0 10px rgba(33,230,138,.7);
  animation:cineCoPulse 1.4s infinite;
}
@media(max-width:760px){
  .cine-co-skip,.cine-co-tour-cta{bottom:20px;font-size:9px;padding:7px 12px}
  .cine-co-tour-cta{left:20px}
  .cine-co-skip{right:20px}
}
.cine-co-skip:hover{color:#EAF0FF;border-color:rgba(234,240,255,.4)}
.cine-co-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(33,230,138,.32),transparent);
  pointer-events:none;z-index:1;
  animation:cineCoScan 2.2s linear infinite;
}
.cine-co-ring{
  position:absolute;left:50%;top:50%;
  width:520px;height:520px;
  transform:translate(-50%,-50%) scale(0);
  border:1px solid rgba(33,230,138,.35);border-radius:50%;
  pointer-events:none;z-index:1;
  animation:cineCoRing 2.6s 1.1s ease-out forwards;
}
.cine-co-ring.inner{width:340px;height:340px;border-color:rgba(33,230,138,.5);animation-delay:1.3s}
.cine-co-cross{position:absolute;background:rgba(33,230,138,.18);pointer-events:none;z-index:1}
.cine-co-cross.h{left:0;right:0;top:50%;height:1px;transform:scaleX(0);transform-origin:left;animation:cineCoCrossH 1.2s .9s cubic-bezier(.7,0,.3,1) forwards}
.cine-co-cross.v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);transform-origin:top;animation:cineCoCrossV 1.2s 1.1s cubic-bezier(.7,0,.3,1) forwards}
.cine-co-boot{
  position:absolute;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:rgba(33,230,138,.7);letter-spacing:.08em;
}
.cine-co-boot-l{top:32px;left:32px;width:260px;text-align:left}
.cine-co-boot-r{top:32px;right:32px;width:260px;text-align:right;color:rgba(234,240,255,.45)}
.cine-co-boot div{opacity:0;animation:cineCoBootLine .5s ease-out forwards}
.cine-co-boot-l div:nth-child(1){animation-delay:.15s}
.cine-co-boot-l div:nth-child(2){animation-delay:.30s}
.cine-co-boot-l div:nth-child(3){animation-delay:.45s}
.cine-co-boot-l div:nth-child(4){animation-delay:.60s}
.cine-co-boot-l div:nth-child(5){animation-delay:.75s}
.cine-co-boot-l div:nth-child(6){animation-delay:.90s}
.cine-co-boot-r div:nth-child(1){animation-delay:.22s}
.cine-co-boot-r div:nth-child(2){animation-delay:.36s}
.cine-co-boot-r div:nth-child(3){animation-delay:.52s}
.cine-co-boot-r div:nth-child(4){animation-delay:.68s}
@keyframes cineTagIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes cineCoPulse{0%,100%{box-shadow:0 0 10px rgba(33,230,138,.7)}50%{box-shadow:0 0 22px rgba(33,230,138,1)}}
@keyframes cineCoScan{0%{transform:translateY(-10vh)}100%{transform:translateY(110vh)}}
@keyframes cineCoRing{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(180deg);opacity:.18}}
@keyframes cineCoCrossH{to{transform:scaleX(1)}}
@keyframes cineCoCrossV{to{transform:scaleY(1)}}
@keyframes cineCoBootLine{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
body.cine-cold-locked{overflow:hidden!important;height:100vh}

/* ─── LETTERBOX BARS (site-wide) ────────────────────── */
.cine-letterbox{
  position:fixed;left:0;right:0;
  background:#000;z-index:9500;pointer-events:none;
  transition:height .6s cubic-bezier(.6,0,.3,1);
}
.cine-letterbox.top{top:0;height:20px;border-bottom:1px solid rgba(33,230,138,.06)}
.cine-letterbox.bot{bottom:0;height:20px;border-top:1px solid rgba(33,230,138,.06)}
body.cine-keymoment .cine-letterbox.top,
body.cine-keymoment .cine-letterbox.bot{height:68px}
@media(max-width:760px){
  .cine-letterbox.top,.cine-letterbox.bot{height:8px}
  body.cine-keymoment .cine-letterbox.top,
  body.cine-keymoment .cine-letterbox.bot{height:30px}
}

/* ─── HUD FRAME — corner brackets + readouts ────────── */
.cine-hud{
  position:fixed;inset:0;z-index:9400;pointer-events:none;
  opacity:0;transition:opacity .8s ease-out .6s;
  font-family:'JetBrains Mono',monospace;
  color:rgba(33,230,138,.75);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
}
body.cine-hud-on .cine-hud{opacity:1}

.cine-hud-bracket{
  position:absolute;width:36px;height:36px;
  border:1.5px solid rgba(33,230,138,.55);
}
.cine-hud-bracket.tl{top:80px;left:22px;border-right:none;border-bottom:none}
.cine-hud-bracket.tr{top:80px;right:22px;border-left:none;border-bottom:none}
.cine-hud-bracket.bl{bottom:22px;left:22px;border-right:none;border-top:none}
.cine-hud-bracket.br{bottom:22px;right:22px;border-left:none;border-top:none}
.cine-hud-bracket::before{
  content:"";position:absolute;width:5px;height:5px;
  background:rgba(33,230,138,.85);border-radius:50%;
  box-shadow:0 0 8px rgba(33,230,138,.5);
}
.cine-hud-bracket.tl::before{top:-3px;left:-3px}
.cine-hud-bracket.tr::before{top:-3px;right:-3px}
.cine-hud-bracket.bl::before{bottom:-3px;left:-3px}
.cine-hud-bracket.br::before{bottom:-3px;right:-3px}

.cine-hud-readout{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:rgba(7,10,15,.78);
  padding:6px 12px;border:1px solid rgba(33,230,138,.22);
  border-radius:3px;font-size:10px;
}
.cine-hud-readout .dot{width:5px;height:5px;border-radius:50%;background:#21E68A;box-shadow:0 0 8px rgba(33,230,138,.5)}
.cine-hud-readout.tl{top:76px;left:78px}
.cine-hud-readout.tr{top:76px;right:78px;color:rgba(33,230,138,.85)}
.cine-hud-readout.bl{bottom:18px;left:78px;color:rgba(234,240,255,.5)}
.cine-hud-readout.br{bottom:18px;right:78px}
.cine-hud-readout .sep{opacity:.4;margin:0 4px}
@media(max-width:760px){
  .cine-hud-bracket{width:22px;height:22px}
  .cine-hud-bracket.tl,.cine-hud-bracket.tr{top:48px}
  .cine-hud-bracket.bl,.cine-hud-bracket.br{bottom:48px}
  .cine-hud-readout{display:none}
}

/* Top-center status bar — TRIMMED: hidden on homepage to reduce HUD density */
.cine-hud-status{
  position:fixed;top:74px;left:50%;transform:translateX(-50%);
  z-index:9400;pointer-events:none;
  display:none; /* hidden — was visual clutter on a marketing site */
  align-items:center;gap:14px;
  background:rgba(7,10,15,.78);
  border:1px solid rgba(33,230,138,.22);
  padding:6px 16px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,255,.7);
  opacity:0;transition:opacity 1s ease-out 1.2s;
}
body.cine-hud-on .cine-hud-status{opacity:1}
.cine-hud-status .pip{
  width:6px;height:6px;border-radius:50%;
  background:#21E68A;box-shadow:0 0 8px rgba(33,230,138,.7);
}
.cine-hud-status .grn{color:#21E68A}
.cine-hud-status .sep{opacity:.4}
@media(max-width:760px){.cine-hud-status{display:none}}

/* Nav telemetry */
.cine-nav-telemetry{
  display:none;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(33,230,138,.6);letter-spacing:.14em;
  margin-right:18px;text-transform:uppercase;
}
.nav.scrolled .cine-nav-telemetry{display:inline-flex;align-items:center;gap:8px}
.cine-nav-telemetry .pulse{width:5px;height:5px;border-radius:50%;background:#21E68A;box-shadow:0 0 8px rgba(33,230,138,.5)}
@media(max-width:900px){.cine-nav-telemetry{display:none!important}}

/* ─── CHAPTER MARKERS (right edge) ──────────────────── */
.cine-chapters{
  position:fixed;right:22px;bottom:96px;z-index:200;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateX(20px);
  transition:opacity .5s,transform .5s;
  pointer-events:none;
}
body.cine-chapters-on .cine-chapters{opacity:1;transform:translateX(0);pointer-events:auto}
.cine-chap{
  display:flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(234,240,255,.34);text-decoration:none;
  transition:color .3s;cursor:pointer;
}
.cine-chap-dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1px solid rgba(234,240,255,.28);
  transition:all .3s;
}
.cine-chap-label{opacity:0;transform:translateX(8px);transition:all .3s;white-space:nowrap}
.cine-chap:hover{color:#EAF0FF}
.cine-chap:hover .cine-chap-dot{border-color:#21E68A}
.cine-chap:hover .cine-chap-label{opacity:1;transform:translateX(0)}
.cine-chap.active{color:#EAF0FF}
.cine-chap.active .cine-chap-dot{background:#21E68A;border-color:#21E68A;box-shadow:0 0 12px rgba(33,230,138,.6)}
.cine-chap.active .cine-chap-label{opacity:1;transform:translateX(0)}
@media(max-width:900px){.cine-chapters{display:none}}

/* ─── SOUND TOGGLE ─────────────────────────────────── */
.cine-sound{
  position:fixed;left:30px;bottom:30px;z-index:200;
  height:42px;padding:0 16px 0 12px;border-radius:24px;
  background:rgba(7,10,15,.85);
  border:1px solid rgba(33,230,138,.32);
  cursor:pointer;display:flex;align-items:center;gap:8px;
  color:rgba(234,240,255,.7);transition:all .25s;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
}
.cine-sound::after{content:"Take the tour";font-weight:500;color:#21E68A}
.cine-sound.on::after{content:"Tour active"}
.cine-sound:hover{color:#EAF0FF;border-color:rgba(33,230,138,.4)}
.cine-sound.on{color:#21E68A;border-color:#21E68A;box-shadow:0 0 18px rgba(33,230,138,.35)}
.cine-sound svg{width:16px;height:16px}
@media(max-width:760px){
  .cine-sound{left:14px;bottom:14px;height:36px;padding:0 12px 0 10px}
  .cine-sound::after{font-size:9px}
}

/* ─── LOCK-ON TARGETING ─────────────────────────────── */
.cine-lock{
  position:fixed;pointer-events:none;z-index:99400;
  opacity:0;transition:opacity .18s ease-out;
}
.cine-lock.live{opacity:1}
.cine-lock-corner{
  position:absolute;width:18px;height:18px;
  border:1.5px solid #21E68A;
  filter:drop-shadow(0 0 6px rgba(33,230,138,.7));
}
.cine-lock-corner.tl{top:-6px;left:-6px;border-right:none;border-bottom:none}
.cine-lock-corner.tr{top:-6px;right:-6px;border-left:none;border-bottom:none}
.cine-lock-corner.bl{bottom:-6px;left:-6px;border-right:none;border-top:none}
.cine-lock-corner.br{bottom:-6px;right:-6px;border-left:none;border-top:none}
.cine-lock-label{
  position:absolute;left:0;top:-26px;
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:#21E68A;text-shadow:0 0 8px rgba(33,230,138,.5);
  white-space:nowrap;
}
.cine-lock-label .dot{width:5px;height:5px;border-radius:50%;background:#21E68A;box-shadow:0 0 8px rgba(33,230,138,.5)}
.cine-lock-coord{
  position:absolute;right:0;bottom:-22px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.12em;
  color:rgba(33,230,138,.7);
}
@keyframes cineLockSnap{0%{transform:scale(1.6);opacity:0}100%{transform:scale(1);opacity:1}}
.cine-lock.live .cine-lock-corner{animation:cineLockSnap .28s cubic-bezier(.4,1.6,.4,1) both}
.cine-lock.live .cine-lock-corner.tr{animation-delay:.03s}
.cine-lock.live .cine-lock-corner.bl{animation-delay:.06s}
.cine-lock.live .cine-lock-corner.br{animation-delay:.09s}
@media(hover:none){.cine-lock{display:none!important}}

/* ─── TITLE-CARD DROPS on section scroll-in ─────────── */
.cine-card-drop{
  position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:9700;pointer-events:none;text-align:center;
  opacity:0;
}
.cine-card-drop.live{animation:cineCardDrop 2.6s cubic-bezier(.4,.0,.2,1) forwards}
@keyframes cineCardDrop{
  0%{opacity:0;transform:translateY(-50%) scale(.92);filter:blur(8px)}
  12%{opacity:1;transform:translateY(-50%) scale(1);filter:blur(0)}
  72%{opacity:1;transform:translateY(-50%) scale(1.03)}
  100%{opacity:0;transform:translateY(-50%) scale(1.08);filter:blur(6px)}
}
.cine-card-drop .num{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(120px,18vw,260px);
  letter-spacing:1px;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px rgba(33,230,138,.85);
  text-shadow:0 0 60px rgba(33,230,138,.4);
  display:block;
}
.cine-card-drop .lbl{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,5.5vw,80px);
  letter-spacing:8px;line-height:1;
  color:#EAF0FF;text-shadow:0 0 30px rgba(7,10,15,.9),0 0 14px rgba(33,230,138,.5);
  margin-top:-12px;display:block;
}
.cine-card-drop .meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(33,230,138,.7);margin-top:14px;display:block;
}
.cine-card-scrim{
  position:fixed;inset:0;z-index:9650;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(7,10,15,.85) 0%,rgba(7,10,15,.5) 50%,transparent 90%);
  opacity:0;
}
.cine-card-scrim.live{animation:cineCardScrim 2.6s ease-out forwards}
@keyframes cineCardScrim{0%{opacity:0}15%{opacity:1}75%{opacity:.7}100%{opacity:0}}
.cine-flash{
  position:fixed;inset:0;z-index:9800;pointer-events:none;
  background:rgba(255,255,255,0);
}
.cine-flash.live{animation:cineFlash .55s ease-out forwards}
@keyframes cineFlash{0%{background:rgba(255,255,255,0)}10%{background:rgba(255,255,255,.55)}100%{background:rgba(255,255,255,0)}}
.cine-wipe{
  position:fixed;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,transparent,rgba(33,230,138,.18),rgba(33,230,138,.32),rgba(33,230,138,.18),transparent);
  z-index:9550;pointer-events:none;
  mix-blend-mode:screen;
}
.cine-wipe.live{animation:cineWipe .9s cubic-bezier(.7,0,.3,1) forwards}
@keyframes cineWipe{0%{left:0;width:0}50%{width:240px}100%{left:100%;width:0}}

/* ─── GLITCH HOVER on nav + buttons ─────────────────── */
.cine-glitch:hover{
  text-shadow:
    -.8px 0 0 rgba(255,40,40,.55),
    .8px 0 0 rgba(40,200,255,.55);
}

/* ─── SPOTLIGHT REVEAL — dims everything, makes graphics pop ─── */
.cine-spotlight-vignette{
  position:fixed;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse 65% 60% at 50% 50%,
    transparent 30%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.88) 80%,
    rgba(0,0,0,.95) 100%);
  /* BUG#4: fast fade-OUT (.3s) so the dim clears before the next section is
     on screen; slow fade-IN (1.2s) kept for the dramatic darken. */
  opacity:0;transition:opacity .3s ease;
}
body.cine-spotlight .cine-spotlight-vignette{opacity:1;transition:opacity 1.2s cubic-bezier(.4,0,.3,1)}

/* When spotlight is on, lift the pinned scene above the dim layer */
body.cine-spotlight .fullstack-cine-pin{z-index:7;position:fixed!important}

/* Glow the centerpiece elements when spotlight is on */
body.cine-spotlight .fs-cine-pillar{
  box-shadow:0 20px 80px -20px rgba(33,230,138,.4),0 0 40px rgba(33,230,138,.08);
}
body.cine-spotlight .fullstack-cine-h{
  text-shadow:0 0 40px rgba(33,230,138,.3),0 0 20px rgba(7,10,15,.8);
}
body.cine-spotlight .fs-cine-finale{
  text-shadow:0 0 80px rgba(33,230,138,.8),0 0 40px rgba(33,230,138,.6),0 0 100px rgba(33,230,138,.4)!important;
}

/* Floating data readouts during pinned scene */
.fs-readout{
  position:absolute;z-index:6;pointer-events:none;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(33,230,138,.85);
  background:rgba(7,10,15,.7);
  border:1px solid rgba(33,230,138,.32);
  padding:7px 12px;border-radius:3px;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s,transform .8s;
}
.fs-readout::before{
  content:"";position:absolute;left:-1px;top:-1px;
  width:6px;height:6px;border-left:1px solid #21E68A;border-top:1px solid #21E68A;
}
.fs-readout::after{
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:6px;height:6px;border-right:1px solid #21E68A;border-bottom:1px solid #21E68A;
}
.fs-readout .v{
  color:#EAF0FF;font-family:'Bebas Neue',sans-serif;font-size:18px;
  letter-spacing:.5px;line-height:1;margin-top:4px;display:block;
}
.fs-readout .v.c{color:#21E68A}
.fs-readout .pip{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#21E68A;margin-right:6px;
  box-shadow:0 0 6px rgba(33,230,138,.7);
}
body.cine-spotlight .fs-readout{opacity:1;transform:translateY(0)}
.fs-readout.r1{top:14%;left:5%;width:148px;transition-delay:.5s}
.fs-readout.r2{top:24%;right:5%;width:158px;transition-delay:.65s}
.fs-readout.r3{bottom:18%;left:6%;width:142px;transition-delay:.8s}
.fs-readout.r4{bottom:14%;right:6%;width:168px;transition-delay:.95s}
@media(max-width:1100px){.fs-readout{display:none}}

/* Count-up animation: numbers tick in */
.cine-count{font-variant-numeric:tabular-nums}

/* ─── FULL-STACK STICKY-SCROLL CINEMATOGRAPHY ───────── */
.fullstack-sec.cine-pinned{position:relative;overflow:visible}
.fullstack-cine{position:relative;height:380vh}
.fullstack-cine-pin{
  position:absolute;top:0;left:0;right:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* PERF: will-change moved to .is-fixed only — a permanent layer here blurred
     the big pinned headline text and leaked GPU memory. */
}
.fullstack-cine-pin.is-fixed{position:fixed;top:0;left:0;right:0;will-change:transform}
.fullstack-cine-pin.is-bottom{position:absolute;top:auto;bottom:0}
.fullstack-cine-stage{
  position:relative;width:100%;max-width:1100px;padding:0 52px;
  text-align:center;
}
.fullstack-cine-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(33,230,138,.7);margin-bottom:24px;
}
.fullstack-cine-h{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,5.5vw,72px);letter-spacing:1.2px;line-height:.95;
  margin-bottom:48px;color:#EAF0FF;
}
.fullstack-cine-h .green{color:#21E68A}
.fs-cine-pillars{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap}
.fs-cine-pillar{
  position:relative;flex:1;min-width:180px;max-width:230px;
  padding:34px 22px 28px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.008));
  border:1px solid rgba(234,240,255,.07);border-radius:14px;
  opacity:0;transform:translateY(60px) scale(.94);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;
}
.fs-cine-pillar.live{opacity:1;transform:translateY(0) scale(1);box-shadow:0 22px 60px -28px rgba(0,0,0,.85)}
.fs-cine-pillar.spot{border-color:rgba(33,230,138,.4);box-shadow:0 22px 80px -22px rgba(33,230,138,.25)}
.fs-cine-pillar .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(33,230,138,.85);letter-spacing:.2em;display:block;margin-bottom:12px}
.fs-cine-pillar .t{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:.6px;line-height:1;color:#EAF0FF;margin-bottom:10px}
.fs-cine-pillar .d{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(234,240,255,.62);line-height:1.65}
.fs-cine-op{align-self:center;font-family:'Bebas Neue',sans-serif;font-size:40px;color:rgba(33,230,138,.4);opacity:0;transition:opacity .7s}
.fs-cine-op.live{opacity:1}
.fs-cine-pillar.result{border-color:rgba(33,230,138,.55);background:linear-gradient(150deg,rgba(33,230,138,.12),rgba(255,255,255,.014))}
.fs-cine-pillar.result .n,.fs-cine-pillar.result .t{color:#21E68A}
.fs-cine-finale{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.85);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,12vw,200px);
  letter-spacing:2px;line-height:.9;color:#21E68A;
  text-shadow:0 0 70px rgba(33,230,138,.6);
  opacity:0;pointer-events:none;
  transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.fs-cine-finale.live{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fs-cine-finale .sub{display:block;font-size:.18em;letter-spacing:.5em;color:rgba(234,240,255,.7);text-shadow:none;margin-top:14px;text-transform:uppercase}
@media(max-width:760px){
  .fullstack-cine{height:auto}
  .fullstack-cine-pin{position:relative;height:auto;padding:80px 0}
  .fs-cine-pillar{opacity:1;transform:none}
  .fs-cine-op{opacity:1}
  .fs-cine-finale{position:relative;left:auto;top:auto;transform:none;opacity:1;font-size:80px;margin-top:60px}
}

/* ─── HERO READABILITY scrim (preserved from cinema-tune) */
.hero-inner{position:relative;z-index:5}
.hero-inner::before{
  content:"";position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:130%;height:130%;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,
    rgba(7,10,15,.55) 0%,
    rgba(7,10,15,.35) 40%,
    transparent 75%);
  pointer-events:none;z-index:-1;
  filter:blur(2px);
}
.hero-h1{position:relative;z-index:2;text-shadow:0 0 30px rgba(7,10,15,.95),0 0 12px rgba(7,10,15,.95)}
.hero-h1 .green{text-shadow:0 0 24px rgba(33,230,138,.4),0 0 12px rgba(7,10,15,.95)}
.hero-body{position:relative;z-index:2;text-shadow:0 0 14px rgba(7,10,15,.9)}
.hero-btns{position:relative;z-index:3}

/* ─── REVEAL animation for .rv / .cine-scene ────────── */
.cine-scene{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.cine-scene.cine-in{opacity:1;transform:translateY(0)}

/* Track-in animation removed — was misfiring as a "popup attempt".
   The hero is visible immediately after cold open dismisses. */

/* ─── TOUR CHOICE MODAL — appears after hero settles ─── */
/* Non-blocking floating banner — bottom of hero, doesn't cover the headline */
.cine-choice{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(120%);
  z-index:9700;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s;
  opacity:0;
}
.cine-choice.live{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.cine-choice-card{
  position:relative;
  background:linear-gradient(165deg,rgba(13,18,25,.96),rgba(7,10,15,.98));
  border:1px solid rgba(33,230,138,.32);
  border-radius:14px;
  padding:18px 20px 16px 22px;
  max-width:560px;width:calc(100vw - 60px);
  display:flex;align-items:center;gap:18px;
  box-shadow:0 20px 60px -15px rgba(0,0,0,.7),0 0 40px rgba(33,230,138,.15);
}
.cine-choice-card > .text-block{flex:1;min-width:0;text-align:left}
@media(max-width:760px){
  .cine-choice{bottom:84px}
  .cine-choice-card{flex-direction:column;align-items:stretch;gap:12px;padding:16px 18px}
  .cine-choice-card > .text-block{text-align:center}
}
.cine-choice-card::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:60%;
  background:linear-gradient(180deg,transparent,#21E68A,transparent);
  transform:translateY(-50%);border-radius:2px;box-shadow:0 0 12px rgba(33,230,138,.5);
}
.cine-choice-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:#21E68A;margin-bottom:4px;
  display:flex;align-items:center;gap:8px;
}
.cine-choice-eyebrow .pulse{
  width:5px;height:5px;border-radius:50%;background:#21E68A;
  box-shadow:0 0 8px rgba(33,230,138,.7);
  animation:cineCoPulse 1.4s infinite;
}
.cine-choice-h{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:15px;line-height:1.3;
  color:#EAF0FF;margin-bottom:0;
}
.cine-choice-h .green{color:#21E68A}
.cine-choice-p{display:none}
.cine-choice-btns{
  display:flex;gap:8px;flex-shrink:0;
}
.cine-choice-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Syne',sans-serif;font-weight:700;font-size:12px;
  padding:10px 14px;border-radius:7px;cursor:pointer;
  text-decoration:none;border:1px solid transparent;
  transition:all .25s;white-space:nowrap;
}
.cine-choice-btn.primary{
  background:#21E68A;color:#070A0F;
  box-shadow:0 0 32px rgba(33,230,138,.28);
}
.cine-choice-btn.primary:hover{background:#fff;box-shadow:0 0 56px rgba(33,230,138,.45);transform:translateY(-2px)}
.cine-choice-btn.ghost{
  background:transparent;color:rgba(234,240,255,.8);
  border-color:rgba(234,240,255,.16);
}
.cine-choice-btn.ghost:hover{border-color:rgba(33,230,138,.4);color:#21E68A;background:rgba(33,230,138,.05)}
.cine-choice-btn .ico{font-size:16px}
.cine-choice-meta{display:none}
.cine-choice-x{
  position:absolute;top:8px;right:10px;
  background:transparent;border:none;cursor:pointer;
  color:rgba(234,240,255,.4);font-size:14px;line-height:1;
  padding:4px 8px;border-radius:6px;
  transition:color .2s,background .2s;
}
.cine-choice-x:hover{color:#EAF0FF;background:rgba(234,240,255,.06)}
@media(max-width:600px){
  .cine-choice-card{padding:36px 26px 30px}
  .cine-choice-btns{flex-direction:column;width:100%}
  .cine-choice-btn{width:100%;justify-content:center}
}

/* Tour overlay — visible while auto-tour is running */
.cine-tour-status{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:9600;
  background:rgba(7,10,15,.92);
  border:1px solid rgba(33,230,138,.32);
  border-radius:30px;
  padding:9px 18px 9px 14px;
  display:none;align-items:center;gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(234,240,255,.8);
  box-shadow:0 12px 40px -10px rgba(0,0,0,.6),0 0 20px rgba(33,230,138,.1);
}
body.tour-running .cine-tour-status{display:inline-flex}

/* Progress bar — thin green line at top of viewport, fills with tour progress */
.cine-tour-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9700;
  background:rgba(33,230,138,.08);
  display:none;
}
body.tour-running .cine-tour-progress{display:block}
.cine-tour-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#21E68A,#7af0b6);
  box-shadow:0 0 12px rgba(33,230,138,.6),0 0 4px rgba(33,230,138,.9);
  transition:width 1s cubic-bezier(.4,0,.2,1);
}

/* UP NEXT tease card — flashes briefly between section transitions */
.cine-tour-tease{
  position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);
  z-index:9650;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transition:opacity .35s;
}
.cine-tour-tease.flash{opacity:1;animation:cineTeaseIn 1.2s cubic-bezier(.4,0,.3,1)}
@keyframes cineTeaseIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.85);filter:blur(6px)}
  20%{opacity:1;filter:blur(0)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.05);filter:blur(4px)}
}
.cine-tour-tease .lbl{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:#21E68A;
}
.cine-tour-tease .text{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,46px);
  letter-spacing:1.5px;line-height:.96;color:#EAF0FF;
  text-shadow:0 0 30px rgba(0,0,0,.95),0 0 16px rgba(33,230,138,.4);
  text-align:center;max-width:80vw;
}
.cine-tour-status .pulse{
  width:7px;height:7px;border-radius:50%;background:#21E68A;
  box-shadow:0 0 10px rgba(33,230,138,.7);
  animation:cineCoPulse 1.4s infinite;
}
.cine-tour-status .grn{color:#21E68A;font-weight:500}
.cine-tour-stop{
  margin-left:6px;padding:3px 10px;border-radius:14px;
  background:transparent;border:1px solid rgba(234,240,255,.16);
  color:rgba(234,240,255,.6);cursor:pointer;
  font-family:inherit;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  transition:all .2s;
}
.cine-tour-stop:hover{color:#EAF0FF;border-color:rgba(234,240,255,.4)}
@media(max-width:600px){.cine-tour-status{bottom:84px;font-size:9px;padding:7px 14px 7px 12px}}

/* HUD trim: hide timecode + dev-console readouts (was clutter) */
.cine-timecode,.cine-hud-readout.tl,.cine-hud-readout.bl{display:none!important}

/* ─── DIEGETIC TIMECODE — film-editor display ─────── */
.cine-timecode{
  position:fixed;top:74px;left:24px;
  z-index:9450;pointer-events:none;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.18em;
  color:rgba(33,230,138,.55);
  background:rgba(0,0,0,.45);
  border:1px solid rgba(33,230,138,.14);
  padding:4px 9px;border-radius:2px;
  opacity:0;transition:opacity 1s ease-out 1.4s;
}
body.cine-hud-on .cine-timecode{opacity:1}
.cine-timecode .lbl{color:rgba(234,240,255,.34);margin-right:6px}
.cine-timecode .val{color:#21E68A;font-variant-numeric:tabular-nums}
@media(max-width:760px){.cine-timecode{display:none}}

/* ─── REC indicator pulses red (diegetic) ──────────── */
.cine-hud-readout .rec-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#EF4444;
  box-shadow:0 0 8px rgba(239,68,68,.7);
  margin-right:6px;
  animation:cineRecPulse 1.4s ease-in-out infinite;
  vertical-align:-1px;
}
@keyframes cineRecPulse{
  0%,100%{box-shadow:0 0 8px rgba(239,68,68,.7);opacity:1}
  50%{box-shadow:0 0 18px rgba(239,68,68,1);opacity:.55}
}

/* ─── BREATHING VIGNETTE — atmospheric ─────────────── */
/* Vignette — gated behind body.cinema-on (audit P2: filter animation forced
   full-screen repaint at 60fps, single biggest perf hit). */
.cine-vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 115% 95% at 50% 50%,
    transparent 55%,
    rgba(0,0,0,.20) 88%,
    rgba(0,0,0,.55) 100%);
  opacity:0;transition:opacity 1s ease-out;
  display:none;
}
body.cinema-on .cine-vignette{display:block;animation:cineVignetteBreath 14s ease-in-out infinite 2s}
body.cine-hud-on.cinema-on .cine-vignette{opacity:.85}
@keyframes cineVignetteBreath{
  0%,100%{filter:saturate(1) brightness(1)}
  50%{filter:saturate(1) brightness(.93)}
}

/* ─── CAMERA SHAKE on keymoment ─────────────────────── */
body.cine-keymoment-shake{animation:cineShake .42s steps(8)}
@keyframes cineShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(2px,-1px)}
  40%{transform:translate(-2px,1px)}
  60%{transform:translate(1px,1px)}
  80%{transform:translate(-1px,-1px)}
}

/* ─── FILM GRAIN — 35mm look ──────────────────────── */
/* Film grain — gated behind body.cinema-on (audit P3: mix-blend-overlay on
   fullscreen layer was the most expensive blend mode, full-viewport recompose every frame). */
.cine-grain{
  position:fixed;inset:-2%;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.10;mix-blend-mode:overlay;
  display:none;
}
body.cinema-on .cine-grain{display:block;animation:cineGrainShift 2.4s steps(6) infinite}
@keyframes cineGrainShift{
  0%{transform:translate(0,0)}
  17%{transform:translate(-1%,1%)}
  34%{transform:translate(1%,-1%)}
  51%{transform:translate(-1%,-1%)}
  68%{transform:translate(1%,1%)}
  85%{transform:translate(0,1%)}
  100%{transform:translate(0,0)}
}

/* ─── LIGHT LEAKS — hero corners ────────────────────── */
.hero::before{
  content:"";position:absolute;top:-12%;left:-8%;
  width:55%;height:55%;
  background:radial-gradient(ellipse 60% 50% at 30% 30%,
    rgba(33,230,138,.18) 0%,
    rgba(33,230,138,.05) 35%,
    transparent 65%);
  pointer-events:none;z-index:0;
  filter:blur(20px);mix-blend-mode:screen;
}
.hero .leak-2{
  position:absolute;bottom:-10%;right:-10%;
  width:50%;height:55%;
  background:radial-gradient(ellipse 65% 55% at 70% 70%,
    rgba(80,180,255,.10) 0%,
    rgba(80,180,255,.03) 40%,
    transparent 70%);
  pointer-events:none;z-index:0;
  filter:blur(28px);mix-blend-mode:screen;
}

/* ─── FOOTER CREDITS ROLL (end-credits feel) ────────── */
.cine-credits{
  position:relative;z-index:2;
  border-top:1px solid rgba(33,230,138,.15);
  background:rgba(0,0,0,.55);
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(234,240,255,.42);
  padding:14px 0;
}
.cine-credits-track{
  display:flex;white-space:nowrap;
  animation:cineCreditsRoll 64s linear infinite;
  animation-play-state:paused;  /* paused unless credits in view */
  will-change:transform;
}
.cine-credits.in-view .cine-credits-track{animation-play-state:running}
.cine-credits-item{padding:0 36px;display:inline-flex;align-items:center;gap:18px}
.cine-credits-item::after{content:"·";opacity:.4;margin-left:18px;color:#21E68A}
.cine-credits-item .grn{color:#21E68A;font-weight:500}
@keyframes cineCreditsRoll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── HERO PARALLAX (CSS class, JS sets the offset) ─── */
/* PERF: will-change removed — permanent compositor layer leaked memory; the
   parallax only nudges CSS vars during mousemove, no permanent layer needed. */
.hero-bg{}
.hero-bg.parallax{transform:translate3d(var(--px,0px), var(--py,0px), 0)}

/* ─── REDUCED MOTION ────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #cine-cold-open,.cine-co-mark,.cine-co-tag,.cine-co-skip,.cine-co-ring,.cine-co-cross,.cine-co-scan{display:none!important}
  body.cine-cold-locked{overflow:auto!important;height:auto!important}
  /* BUG#9: reduced-motion also kills the breathing vignette (was omitted). */
  .cine-card-drop,.cine-flash,.cine-wipe,.cine-card-scrim,.cine-grain,.cine-vignette,.cine-credits-track{display:none!important;animation:none!important}
  .fullstack-cine{height:auto}
  .fullstack-cine-pin{position:relative;height:auto}
  .fs-cine-pillar{opacity:1;transform:none}
}
/* BUG#9: on phones, freeze the heavy full-viewport grain + breathing vignette
   (mix-blend/filter animations) so enabling the tour doesn't stutter scroll. */
@media(max-width:760px){
  body.cinema-on .cine-grain,body.cinema-on .cine-vignette{animation:none!important}
}