/* Ambient mesh background — subtle, always-on mesh that lives behind page content.
   Apply via body.ambient-mesh-on class. Should NOT apply on body.player (slide editor). */

body.ambient-mesh-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(233, 69, 96, 0.1), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(245, 197, 24, 0.08), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.06), transparent 50%);
  filter: blur(40px);
  pointer-events: none;
  animation: ambDrift 30s ease-in-out infinite;
}

@keyframes ambDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(-2%, 1%, 0) scale(1.05);
  }
  66% {
    transform: translate3d(2%, -1%, 0) scale(0.98);
  }
}

/* Override for player (slide editor) — explicitly hide the ambient mesh */
body.player.ambient-mesh-on::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.ambient-mesh-on::before {
    animation: none;
  }
}