body[data-bg="aurora-fog"] {
  background-color: var(--bg-aurora-fog-base);
  background-image: radial-gradient(
      1200px 700px at 10% 15%,
      var(--bg-aurora-fog-blue),
      transparent 60%
    ),
    radial-gradient(
      980px 620px at 90% 10%,
      var(--bg-aurora-fog-slate),
      transparent 65%
    ),
    radial-gradient(
      900px 640px at 50% 90%,
      var(--bg-aurora-fog-blue),
      transparent 70%
    ),
    linear-gradient(
      120deg,
      rgba(100, 116, 139, 0.45),
      rgba(37, 99, 235, 0.55)
    );
  background-size: 160% 160%;
  background-position: 0% 0%;
  animation: aurora-fog-drift 48s ease-in-out infinite alternate;
}

body[data-bg="aurora-fog"]::before {
  content: "";
  position: fixed;
  inset: -20% -10% 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
  animation: aurora-fog-grain 10s steps(6) infinite;
}

body[data-bg="aurora-fog"]::after {
  content: "";
  position: fixed;
  inset: -10% -5% 0;
  background-image: radial-gradient(
      600px 360px at 20% 20%,
      var(--bg-aurora-fog-glow),
      transparent 70%
    ),
    radial-gradient(
      520px 360px at 80% 10%,
      var(--bg-aurora-fog-glow),
      transparent 72%
    );
  opacity: 0.5;
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

@keyframes aurora-fog-drift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 18% 12%;
  }
  100% {
    background-position: 35% 20%;
  }
}

@keyframes aurora-fog-grain {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-6px, -4px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-bg="aurora-fog"] {
    animation: none;
  }

  body[data-bg="aurora-fog"]::before {
    animation: none;
  }
}