/**
 * Ambient background: layered grid + glow, driven by --px / --py (see js/ambient-pointer.js).
 */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: -12%;
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
}

.bg-grid--far {
  opacity: 0.35;
  background-size: 88px 88px;
  background-position: calc(50% + var(--px, 0) * -28px) calc(50% + var(--py, 0) * -22px);
  background-image:
    linear-gradient(var(--color-grid-line-far) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line-far) 1px, transparent 1px);
  transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 18px), 0);
  /* Spotlight follows pointer; at screen center (--px/--py ~ 0) focus is viewport middle, not top */
  mask-image: radial-gradient(
    ellipse 92% 78% at calc(50% + var(--px, 0) * 16%) calc(50% + var(--py, 0) * 16%),
    black 14%,
    transparent 72%
  );
}

.bg-grid--near {
  opacity: 1;
  background-size: 48px 48px;
  background-position: calc(50% + var(--px, 0) * -42px) calc(50% + var(--py, 0) * -34px);
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  transform: translate3d(calc(var(--px, 0) * 48px), calc(var(--py, 0) * 36px), 0);
  mask-image: radial-gradient(
    ellipse 88% 72% at calc(50% + var(--px, 0) * 18%) calc(50% + var(--py, 0) * 18%),
    black 18%,
    transparent 70%
  );
}

.bg-aura {
  position: absolute;
  /* Symmetric inset: positive bottom was cropping ~30% of viewport — glow never reached lower area */
  inset: -20% -30% -20% -30%;
  background: radial-gradient(
    ellipse 58% 48% at calc(50% + var(--px, 0) * 14%) calc(50% + var(--py, 0) * 12%),
    rgba(45, 212, 191, 0.11),
    transparent 62%
  );
  transform: translate3d(calc(var(--px, 0) * 20px), calc(var(--py, 0) * 14px), 0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bg-grid,
  .bg-aura {
    transform: none !important;
    transition: none !important;
  }

  .bg-grid--far,
  .bg-grid--near {
    background-position: 50% 50%;
    mask-image: radial-gradient(ellipse 92% 78% at 50% 50%, black 14%, transparent 72%);
  }

  .bg-grid--near {
    mask-image: radial-gradient(ellipse 88% 72% at 50% 50%, black 18%, transparent 70%);
  }

  .bg-aura {
    background: radial-gradient(
      ellipse 58% 48% at 50% 50%,
      rgba(45, 212, 191, 0.11),
      transparent 62%
    );
  }
}