body {
  position: relative;
  background: #050607;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -34vmax;
  z-index: 0;
  pointer-events: none;
  will-change: transform, filter;
}

body::before {
  background:
    radial-gradient(ellipse at 24% 30%, rgba(63, 182, 255, 0.28) 0 8%, transparent 30%),
    radial-gradient(ellipse at 74% 62%, rgba(94, 255, 223, 0.16) 0 7%, transparent 28%),
    radial-gradient(ellipse at 58% 18%, rgba(79, 109, 255, 0.21) 0 6%, transparent 26%),
    conic-gradient(from 115deg at 48% 48%, transparent 0 17%, rgba(113, 211, 255, 0.14) 23%, transparent 34% 56%, rgba(80, 121, 255, 0.12) 67%, transparent 78%);
  filter: blur(64px) saturate(1.3);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: color-bends-drift 24s ease-in-out infinite alternate;
}

body::after {
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.12) 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 76% 64%, rgba(158, 216, 255, 0.1) 0 0.7px, transparent 1px);
  background-size: 9px 9px, 15px 15px;
  opacity: 0.2;
  mix-blend-mode: screen;
  animation: color-bends-grain 8s steps(8) infinite;
}

#root {
  position: relative;
  z-index: 1;
}

main {
  background:
    radial-gradient(circle at 72% 22%, rgba(158, 216, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(5, 6, 7, 0.96) 0%, rgba(7, 10, 13, 0.72) 42%, rgba(6, 8, 9, 0.84) 100%);
}

@keyframes color-bends-drift {
  0% { transform: translate3d(-4%, -2%, 0) rotate(-7deg) scale(0.96); }
  45% { transform: translate3d(5%, 3%, 0) rotate(6deg) scale(1.06); }
  100% { transform: translate3d(-1%, 7%, 0) rotate(14deg) scale(1.02); }
}

@keyframes color-bends-grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-0.6%, 0.4%, 0); }
  60% { transform: translate3d(0.5%, -0.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}