/**
 * VIRTU4L aurora ambient lights — vanilla CSS port (no React).
 * Mint/teal palette aligned with --tv-mint. Respects prefers-reduced-motion.
 */

@keyframes vr-aurora {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}

.vr-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vr-aurora__glow {
  position: absolute;
  inset: -10px;
  opacity: 0.42;
  filter: blur(10px);
  will-change: background-position;
  pointer-events: none;

  --vr-aurora-base: #131313;
  --vr-aurora-mint: #3cffd0;
  --vr-aurora-teal: #1a9e85;
  --vr-aurora-cyan: #5effdb;
  --vr-aurora-soft: rgba(60, 255, 208, 0.35);

  background-image:
    repeating-linear-gradient(
      100deg,
      var(--vr-aurora-base) 0%,
      var(--vr-aurora-base) 7%,
      transparent 10%,
      transparent 12%,
      var(--vr-aurora-base) 16%
    ),
    repeating-linear-gradient(
      100deg,
      var(--vr-aurora-mint) 10%,
      var(--vr-aurora-cyan) 15%,
      var(--vr-aurora-teal) 20%,
      var(--vr-aurora-soft) 25%,
      var(--vr-aurora-mint) 30%
    );
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  animation: vr-aurora 60s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}

.vr-aurora__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      100deg,
      var(--vr-aurora-base) 0%,
      var(--vr-aurora-base) 7%,
      transparent 10%,
      transparent 12%,
      var(--vr-aurora-base) 16%
    ),
    repeating-linear-gradient(
      100deg,
      var(--vr-aurora-mint) 10%,
      var(--vr-aurora-cyan) 15%,
      var(--vr-aurora-teal) 20%,
      var(--vr-aurora-soft) 25%,
      var(--vr-aurora-mint) 30%
    );
  background-size: 200%, 100%;
  background-position: 50% 50%, 50% 50%;
  animation: vr-aurora 60s linear infinite;
  background-attachment: fixed;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .vr-aurora__glow,
  .vr-aurora__glow::after {
    animation: none;
  }
}

/* Stack page content above aurora (keep fixed WhatsApp pill out of flow) */
body.vr-site > :not(.vr-aurora):not(.whatsapp-float) {
  position: relative;
  z-index: 1;
}

body.vr-site .vr-header {
  z-index: 50;
}

/* Let lights show through heroes (solid sections stay opaque) */
body.vr-site .hero-bg,
body.vr-site .vr-hero-aurora {
  background: transparent !important;
}

body.vr-site .hero-bg::before {
  opacity: 0.14;
}

/* Index hero — let fixed aurora show; photo is accent only */
.index-hero {
  background: transparent !important;
}

.index-hero__photo,
.index-hero__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.index-hero__photo img,
.index-hero__photo-img {
  opacity: 0.34;
  object-fit: cover;
  object-position: top center;
}

.index-hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(19, 19, 19, 0.35) 0%,
    rgba(19, 19, 19, 0.72) 55%,
    rgba(19, 19, 19, 0.88) 100%
  );
}

/* Slight transparency on canvas sections so lights peek at edges */
body.vr-site #home > section[style*="--canvas"]:not(.hide-halloween-link) {
  background: color-mix(in srgb, var(--canvas) 88%, transparent) !important;
}

body.vr-site #home > section[style*="--surface-slate"] {
  background: color-mix(in srgb, var(--surface-slate) 92%, transparent) !important;
}