/* PX CORTEX SURVEILLANCE v1: decorative hero-only effects. */
.command-hero.px-surveil-ready{isolation:isolate}
.px-surveil{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:layout paint;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;user-select:none}
.px-surveil::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(136,221,236,.015) 0 1px,transparent 1px 5px);opacity:.62;pointer-events:none}
.px-surveil__beacon{position:absolute;left:40%;right:0;top:0;height:3px;opacity:0;background:linear-gradient(90deg,transparent 2%,rgba(164,240,241,.2),rgba(179,244,245,.84),rgba(227,77,72,.8),transparent 86%);box-shadow:0 0 16px rgba(104,215,234,.25);transform:translateY(-6px)}
.px-surveil__beam{position:absolute;top:0;bottom:0;left:40%;width:60%;opacity:0;transform:translateY(-110%);background:linear-gradient(to bottom,transparent 0%,rgba(134,230,236,.02) 75%,rgba(134,230,236,.06) 91%,rgba(143,232,242,.32) 99.7%,transparent 100%);mix-blend-mode:screen}
.px-surveil__matrix{position:absolute;inset:0 0 0 43%;background:linear-gradient(90deg,transparent 0 19.7%,rgba(124,226,239,.11) 20%,transparent 20.25% 39.7%,rgba(124,226,239,.06) 40%,transparent 40.25% 59.7%,rgba(124,226,239,.08) 60%,transparent 60.25%),linear-gradient(0deg,transparent 0 19.7%,rgba(124,226,239,.055) 20%,transparent 20.3% 39.7%,rgba(124,226,239,.06) 40%,transparent 40.3% 59.7%,rgba(124,226,239,.06) 60%,transparent 60.3%);opacity:0}
.px-surveil__badge{position:absolute;right:4.1%;top:12%;display:flex;align-items:center;gap:9px;padding:7px 10px;color:#b1e4eb;font-size:9px;font-weight:600;text-shadow:0 1px 4px #020608;background:rgba(3,12,15,.54);border-left:2px solid rgba(153,239,244,.75);opacity:0;transform:translateY(6px)}
.px-surveil__badge::before{content:"";width:5px;height:5px;border-radius:50%;background:#a3eef2;box-shadow:0 0 10px #89fbfa}
.px-surveil__focus{position:absolute;left:calc(72% - 80px);top:calc(31% - 80px);width:160px;height:160px;opacity:0;transform:scale(1.16)}
.px-surveil__focus::before,.px-surveil__focus::after,.px-surveil__focus span::before,.px-surveil__focus span::after{content:"";position:absolute;width:23px;height:23px;border-color:#e6534e;border-style:solid;filter:drop-shadow(0 0 6px rgba(236,51,52,.4))}
.px-surveil__focus::before{left:0;top:0;border-width:2px 0 0 2px}.px-surveil__focus::after{right:0;top:0;border-width:2px 2px 0 0}.px-surveil__focus span::before{bottom:0;left:0;border-width:0 0 2px 2px}.px-surveil__focus span::after{bottom:0;right:0;border-width:0 2px 2px 0}
.px-surveil__focus-center{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border:1px solid rgba(237,94,90,.38);border-radius:50%}
.px-surveil__focus-center:before,.px-surveil__focus-center:after{content:"";position:absolute;background:#e2544e;opacity:.8}.px-surveil__focus-center:before{height:1px;width:17px;top:50%;left:50%;transform:translate(-50%,-50%)}.px-surveil__focus-center:after{height:17px;width:1px;top:50%;left:50%;transform:translate(-50%,-50%)}
.px-surveil__focus-label{position:absolute;top:calc(31% + 88px);left:calc(72% - 80px);width:160px;color:#eaa2a1;background:rgba(6,13,17,.75);padding:6px 7px;font-size:8px;text-align:center;border-top:1px solid rgba(216,73,70,.55);opacity:0}
.px-surveil__telemetry{position:absolute;right:4%;bottom:14%;display:flex;flex-direction:column;gap:4px;width:min(27vw,245px);color:#8cbdc7;font-size:8px;line-height:1.5;text-align:right;opacity:0;text-shadow:0 1px 4px #000}
.px-surveil__telemetry b{font-weight:500;color:#a7f0f0}.px-surveil__telemetry em{font-style:normal;color:#e67571}
.px-surveil__ruler{position:absolute;right:2%;top:28%;height:34%;width:10px;border-right:1px solid rgba(136,231,238,.5);background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(152,226,231,.6) 18px 19px,transparent 20px 23px);opacity:0}
.px-surveil__small{position:absolute;left:47%;bottom:15%;font-size:7px;color:rgba(167,220,230,.64);opacity:0}
.px-surveil-toggle{position:absolute;right:4%;top:18px;z-index:5;display:flex;align-items:center;gap:6px;cursor:pointer;border:1px solid rgba(130,205,218,.34);padding:6px 8px;background:rgba(5,16,21,.82);color:#b4d4dd;font:500 8px/1.25 ui-monospace,monospace;letter-spacing:.07em;transition:border-color .2s,color .2s}
.px-surveil-toggle:hover,.px-surveil-toggle:focus-visible{border-color:#a0e8f0;color:#fff;outline-offset:2px}
.px-surveil-ready .command-inner{z-index:2}
/* The initial scan happens once per session. Subsequent visits stay calm. */
.px-surveil.is-booting .px-surveil__beacon{animation:pxSurveilSweep 2.3s ease-in-out .15s 1 forwards}
.px-surveil.is-booting .px-surveil__beam{animation:pxSurveilBeam 2.3s ease-in-out .15s 1 forwards}
.px-surveil.is-booting .px-surveil__matrix{animation:pxSurveilGrid 2.6s linear .2s 1 forwards}
.px-surveil.is-booting .px-surveil__focus{animation:pxSurveilAcquire 1.1s cubic-bezier(.2,.75,.25,1) 1.4s 1 forwards}
.px-surveil.is-booting .px-surveil__badge,.px-surveil.is-booting .px-surveil__telemetry,.px-surveil.is-booting .px-surveil__ruler,.px-surveil.is-booting .px-surveil__focus-label,.px-surveil.is-booting .px-surveil__small{animation:pxSurveilAppear .5s ease-out 1.35s forwards}
.px-surveil.is-active .px-surveil__focus{opacity:.7;transform:scale(1);animation:pxSurveilPulse 8s ease-in-out infinite}
.px-surveil.is-active .px-surveil__focus-label,.px-surveil.is-active .px-surveil__telemetry,.px-surveil.is-active .px-surveil__badge,.px-surveil.is-active .px-surveil__ruler,.px-surveil.is-active .px-surveil__small{opacity:.94;transform:none}
.px-surveil.is-active .px-surveil__matrix{opacity:.11}
.px-surveil.is-active .px-surveil__beam{animation:pxSurveilIdle 19s ease-in-out 3s infinite}
.px-surveil.is-off .px-surveil__badge,.px-surveil.is-off .px-surveil__telemetry{opacity:.65;transform:none}.px-surveil.is-off .px-surveil__focus,.px-surveil.is-off .px-surveil__focus-label,.px-surveil.is-off .px-surveil__ruler,.px-surveil.is-off .px-surveil__small,.px-surveil.is-off .px-surveil__matrix,.px-surveil.is-off .px-surveil__beam,.px-surveil.is-off .px-surveil__beacon{display:none}
@keyframes pxSurveilSweep{0%,8%{opacity:0;transform:translateY(-6px)}15%{opacity:.75}84%{opacity:.88}100%{opacity:0;transform:translateY(590px)}}
@keyframes pxSurveilBeam{0%{opacity:0;transform:translateY(-110%)}12%{opacity:.8}89%{opacity:.6}100%{opacity:0;transform:translateY(130%)}}
@keyframes pxSurveilGrid{0%{opacity:0}24%,65%{opacity:.42}100%{opacity:.12}}
@keyframes pxSurveilAcquire{0%{opacity:0;transform:scale(1.17)}40%{opacity:.84;transform:scale(.94)}68%{opacity:.55;transform:scale(1.04)}100%{opacity:.8;transform:scale(1)}}
@keyframes pxSurveilAppear{to{opacity:.95;transform:none}}
@keyframes pxSurveilPulse{0%,100%{opacity:.6}50%{opacity:.94}}
@keyframes pxSurveilIdle{0%,76%{opacity:0;transform:translateY(-110%)}82%{opacity:.15}100%{opacity:0;transform:translateY(120%)}}
@media(max-width:850px){.px-surveil__focus{left:calc(75% - 55px);top:22%;width:110px;height:110px}.px-surveil__focus-label{left:calc(75% - 55px);top:calc(22% + 118px);width:110px;font-size:6px}.px-surveil__badge{top:12%;right:3%;font-size:7px}.px-surveil__telemetry{right:3%;bottom:17%;font-size:6px}}
@media(max-width:600px){.px-surveil__focus,.px-surveil__focus-label,.px-surveil__telemetry,.px-surveil__ruler,.px-surveil__small{display:none!important}.px-surveil__badge{top:58px;right:12px;font-size:7px;max-width:65%;}.px-surveil-toggle{right:12px;top:12px;font-size:7px}.px-surveil__beam,.px-surveil__beacon{left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.px-surveil *,.px-surveil::before,.px-surveil::after{animation:none!important;transition:none!important}.px-surveil__focus,.px-surveil__focus-label,.px-surveil__ruler,.px-surveil__small,.px-surveil__matrix,.px-surveil__beam,.px-surveil__beacon{display:none!important}.px-surveil__badge,.px-surveil__telemetry{opacity:.7!important;transform:none!important}}
/* v2: reticle position is driven by the real command-art image, not hero percentages. */
.px-surveil__focus{left:0;top:0;width:180px;height:180px;will-change:transform,opacity}
.px-surveil__focus-label{left:0;top:0;width:180px}
.px-surveil__face-scan{position:absolute;inset:3px;overflow:hidden;display:block;opacity:0}
.px-surveil__face-scan::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:rgba(247,88,82,.87);box-shadow:0 0 11px #e75552;transform:translateY(0)}
.px-surveil.is-booting .px-surveil__focus{animation:pxSurveilFaceLock 1.5s cubic-bezier(.14,.77,.22,1) 1.3s forwards}
.px-surveil.is-booting .px-surveil__face-scan{animation:pxSurveilFaceLine 1.05s ease-in-out 1.45s forwards}
.px-surveil.is-booting .px-surveil__face-scan::after{animation:pxSurveilLinePass 1.05s ease-in-out 1.45s 1 forwards}
.px-surveil.is-active .px-surveil__face-scan{animation:pxSurveilRecheck 17s linear 1s infinite}
.px-surveil.is-active .px-surveil__face-scan::after{animation:pxSurveilRecheckLine 17s linear 1s infinite}
.px-surveil.is-active .px-surveil__beam{animation:pxSurveilBlueReturn 16s linear 0s infinite}
.px-surveil.is-active .px-surveil__beacon{animation:pxSurveilBeaconReturn 16s linear 0s infinite}
@keyframes pxSurveilFaceLock{0%{opacity:0;transform:translate(33px,-20px) scale(1.45)}30%{opacity:.77;transform:translate(-12px,8px) scale(1.15)}53%{transform:translate(5px,-4px) scale(1.05)}68%{opacity:.95;transform:translate(0,0) scale(.98)}77%{opacity:.4}100%{opacity:.8;transform:translate(0,0) scale(1)}}
@keyframes pxSurveilFaceLine{0%{opacity:0}22%,75%{opacity:.95}100%{opacity:0}}
@keyframes pxSurveilLinePass{0%{transform:translateY(-8px)}100%{transform:translateY(240px)}}
@keyframes pxSurveilRecheck{0%,69%,75%,100%{opacity:0}70%,73%{opacity:.65}}
@keyframes pxSurveilBlueReturn{0%,62%{opacity:0;transform:translateY(-110%)}66%{opacity:.14}73%{opacity:.46}83%{opacity:.32}90%,100%{opacity:0;transform:translateY(130%)}}
@keyframes pxSurveilBeaconReturn{0%,62%{opacity:0;transform:translateY(-6px)}66%{opacity:.5}84%{opacity:.8}90%,100%{opacity:0;transform:translateY(650px)}}
@media(max-width:600px){.px-surveil__beam{left:0;width:100%}.px-surveil__beacon{left:0;right:0}}

@keyframes pxSurveilRecheckLine{0%,69%{transform:translateY(-8px)}75%,100%{transform:translateY(240px)}}