/* Dycpr - background.css
   Layered ambient background (back-to-front):
   1. Base radial gradient  (body)
   2. Atmospheric glow blobs (.bg-glow)
   3. Hex cipher field       (#bg-stars, driven by background.js)
   4. Vignette overlay       (.bg-fx::after)
   CSS grid is hidden - the hex field is the texture layer.
*/

/* ── 1. Base radial gradient ──────────────────────────── */
body {
  background: radial-gradient(ellipse at 50% 30%, #0d0a0e 0%, #050508 100%);
}

/* ── 2. Hide CSS grid - hex field replaces it ─────────── */
.bg-grid {
  opacity: 0;
  animation: none;
}

/* ── 3. Atmospheric glow blobs ────────────────────────── */
/* Override main.css - locked to the terminal amber palette */
.bg-glow--a {
  width: 700px; height: 700px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(255,176,0,0.09) 0%, rgba(122,78,0,0.04) 60%, transparent 100%);
  filter: blur(100px);
  animation: bgGlowA 75s ease-in-out infinite alternate;
}

.bg-glow--b {
  width: 650px; height: 650px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(255,176,0,0.07) 0%, rgba(122,78,0,0.03) 60%, transparent 100%);
  filter: blur(100px);
  animation: bgGlowB 88s ease-in-out infinite alternate;
}

.bg-glow--c {
  width: 480px; height: 480px;
  top: 30%; left: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255,176,0,0.06) 0%, transparent 70%);
  filter: blur(90px);
  animation: bgGlowC 90s ease-in-out infinite;
}

@keyframes bgGlowA {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(70px, 55px) scale(1.12); }
  100% { transform: translate(-35px, 110px) scale(0.92); }
}
@keyframes bgGlowB {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, -80px) scale(1.18); }
  100% { transform: translate(45px, -35px) scale(0.90); }
}
@keyframes bgGlowC {
  0%, 100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 0.25; transform: translate(-50%,-50%) scale(1.30); }
}

/* ── 4. Canvas ────────────────────────────────────────── */
/* Override main.css opacity - background.js renders directly */
#bg-stars {
  opacity: 1;
}

/* ── 5. Vignette overlay ──────────────────────────────── */
/* Override main.css display:none on .bg-fx::after */
.bg-fx::after {
  display: block !important;
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 35%,
    rgba(5,5,8,0.30) 100%
  );
  pointer-events: none;
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-glow--a,
  .bg-glow--b,
  .bg-glow--c { animation: none !important; }
}