.cinematic-track{height:430vh;position:relative;background:#010207}.cinematic-stage{position:absolute;inset:0 auto auto 0;width:100%;height:100vh;overflow:hidden;background:#010207;z-index:2}.cinematic-stage.pinned{position:fixed;inset:0}.cinematic-stage.ended{position:absolute;top:auto;bottom:0}.hero-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.08) 55%,rgba(0,0,0,.22))}.hero-copy{position:absolute;z-index:5;left:7vw;top:50%;transform:translateY(-50%);max-width:620px}.hero-copy span{font:700 10px/1 monospace;letter-spacing:.22em;color:#9bdcff}.hero-copy h1{font-size:clamp(54px,7.2vw,116px);line-height:.82;letter-spacing:-.07em;margin:18px 0 22px}.hero-copy h1 em{font-style:normal;color:var(--blue)}.hero-copy p{color:#bdc7d1;font-size:17px}.scroll-cue{position:absolute;z-index:5;bottom:28px;left:50%;transform:translateX(-50%);font:700 9px/1 monospace;letter-spacing:.2em;color:#9ca8b4}.hero-phrase{position:absolute;z-index:6;left:7vw;top:52%;font-size:clamp(26px,3.3vw,56px);font-weight:700;letter-spacing:-.04em;opacity:0}.screen-bridge{position:absolute;z-index:7;inset:0;opacity:0;background:#02070d;clip-path:inset(12% 15% 12% 14%);overflow:hidden}.bridge-grid,.space-grid{position:absolute;inset:-30%;background-image:linear-gradient(rgba(75,192,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(75,192,255,.08) 1px,transparent 1px);background-size:48px 48px;transform:perspective(800px) rotateX(62deg) translateY(20%)}.bridge-lines{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(66,196,255,.18),transparent 40%)}
.hero-phrase{left:50%!important;top:50%!important;width:min(900px,88vw)!important;transform:translate(-50%,-50%)!important;text-align:center!important;display:flex;flex-direction:column;align-items:center;gap:8px;text-shadow:0 12px 50px #000}
.hero-phrase:before{content:"";position:absolute;left:50%;top:50%;width:120%;height:220%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,0,0,.38),transparent 68%);z-index:-1}
.phrase-kicker{font:700 10px/1 monospace;letter-spacing:.35em;color:#8e9dab}
.hero-phrase strong{font-size:clamp(36px,5.6vw,88px);line-height:.9;letter-spacing:-.055em;color:#f6f9fc}
.phrase-accent{font-size:clamp(36px,5.6vw,88px);line-height:.9;font-weight:800;letter-spacing:-.055em;color:#5acbff;text-shadow:0 0 40px rgba(90,203,255,.25)}

/* FINAL SCREEN -> DIGITAL WORLD TRANSITION */
.screen-bridge{
  background:
    radial-gradient(circle at 50% 48%,rgba(66,196,255,.14),transparent 26%),
    linear-gradient(180deg,#02070d,#010306)!important;
  will-change:opacity,clip-path,transform,filter;
  transform-origin:50% 50%;
}
.bridge-grid{
  inset:-45%!important;
  background-size:52px 52px!important;
  transform:perspective(760px) rotateX(64deg) translateY(24%) scale(1.05);
  transform-origin:50% 48%;
  animation:bridgeGridDrift 2.2s linear infinite;
  opacity:.72;
}
.bridge-lines{
  background:
    radial-gradient(circle at 50% 48%,rgba(80,207,255,.22),transparent 22%),
    repeating-linear-gradient(90deg,transparent 0 9.7%,rgba(89,202,246,.035) 10%,transparent 10.3%)!important;
}
.bridge-scan{position:absolute;z-index:3;left:0;right:0;top:-8%;height:8%;background:linear-gradient(180deg,transparent,rgba(112,220,255,.26),transparent);filter:blur(3px);opacity:.75;animation:bridgeScan 1.45s linear infinite}
.bridge-flash{position:absolute;z-index:4;inset:0;background:#9de6ff;mix-blend-mode:screen;opacity:0;pointer-events:none}
.bridge-breach{position:absolute;z-index:6;left:50%;top:49%;width:min(900px,86vw);transform:translate(-50%,-50%) scale(.92);text-align:center;opacity:0;filter:blur(8px)}
.bridge-breach span,.bridge-breach small{display:block;font:700 9px/1.2 monospace;letter-spacing:.22em;color:#6ebfe2}
.bridge-breach strong{display:block;margin:20px 0 23px;font-size:clamp(48px,7.4vw,116px);line-height:.78;letter-spacing:-.075em;color:#eefaff}
.bridge-breach strong em{font-style:normal;color:#5acbff;text-shadow:0 0 50px rgba(90,203,255,.35)}
.bridge-breach small{color:#607d8c}
.bridge-crosshair{position:absolute;z-index:5;left:50%;top:50%;width:min(72vw,1000px);height:min(52vh,520px);transform:translate(-50%,-50%);border:1px solid rgba(90,203,255,.08);opacity:0}
.bridge-crosshair:before,.bridge-crosshair:after{content:"";position:absolute;background:rgba(90,203,255,.18)}.bridge-crosshair:before{width:1px;height:140%;left:50%;top:-20%}.bridge-crosshair:after{height:1px;width:120%;left:-10%;top:50%}
.bridge-crosshair i,.bridge-crosshair b{position:absolute;width:22px;height:22px;border-color:#5acbff;opacity:.65}.bridge-crosshair i{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}.bridge-crosshair b{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
@keyframes bridgeGridDrift{to{background-position:0 52px,52px 0}}
@keyframes bridgeScan{to{top:108%}}

/* FINAL MASTER: portal is visual, never explanatory */
.bridge-breach{display:none!important}
.screen-bridge:after{content:"";position:absolute;z-index:5;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:#c6f2ff;box-shadow:0 0 18px #7ddcff,0 0 55px #55c8f8,0 0 130px rgba(75,199,248,.7);animation:portalPulse .9s ease-in-out infinite alternate}
@keyframes portalPulse{to{transform:translate(-50%,-50%) scale(1.7);opacity:.72}}

/* KLING 3.0 MONITOR BREACH — FINAL */
.video-bridge{background:#010306!important;overflow:hidden!important;filter:none!important}
.breach-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;transform:scale(1.002);will-change:transform}
.breach-end-glow{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(99,215,255,.22),transparent 28%);opacity:0}
.video-bridge:after{display:none!important}
.video-bridge .bridge-grid,.video-bridge .bridge-lines,.video-bridge .bridge-scan,.video-bridge .bridge-flash,.video-bridge .bridge-crosshair{display:none!important}

/* FINAL HANDOFF: breach -> capabilities, no intermediate void/grid scene */
.breach-end-glow{display:none!important}
.video-bridge{background:#010306!important}

/* Hero yields its viewport to the capability world during the final breach. */
.cinematic-stage{transition:none!important}
.screen-bridge{z-index:40!important}

/* Hero stays above the overlapped next chapter until the breach crossfade */
.hero-track{position:relative;z-index:20!important}
.cinematic-stage,.world-sticky{z-index:30!important}
.screen-bridge{z-index:50!important}

/* true composited handoff: monitor can dissolve to the fixed capability stage below */
.cinematic-stage{background:transparent!important}

.cinematic-stage{pointer-events:none!important}

.hero-copy p {
  max-width: 620px;
  margin-top: 28px;
  line-height: 1.6;
}

.hero-copy p small {
  display: block;
  margin-top: 10px;

  font-size: 0.88em;
  line-height: 1.65;
  font-weight: 400;

  opacity: 0.68;
}