body {
  background: #0e1219;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(1200px circle at 20% 20%,
      rgba(120, 170, 255, 0.18),
      transparent 55%),
    radial-gradient(1000px circle at 80% 75%,
      rgba(90, 220, 190, 0.13),
      transparent 58%),
    radial-gradient(900px circle at 55% 40%,
      rgba(160, 120, 255, 0.10),
      transparent 60%),
    linear-gradient(180deg,
      #101622 0%,
      #0b0f17 100%);

  filter: blur(40px) saturate(115%);
  transform: translate3d(0,0,0);
  animation: veilAurora 26s ease-in-out infinite;
  opacity: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: 0.08;
  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

@keyframes veilAurora {
  0% {
    transform: translate3d(0%, 0%, 0) scale(1);
  }
  30% {
    transform: translate3d(-2%, -1.5%, 0) scale(1.03);
  }
  60% {
    transform: translate3d(2%, 1%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0%, 0%, 0) scale(1);
  }
}