/* ── Atmospheric background (experiment — not yet approved for production)
   Extremely dark, desaturated red glow behind all content. Fixed,
   non-interactive, does not affect layout. Keep near-black dominant —
   this layer should be barely perceptible. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--black);
  background-image:
    radial-gradient(ellipse 60% 42% at 18% 12%, rgba(120, 18, 20, 0.13), transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 78%, rgba(96, 16, 18, 0.10), transparent 65%),
    radial-gradient(ellipse 80% 55% at 50% 105%, rgba(80, 14, 16, 0.08), transparent 70%);
  background-repeat: no-repeat;
  background-size: 140% 140%;
  animation: atmosphere-drift 46s ease-in-out infinite;
}

@keyframes atmosphere-drift {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50%      { background-position: 3% 4%, -3% -2%, 1% -2%; }
}

/* ── Mobile: simplify to two softer glows to avoid muddying text-heavy stacks */

@media (max-width: 767px) {
  body::before {
    background-image:
      radial-gradient(ellipse 90% 30% at 50% 8%, rgba(110, 18, 20, 0.11), transparent 60%),
      radial-gradient(ellipse 90% 35% at 50% 100%, rgba(80, 14, 16, 0.08), transparent 68%);
    background-size: 160% 160%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}