/* Five distinct cinematic art directions. Visual preview is presentation only. */
.drop26-hero{position:relative;overflow:hidden;isolation:isolate}
.cx-stage-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;font-family:Consolas,monospace}
.cx-stage-scene>div{position:absolute}
.cx-stage-heading{font-family:Consolas,monospace;margin:14px 0 16px;display:flex;flex-direction:column;gap:5px}
.cx-stage-heading strong{font-size:clamp(19px,3vw,35px);letter-spacing:.035em;line-height:1.1}
.cx-stage-heading span{font-size:10px;letter-spacing:.22em;font-weight:800}
.cx-phase-index{right:24px;top:22px;color:#aeb2ae;font-size:11px;letter-spacing:.16em}
.cx-cctv{inset:22px 24px auto;display:flex;justify-content:space-between;color:#a4ffbf;font-size:12px;letter-spacing:.13em;opacity:0}
.cx-cctv span:last-child{color:#ff4c56}
.cx-crosshair{width:150px;height:150px;left:58%;top:34%;border:1px solid #a4ffbf88;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
.cx-crosshair:before,.cx-crosshair:after{content:"";position:absolute;background:#a4ffbf88}
.cx-crosshair:before{height:1px;width:210px;top:50%;left:-30px}
.cx-crosshair:after{width:1px;height:210px;left:50%;top:-30px}
.cx-target-ring{width:36vw;height:36vw;max-width:580px;max-height:580px;border:2px dashed #f24a58;border-radius:50%;right:3%;top:12%;opacity:0}
.cx-alert{right:4%;top:20%;color:#fff;background:#c81c29;padding:12px 16px;font-size:14px;font-weight:900;letter-spacing:.18em;opacity:0}
.cx-grid{inset:0;opacity:0;background:linear-gradient(#ff313115 1px,transparent 1px),linear-gradient(90deg,#ff313115 1px,transparent 1px);background-size:44px 44px}
.cx-sweep{width:35%;height:220%;top:-60%;left:-50%;background:linear-gradient(90deg,transparent,#ff283826,transparent);transform:rotate(20deg);opacity:0}
.cx-rupture{inset:0;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 14%,#ff243c18 14.1% 14.5%,transparent 15% 21%)}
.cx-frame-corner{width:48px;height:48px;border:0 solid #a4ffbf;opacity:0}
.cx-tl{top:38px;left:38px;border-width:3px 0 0 3px}
.cx-tr{top:38px;right:38px;border-width:3px 3px 0 0}
.cx-bl{bottom:38px;left:38px;border-width:0 0 3px 3px}
.cx-br{bottom:38px;right:38px;border-width:0 3px 3px 0}
.cx-reveal-word{right:5%;bottom:12%;font:clamp(50px,7vw,110px)/.9 Impact,sans-serif;text-align:right;color:#ff3542;opacity:0;text-shadow:0 0 40px #f003}
body[data-cx-scene=dead] .drop26-hero-art{filter:grayscale(1) brightness(.13) contrast(1.5)!important;transform:scale(1.16)!important}
body[data-cx-scene=dead] .drop26-hero-shade{background:linear-gradient(90deg,#000 0%,#000e 50%,#000a 100%)!important}
body[data-cx-scene=dead] .cx-stage-heading{color:#c5c5c5}
body[data-cx-scene=dead] .drop26 h1{color:#aaa;text-shadow:2px 2px #222}
body[data-cx-scene=dead] .cz-scanlines{opacity:.45!important}
body[data-cx-scene=cctv] .drop26-hero-art{filter:grayscale(1) sepia(.75) hue-rotate(75deg) saturate(2.2) brightness(.47) contrast(1.6)!important;transform:scale(1.1)!important}
body[data-cx-scene=cctv] .drop26-hero-shade{background:linear-gradient(90deg,#000f 0%,#00170ee0 42%,#002c2044 100%)!important}
body[data-cx-scene=cctv] .cx-cctv,body[data-cx-scene=cctv] .cx-crosshair,body[data-cx-scene=cctv] .cx-frame-corner{opacity:1}
body[data-cx-scene=cctv] .cx-crosshair{animation:cxSearch 6s ease-in-out infinite}
body[data-cx-scene=cctv] .cx-stage-heading{color:#8dffc4}
body[data-cx-scene=cctv] .drop26-pill{border-color:#5fbd8c;color:#9dffc2}
body[data-cx-scene=classified] .drop26-hero-art{filter:grayscale(.7) contrast(1.3) brightness(.6)!important;transform:scale(1.035)!important}
body[data-cx-scene=classified] .drop26-hero-shade{background:linear-gradient(90deg,#080808f7 0%,#171717c4 44%,#0d0d0d1c 100%)!important}
body[data-cx-scene=classified] .cx-target-ring,body[data-cx-scene=classified] .cx-grid{opacity:.75}
body[data-cx-scene=classified] .cx-target-ring{animation:cxSpin 32s linear infinite}
body[data-cx-scene=classified] .cx-stage-heading{color:#f5e8e6}
body[data-cx-scene=classified] .cx-alert{opacity:1;background:#8c2228;font-size:10px}
body[data-cx-scene=breach] .drop26-hero-art{filter:saturate(2) contrast(1.45) brightness(.8)!important;transform:scale(1.055)!important}
body[data-cx-scene=breach] .drop26-hero-shade{background:linear-gradient(90deg,#120002f5 0%,#43030baf 50%,#f0000010 100%)!important}
body[data-cx-scene=breach] .cx-grid,body[data-cx-scene=breach] .cx-alert,body[data-cx-scene=breach] .cx-sweep,body[data-cx-scene=breach] .cx-rupture{opacity:1}
body[data-cx-scene=breach] .cx-sweep{animation:cxSweep 2.5s linear infinite}
body[data-cx-scene=breach] .cx-rupture{animation:cxStatic .4s steps(2) infinite}
body[data-cx-scene=breach] .cx-stage-heading{color:#ff3f50}
body[data-cx-scene=breach] .drop26 h1{animation:cxJitter 2.7s infinite}
body[data-cx-scene=takeover] .drop26-hero-art{filter:contrast(1.18) saturate(1.25) brightness(1.15)!important;transform:scale(1)!important}
body[data-cx-scene=takeover] .drop26-hero-shade{background:linear-gradient(90deg,#060606f0 0%,#1403079a 38%,#00000005 100%)!important}
body[data-cx-scene=takeover] .cx-reveal-word{opacity:.9}
body[data-cx-scene=takeover] .cx-stage-heading{color:#b7ff00}
body[data-cx-scene=takeover] .cx-grid{opacity:.25}
body[data-cx-scene=takeover] .drop26-pill{background:#b7ff00;color:#000;border-color:#b7ff00}
@keyframes cxSearch{0%,100%{transform:translate(-60%,-50%)}50%{transform:translate(-25%,-30%)}}
@keyframes cxSpin{to{transform:rotate(360deg)}}
@keyframes cxSweep{to{left:140%}}
@keyframes cxStatic{0%{transform:translateX(0)}50%{transform:translateX(12px)}100%{transform:translateX(-8px)}}
@keyframes cxJitter{0%,92%,100%{transform:none}93%{transform:translateX(4px)}94%{transform:translateX(-3px)}95%{transform:none}}
@media(max-width:800px){
.cx-cctv{top:18px;left:12px;right:12px;font-size:8px}
.cx-phase-index{top:45px;right:14px;font-size:9px}
.cx-frame-corner{width:22px;height:22px}
.cx-tl{top:65px;left:12px}.cx-tr{top:65px;right:12px}.cx-bl{bottom:18px;left:12px}.cx-br{bottom:18px;right:12px}
.cx-target-ring{width:68vw;height:68vw;right:15%;top:12%}
.cx-crosshair{top:24%;left:52%;width:90px;height:90px}
.cx-alert{top:15%;right:12px;font-size:9px;padding:8px}
.cx-reveal-word{right:14px;bottom:auto;top:17%;font-size:clamp(30px,9vw,60px)}
.cx-stage-heading{margin:10px 0}
.cx-stage-heading strong{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.cx-stage-scene *,.drop26 h1{animation:none!important;transition:none!important}}