/* ==========================================================================
   vt99-atmosphere.css — Vault-Tec Mission Terminal II (variant99)
   Layer: global fixed atmosphere — CRT overlay + sweep, sky/grid, blobs,
   scroll progress line. All layers pointer-events:none.
   Primer reference: todo/new_design/primer/design-system-variant99.md §3.1–3.4, §3.6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §3.2 CRT overlay (scanlines above everything, transparent) + sweep band
   (bright band traveling down every 13s, UNDER content — z-index:-1 keeps it
   above the body background but below all page content)
   -------------------------------------------------------------------------- */
.crt{position:fixed;inset:0;z-index:680;pointer-events:none}
.crt::before{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}

.crt-sweep{position:fixed;left:0;right:0;height:170px;z-index:-1;pointer-events:none;opacity:.06;
  background:linear-gradient(180deg,transparent,rgba(109,155,255,.9),rgba(255,210,51,.5),transparent);
  filter:blur(6px);animation:sweep 13s linear infinite}
@keyframes sweep{0%{top:-190px}100%{top:110%}}

/* --------------------------------------------------------------------------
   §3.3 Sky: radial gradient wash + blueprint grid masked towards bottom
   -------------------------------------------------------------------------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky::before{content:"";position:absolute;inset:0;background:
    radial-gradient(1000px 600px at 80% -15%, rgba(59,110,246,.13), transparent 62%),
    radial-gradient(760px 520px at -10% 30%, rgba(109,155,255,.06), transparent 60%),
    radial-gradient(700px 500px at 60% 115%, rgba(255,210,51,.06), transparent 60%)}
.sky::after{content:"";position:absolute;inset:0;opacity:.9;
  background-image:
    linear-gradient(rgba(147,164,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(147,164,255,.075) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 95%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 95%)}

/* --------------------------------------------------------------------------
   §3.4 Blobs — drifting glow spots inside .sky
   -------------------------------------------------------------------------- */
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
      animation:drift 22s ease-in-out infinite alternate}
.blob.b1{width:420px;height:420px;background:rgba(59,110,246,.2);top:-140px;right:-80px}
.blob.b2{width:360px;height:360px;background:rgba(255,210,51,.08);top:30%;left:-140px;animation-delay:-8s}
.blob.b3{width:300px;height:300px;background:rgba(109,155,255,.12);bottom:-100px;right:20%;animation-delay:-15s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,26px) scale(1.08)}}

/* --------------------------------------------------------------------------
   §3.5 Floating Fallout decorations (Step 3.2) — fixed icons with color and
   motion variants; parallax transform driven by vt99.js via data-depth/ease.
   Positions (.fd1–.fd10) mirror primer/variant99.html without inline styles.
   -------------------------------------------------------------------------- */
.float-deco{position:fixed;z-index:0;pointer-events:none;color:var(--vt-blue-2);opacity:.15;will-change:transform}
.float-deco.y{color:var(--vt-yellow);opacity:.16}
.float-deco.p{color:var(--vt-pip);opacity:.13}
.float-deco.dim{opacity:.08}
.float-deco svg{width:100%;height:100%}
.fd1{top:12%;left:3%;width:50px}
.fd2{top:58%;left:2%;width:44px}
.fd3{top:16%;right:2%;width:62px}
.fd4{top:66%;right:4%;width:38px}
.fd5{top:38%;left:4%;width:46px}
.fd6{top:7%;left:40%;width:22px}
.fd7{top:80%;right:22%;width:46px}
.fd8{top:44%;right:7%;width:36px}
.fd9{top:86%;left:24%;width:32px}
.fd10{top:26%;left:20%;width:15px}
.fx-bob svg{animation:bob 7s ease-in-out infinite}
.fx-spin svg{animation:spin 34s linear infinite}
.fx-spin-rev svg{animation:spin 52s linear infinite reverse}
.fx-swing svg{animation:swing 9s ease-in-out infinite;transform-origin:50% 8%}
.fx-twinkle{animation:twinkle 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes twinkle{0%,100%{opacity:.08;transform:scale(.85)}50%{opacity:.35;transform:scale(1.12)}}

/* --------------------------------------------------------------------------
   §3.6 Scroll progress line (fill width driven by vt99.js from Step 3.2)
   -------------------------------------------------------------------------- */
.progress-line{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:700;pointer-events:none;
  background:linear-gradient(90deg,var(--vt-blue),var(--vt-yellow));
  box-shadow:0 0 12px var(--vt-yellow-glow)}

/* --------------------------------------------------------------------------
   Accessibility — reduced motion: kill the traveling sweep entirely and stop
   blob drift (complements the global duration clamp in vt99-tokens.css).
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .crt-sweep{display:none}
  .blob{animation:none}
}

/* --------------------------------------------------------------------------
   Responsive — Flat Mode (primer §22): decorations hidden entirely ≤768px;
   reduced motion stops all deco motion.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  .float-deco{display:none}
}
@media(prefers-reduced-motion:reduce){
  .float-deco svg,.fx-twinkle{animation:none}
}