/* ── ATREOX technical backdrop: blueprint grid · glow · scanline ── */
#tech-bg {
  position: fixed; inset: 0; z-index: -1;
  background: #020403;
  pointer-events: none; overflow: hidden;
}

/* Fine blue grid, strongest near the top, dissolving toward the edges */
#bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,217,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 85% at 50% 0%, black 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 100% 85% at 50% 0%, black 25%, transparent 78%);
}

/* Soft phosphor glows for depth — one drifts very slowly */
#bg-glow-1 {
  position: absolute;
  width: 70vw; height: 70vw;
  top: -30vw; left: -18vw;
  background: radial-gradient(circle, rgba(0,217,255,0.13) 0%, transparent 62%);
  animation: glow-drift 26s ease-in-out infinite alternate;
}
#bg-glow-2 {
  position: absolute;
  width: 55vw; height: 55vw;
  bottom: -26vw; right: -16vw;
  background: radial-gradient(circle, rgba(0,140,255,0.09) 0%, transparent 62%);
}
@keyframes glow-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(7vw, 5vw); }
}

/* Interactive constellation canvas — drawn by bg-animation.js */
#bg-particles {
  position: absolute; inset: 0;
}

/* A single hairline sweeping down the viewport — the "radar" pass */
#bg-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(0,217,255,0.32) 50%, transparent 95%);
  box-shadow: 0 0 14px rgba(0,217,255,0.3);
  opacity: 0.5;
  animation: scan-y 11s linear infinite;
}
@keyframes scan-y {
  from { transform: translateY(-2vh); }
  to   { transform: translateY(102vh); }
}

/* Film grain — kills flat-black banding, adds texture */
#bg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  opacity: 0.035;
}

@media (max-width: 768px) {
  #bg-grid { background-size: 36px 36px; }
  #bg-glow-1 { width: 130vw; height: 130vw; top: -55vw; left: -35vw; }
  #bg-glow-2 { width: 110vw; height: 110vw; bottom: -50vw; right: -35vw; }
}

@media (prefers-reduced-motion: reduce) {
  #bg-scan { animation: none; opacity: 0; }
  #bg-glow-1 { animation: none; }
}