body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  will-change: filter;
  contain: strict;

  background:
    radial-gradient(900px 520px at var(--mx) var(--my), rgba(72,170,255,0.18), transparent 60%),
    radial-gradient(720px 480px at 82% 70%, rgba(60,255,180,0.18), transparent 60%),
    radial-gradient(640px 420px at 18% 18%, rgba(124,92,255,0.12), transparent 60%),
    linear-gradient(120deg, var(--bg0), var(--bg1) 45%, var(--bg0));

  animation: bgShift 10s ease-in-out infinite;
}

@keyframes bgShift {
  0%, 100% { filter: saturate(1.15) contrast(1.06); }
  50% { filter: saturate(1.35) contrast(1.14); }
}

.site-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.blob{
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 999px;
  filter: blur(46px);
  opacity: 0.34;
  mix-blend-mode: screen;
  animation: float 10s ease-in-out infinite;
  will-change: transform;
  contain: layout style;
}

.b1{ left: -160px; top: -140px; background: var(--blue);  animation-duration: 11s; }
.b2{ right: -200px; top: 16%;   background: var(--green); animation-duration: 13s; }
.b3{ left: 18%; bottom: -240px; background: var(--violet); animation-duration: 12s; }

@keyframes float{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(46px, -28px) scale(1.08); }
}

.noise{
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}