/* ============================================================
   AMBIENT GLOW — Animated gradient mesh backgrounds
   ============================================================ */

.ambient-glow {
  position: relative;
}

.ambient-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  will-change: transform;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%,
      color-mix(in srgb, var(--q-luminous-emerald) 8%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 60%,
      color-mix(in srgb, var(--q-circuit-blue) 7%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 80%,
      color-mix(in srgb, var(--q-deep-forest-teal) 10%, transparent) 0%,
      transparent 60%);
  animation: ambient-drift 45s ease-in-out infinite alternate;
}

.ambient-glow > * {
  position: relative;
  z-index: 1;
}

@keyframes ambient-drift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.02) rotate(0.5deg);
  }
  50% {
    background-position: 30% 20%, 60% 40%, 80% 20%;
    transform: scale(1.04) rotate(-0.3deg);
  }
  75% {
    transform: scale(1.01) rotate(0.2deg);
  }
  100% {
    background-position: 60% 50%, 20% 80%, 40% 60%;
    transform: scale(1) rotate(0deg);
  }
}

/* Warm variant — copper and gold tones */
.ambient-glow--warm {
  position: relative;
}

.ambient-glow--warm::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  will-change: transform;
  background:
    radial-gradient(ellipse 55% 50% at 30% 40%,
      color-mix(in srgb, var(--q-copper-signal) 8%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 55% at 70% 70%,
      color-mix(in srgb, var(--q-ledger-gold) 7%, transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 50% 60% at 50% 20%,
      color-mix(in srgb, var(--q-copper-signal) 5%, transparent) 0%,
      transparent 60%);
  animation: ambient-drift-warm 55s ease-in-out infinite alternate;
}

.ambient-glow--warm > * {
  position: relative;
  z-index: 1;
}

@keyframes ambient-drift-warm {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    transform: scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1.03) rotate(0.4deg);
  }
  66% {
    background-position: 40% 30%, 50% 50%, 70% 30%;
    transform: scale(1.01) rotate(-0.3deg);
  }
  100% {
    background-position: 70% 60%, 20% 70%, 30% 70%;
    transform: scale(1) rotate(0deg);
  }
}