:root{
  --bg0: #04050a;
  --bg1: #070a14;

  --p1: rgba(154, 84, 255, 0.9);
  --p2: rgba( 64, 180, 255, 0.8);
  --p3: rgba(255, 140,  56, 0.70);
  --p4: rgba(64, 120, 255, 0.4);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 900px at 20% 15%, rgba(80,120,255,0.10), transparent 60%),
    radial-gradient(900px 700px  at 80% 20%, rgba(180,90,255,0.10), transparent 60%),
    radial-gradient(900px 800px  at 50% 90%, rgba(255,140,56,0.06), transparent 65%),
    radial-gradient(circle at center, var(--bg1), var(--bg0));
  color: whitesmoke;
}

body::before{
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;

  background:
    radial-gradient(600px 520px at 18% 25%, var(--p1), transparent 62%),
    radial-gradient(620px 560px at 78% 22%, var(--p2), transparent 62%);

  filter: blur(70px) saturate(130%);
  opacity: 0.9;
  mix-blend-mode: screen;
  will-change: transform;
  backface-visibility: hidden;

  animation: mesh-drift-a 12s linear infinite;
  transform: translate3d(0,0,0);
}

@keyframes mesh-drift-a{
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(20deg); }
  25%  { transform: translate3d( 2%, -4%, 0) scale(1.10) rotate(-10deg); }
  50%  { transform: translate3d( 4%, -1%, 0) scale(1.07) rotate(-20deg); }
  75%  { transform: translate3d(-1%,  3%, 0) scale(1.11) rotate(-10deg); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(20deg); }
}

@keyframes mesh-drift-b{
  0%   { transform: translate3d( 3%,  2%, 0) scale(1.08); }
  30%  { transform: translate3d(-2%,  4%, 0) scale(1.13) rotate(20deg); }
  60%  { transform: translate3d(-4%,  0%, 0) scale(1.09); }
  85%  { transform: translate3d( 2%, -3%, 0) scale(1.14) rotate(-20deg); }
  100% { transform: translate3d( 3%,  2%, 0) scale(1.08); }
}

body::after{
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;

  background:
    radial-gradient(720px 640px at 55% 75%, var(--p3), transparent 62%),
    radial-gradient(540px 480px at 15% 65%, var(--p4), transparent 62%),
    radial-gradient(520px 520px at 70% 60%, rgba(64, 140, 255, 0.18), transparent 62%);

  filter: blur(10px) saturate(130%);
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: transform;
  backface-visibility: hidden;

  animation: mesh-drift-b 16s linear infinite;
  transform: translate3d(0,0,0);
}

html::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(0,0,0,0.55) 100%),
    repeating-radial-gradient(circle at 10% 20%,
      rgba(255,255,255,0.028) 0 1px,
      rgba(0,0,0,0.00) 1px 3px);

  opacity: 0.35;
  mix-blend-mode: overlay;
}

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