/* ============================================================
   JAY.EXE — ambient background system.
   Four fixed, GPU-friendly layers behind the content (z 2):
     1. .bg-aurora  — two drifting radial color fields
     2. .bg-grid    — perspective grid with a slow scroll parallax
     3. .bg-noise   — subtle SVG noise texture
     4. .bg-beam    — soft orange scanline that sweeps occasionally
   Layers pause entirely under prefers-reduced-motion.
============================================================ */

.bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.bg-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42rem 30rem at 82% 6%, rgba(255, 122, 41, 0.13), transparent 65%),
    radial-gradient(48rem 34rem at 10% 34%, rgba(58, 160, 255, 0.14), transparent 66%),
    radial-gradient(40rem 30rem at 70% 88%, rgba(92, 214, 255, 0.08), transparent 70%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}

.bg-grid {
  position: absolute;
  inset: -10% 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 30%, transparent 78%);
  animation: grid-slide 60s linear infinite;
  will-change: background-position;
}

@keyframes grid-slide {
  from { background-position: 0 0; }
  to { background-position: 0 440px; }
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.bg-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 41, 0.05) 45%, rgba(255, 176, 87, 0.08) 55%, transparent);
  animation: beam-sweep 11s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  will-change: transform;
}

@keyframes beam-sweep {
  0%, 62% { transform: translateY(-30vh); opacity: 0; }
  68% { opacity: 1; }
  88% { opacity: 0.9; }
  100% { transform: translateY(130vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .bg-grid, .bg-beam { animation: none; }
}