---
// Background ambient fixed behind all content
// Layers: gradient mesh base (from body .warehouse-bg) + grain SVG + 3 UV spots parallaxed on scroll
---

<div
  id="ambient"
  class="fixed inset-0 -z-10 pointer-events-none overflow-hidden"
  aria-hidden="true"
  transition:persist
>
  <!-- UV spot 1 (cyan) -->
  <div
    class="spot absolute rounded-full blur-3xl opacity-40 will-change-transform"
    style="
      width: 60vw; height: 60vw;
      top: -10vw; left: -15vw;
      background: radial-gradient(closest-side, rgba(0, 240, 255, 0.35), transparent 70%);
      transform: translate3d(0, var(--spot-1-y, 0), 0);
    "
  >
  </div>

  <!-- UV spot 2 (magenta) -->
  <div
    class="spot absolute rounded-full blur-3xl opacity-35 will-change-transform"
    style="
      width: 55vw; height: 55vw;
      top: 40vh; right: -20vw;
      background: radial-gradient(closest-side, rgba(255, 42, 109, 0.32), transparent 70%);
      transform: translate3d(0, var(--spot-2-y, 0), 0);
    "
  >
  </div>

  <!-- UV spot 3 (acid, plus discret) -->
  <div
    class="spot absolute rounded-full blur-3xl opacity-25 will-change-transform"
    style="
      width: 45vw; height: 45vw;
      bottom: -10vw; left: 30vw;
      background: radial-gradient(closest-side, rgba(198, 255, 0, 0.25), transparent 70%);
      transform: translate3d(0, var(--spot-3-y, 0), 0);
    "
  >
  </div>

  <!-- Grain / noise overlay -->
  <div
    class="absolute inset-0 opacity-[0.08] mix-blend-overlay animate-grain"
    style="
      background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.6%22/></svg>');
      background-size: 200px 200px;
    "
  >
  </div>

  <!-- Scanlines subtiles fixes -->
  <div class="absolute inset-0 opacity-[0.03] scanlines"></div>
</div>

<script>
  const ambient = document.getElementById('ambient');
  if (ambient && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    let rafId: number | null = null;
    const tick = () => {
      const y = window.scrollY;
      ambient.style.setProperty('--spot-1-y', `${y * 0.15}px`);
      ambient.style.setProperty('--spot-2-y', `${y * -0.22}px`);
      ambient.style.setProperty('--spot-3-y', `${y * 0.18}px`);
      rafId = null;
    };
    window.addEventListener(
      'scroll',
      () => {
        if (rafId === null) rafId = requestAnimationFrame(tick);
      },
      { passive: true },
    );
  }
</script>
