/* PROJECT ABYSS ULTIMATE 3D / styles for actual WebGL2 scenes, not video simulations. */
.cinema-backdrop video{display:none!important}
.abyss-3d-canvas{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;touch-action:pan-y;opacity:0;transition:opacity .6s ease}
.abyss-3d-canvas.abyss-ready{opacity:1}
.abyss-3d-canvas.abyss-unavailable{display:none}
.cinema-scene .cinema-backdrop{background-color:#05121b}
.cinema-scene .cinema-vignette{pointer-events:none}
.cinema-hud span:nth-child(2){padding:6px 8px;background:#041b26b9;border:1px solid #55b9c432}
.cinema-live{animation:none;box-shadow:0 0 16px #1195a425}
.cinema-webgl-ready .cinema-tag,.abyss-webgl-ready .cinema-tag{color:#9af9ed}
.cinema-webgl-ready .cinema-live{border-color:#55bba3}
.abyss-render-controls{position:fixed;bottom:14px;left:14px;right:14px;z-index:90;display:flex;align-items:end;justify-content:space-between;pointer-events:none;gap:10px}
.abyss-render-controls .abyss-motion-toggle{position:static;bottom:auto;right:auto;pointer-events:auto;box-shadow:0 12px 25px #0009}
.abyss-quality{display:flex;flex-direction:column;gap:5px;pointer-events:auto;background:#051720db;border:1px solid #78d1db63;color:#9bc2ce;padding:6px 9px;font:9px/1.4 var(--mono,monospace);letter-spacing:.14em;backdrop-filter:blur(12px)}
.abyss-quality select{appearance:auto;background:#071e2a;border:0;color:#e7fbff;font:11px/1.3 var(--mono,monospace);padding:2px 1px;min-width:96px;cursor:pointer}
.abyss-quality select:focus-visible{outline:2px solid #9af3e8}
.abyss-fps{position:absolute;left:0;bottom:61px;padding:4px 7px;font:10px var(--mono,monospace);letter-spacing:.08em;background:#05131cca;color:#a9ced7;border-left:2px solid #67dacc;pointer-events:none}
.abyss-fps b{font-weight:600;color:#e8fffc}
.abyss-descent{height:350vh;position:relative;background:#020b13;color:#eafaff}
.abyss-descent-stick{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate}
.abyss-descent-backdrop{position:absolute;inset:0;z-index:-3;background:#03121e}
.abyss-descent-backdrop .abyss-3d-canvas{position:absolute;inset:0;width:100%;height:100%}
.abyss-descent-stick:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(1,10,17,.72),transparent 65%),linear-gradient(0deg,rgba(0,6,13,.65),transparent 28%,rgba(0,7,14,.19))}
.abyss-descent-overlay{position:absolute;inset:0;padding:clamp(25px,5vw,68px);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.abyss-descent-top{display:flex;justify-content:space-between;gap:18px;color:#b7e4e8;font:11px var(--mono,monospace);letter-spacing:.13em}
.abyss-descent-center{width:min(820px,80vw);margin:auto 0;max-width:820px;text-shadow:0 4px 20px #000}
.abyss-descent-center .dive-label{color:#82e8e1;font:13px var(--mono,monospace);letter-spacing:.18em}
.abyss-descent-center h2{font-weight:800;font-size:clamp(62px,8vw,144px);line-height:.88;letter-spacing:-.03em;margin:20px 0 29px}
.abyss-descent-center h2 em{font-style:normal;color:#6de2ef}
.abyss-descent-center p{font-size:clamp(14px,1.4vw,18px);max-width:500px;line-height:1.6;color:#c8e4e9}
.abyss-depth-instruments{position:absolute;right:clamp(25px,5vw,68px);bottom:clamp(46px,7vh,86px);display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right;text-shadow:0 2px 18px #0009;font:11px var(--mono,monospace)}
.abyss-depth-instruments>div:not(.depth-bar){display:flex;flex-direction:column;gap:4px}
.abyss-depth-instruments small{color:#8fc4cc;letter-spacing:.13em}
.abyss-depth-instruments strong{font-size:clamp(18px,2vw,29px);font-weight:700;color:#a5f9f8;letter-spacing:.08em}
.depth-bar{position:absolute;right:-16px;bottom:0;width:5px;height:180px;background:#83e8ea26;border:1px solid #83e8ea55;overflow:hidden}
.depth-bar i{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(0deg,#ec9a54,#2ad9e3);box-shadow:0 0 15px #3de0e9}
.abyss-descent-index{font:10px var(--mono,monospace);color:#87b0b9;letter-spacing:.15em}
@media(max-width:800px){
 .abyss-render-controls{bottom:8px;left:8px;right:8px;gap:6px}
 .abyss-render-controls .abyss-motion-toggle{font-size:8px;padding:10px}
 .abyss-quality{padding:4px 6px}
 .abyss-quality select{font-size:10px;min-width:76px}
 .abyss-fps{font-size:9px;bottom:57px}
 .abyss-descent-stick{min-height:100svh}
 .abyss-descent-overlay{padding:27px 22px 90px}
 .abyss-descent-top{font-size:9px}
 .abyss-descent-top span:last-child{display:none}
 .abyss-descent-center{width:95%;margin:26vh 0 auto}
 .abyss-descent-center h2{font-size:clamp(48px,12.5vw,86px);margin:16px 0}
 .abyss-descent-center p{font-size:13px;max-width:310px}
 .abyss-depth-instruments{bottom:112px;right:35px;gap:6px}
 .abyss-depth-instruments strong{font-size:17px}
 .depth-bar{height:110px;right:-12px}
 .abyss-descent-index{bottom:35px;position:absolute;left:23px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .abyss-3d-canvas{transition:none}
 html:not(.abyss-motion-on) .cinema-live{animation:none}
 html:not(.abyss-motion-on) .abyss-reveal{opacity:1;transform:none}
}
 
/* V2: a single compositor. Posters exist ONLY after an explicit WebGL failure.
   Never put a legacy image beneath a working canvas or allow it to flash on first paint. */
.cinema-scene, .cinema-scene .cinema-backdrop,
.abyss-descent, .abyss-descent-backdrop,
.abyss-motion-off .cinema-scene,
.abyss-motion-off .cinema-backdrop {background-image:none!important}
.cinema-scene{background:#04111a!important}
.cinema-scene .cinema-backdrop{background:#061621!important;z-index:-4}
.abyss-descent-backdrop{background:#03121e!important}
.abyss-3d-canvas{opacity:0;transition:none;visibility:hidden}
.abyss-3d-canvas.abyss-ready{opacity:1;visibility:visible}
.cinema-scene.abyss-webgl-failed .cinema-backdrop,
.abyss-descent.abyss-webgl-failed .abyss-descent-backdrop{
  background-color:#06131b!important;background-position:center!important;
  background-size:cover!important;background-repeat:no-repeat!important;
}
.cinema-offshore.abyss-webgl-failed .cinema-backdrop{background-image:url('../assets/concept-offshore-fallback.webp')!important}
.cinema-leviathan.abyss-webgl-failed .cinema-backdrop{background-image:url('../assets/leviathan-lab-poster.webp')!important}
.abyss-descent.abyss-webgl-failed .abyss-descent-backdrop{background-image:url('../assets/concept-submersible.webp')!important}
.cinema-scene.abyss-webgl-ready .cinema-backdrop,
.abyss-descent.abyss-webgl-ready .abyss-descent-backdrop {background-image:none!important}
.abyss-3d-canvas:focus{outline:none}

.abyss-webgl-failed .cinema-live{
 color:#f0be92;border-color:#b483596c;box-shadow:none;animation:none;
}
.abyss-webgl-failed .cinema-live:before{content:"";box-shadow:none}