:root{
  --bg-1: #0b1220;
  --bg-2: #0a1a2e;
  --c1: #4f8cff;
  --c2: #65d6ff;
  --c3: #7c4dff;
  --c4: #00ffa3;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; }

body{
  overflow: hidden;
  background: radial-gradient(1200px 700px at 15% 10%, rgba(79,140,255,.18), transparent 60%),
              radial-gradient(1000px 700px at 85% 15%, rgba(101,214,255,.12), transparent 62%),
              radial-gradient(1000px 750px at 45% 90%, rgba(0,255,163,.10), transparent 65%),
              linear-gradient(120deg, var(--bg-1), var(--bg-2));
}

/* Canvas */
#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* Animated gradient overlay (subtle) */
#bg::after{ content:""; } /* (no-op, just preventing some browser weirdness) */

body::before{
  content:"";
  position: fixed;
  inset:-20%;
  background: linear-gradient(120deg,
    rgba(79,140,255,.18),
    rgba(124,77,255,.14),
    rgba(101,214,255,.14),
    rgba(0,255,163,.10)
  );
  filter: blur(50px);
  opacity: .85;
  transform: translate3d(0,0,0);
  animation: drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift{
  0%   { transform: translate3d(-6%, -4%, 0) rotate(-6deg); }
  50%  { transform: translate3d(4%, -2%, 0) rotate(3deg); }
  100% { transform: translate3d(6%, 5%, 0) rotate(7deg); }
}

/* Grain overlay */
.grain{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}