/* ============================================================================
   AlphaView — boot interstitial. A sci-fi "powering up" sequence shown while the
   dashboard's heavy analytics load. Mirrors the Pentagon (asc-busy) radar scope,
   re-themed to the AlphaView cyan SOC palette, with a stepped narration that
   ticks off as each stage initialises.
   ========================================================================== */
.ab-boot{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% 8%,rgba(68,241,255,.06),transparent 60%),rgba(3,6,12,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.ab-boot.on{opacity:1;pointer-events:auto}
.ab-boot.off{opacity:0}

/* faint engineering grid + scan sweep behind the card */
.ab-boot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(68,241,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(68,241,255,.05) 1px,transparent 1px);
  background-size:38px 38px,38px 38px;mask-image:radial-gradient(circle at 50% 42%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 75%);animation:abGrid 24s linear infinite}
@keyframes abGrid{to{background-position:0 38px,38px 0}}

.ab-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:34px 42px;border-radius:22px;
  min-width:320px;max-width:90vw;
  background:linear-gradient(180deg,rgba(13,22,38,.92),rgba(6,10,18,.95));
  border:1px solid rgba(68,241,255,.22);
  box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 70px rgba(68,241,255,.07),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(10px) scale(.985);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ab-boot.on .ab-card{transform:none}

/* Radar scope */
.ab-radar{position:relative;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(68,241,255,.12),transparent 70%)}
.ab-radar .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(68,241,255,.22)}
.ab-radar .r2{inset:18px}.ab-radar .r3{inset:36px}
.ab-radar .core{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#44f1ff;box-shadow:0 0 16px #44f1ff;animation:abPulse 1.4s ease-in-out infinite}
.ab-radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(68,241,255,.5),rgba(68,241,255,0) 68%);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 7px,#000 8px);mask:radial-gradient(circle at 50% 50%,transparent 7px,#000 8px);
  animation:abSweep 1.6s linear infinite}
.ab-radar .blip{position:absolute;width:6px;height:6px;border-radius:50%;background:#39ffa6;box-shadow:0 0 8px #39ffa6;opacity:0}
.ab-radar .b1{left:66%;top:28%;animation:abBlip 1.6s linear .2s infinite}
.ab-radar .b2{left:30%;top:62%;animation:abBlip 1.6s linear .7s infinite}
.ab-radar .b3{left:60%;top:68%;animation:abBlip 1.6s linear 1.2s infinite}

.ab-title{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:#7fe9ff;text-shadow:0 0 16px rgba(68,241,255,.4)}
.ab-title b{color:#fff}

/* Narration steps */
.ab-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;min-width:230px}
.ab-step{display:flex;align-items:center;gap:11px;font-size:13.5px;color:rgba(150,178,212,.5);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;transition:color .3s,opacity .3s;letter-spacing:.01em}
.ab-step .ab-ic{position:relative;width:16px;height:16px;border-radius:50%;border:1px solid rgba(120,150,210,.3);flex:none}
.ab-step.is-active{color:#eafdff}
.ab-step.is-active .ab-ic{border-color:#44f1ff;box-shadow:0 0 10px rgba(68,241,255,.5)}
.ab-step.is-active .ab-ic::after{content:"";position:absolute;inset:2px;border-radius:50%;border:1.5px solid transparent;border-top-color:#44f1ff;animation:abSpin .7s linear infinite}
.ab-step.is-done{color:rgba(180,205,235,.78)}
.ab-step.is-done .ab-ic{border-color:#39ffa6;background:rgba(57,255,166,.12)}
.ab-step.is-done .ab-ic::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #39ffa6;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Progress shimmer bar */
.ab-bar{width:240px;max-width:70vw;height:4px;border-radius:4px;background:rgba(68,241,255,.14);overflow:hidden;position:relative}
.ab-bar b{position:absolute;left:0;top:0;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#2bd4e6,#7df3ff);box-shadow:0 0 12px rgba(68,241,255,.5);transition:width .5s cubic-bezier(.3,.8,.3,1)}
.ab-bar i{position:absolute;left:-40%;top:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:abShimmer 1.2s ease-in-out infinite}

@keyframes abSweep{to{transform:rotate(360deg)}}
@keyframes abPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.5}}
@keyframes abBlip{0%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}
@keyframes abSpin{to{transform:rotate(360deg)}}
@keyframes abShimmer{0%{left:-40%}100%{left:120%}}
@media (prefers-reduced-motion:reduce){
  .ab-radar .sweep,.ab-radar .core,.ab-radar .blip,.ab-bar i,.ab-step.is-active .ab-ic::after,.ab-boot::before{animation-duration:3s}
}