/* Fluid animated backdrop — blurred blobs of black + cyan drifting slowly.
   Include on every page and add:
     <div class="site-bg" aria-hidden="true">
       <div class="site-bg__blob site-bg__blob--cyan-1"></div>
       <div class="site-bg__blob site-bg__blob--cyan-2"></div>
       <div class="site-bg__blob site-bg__blob--dark-1"></div>
       <div class="site-bg__blob site-bg__blob--dark-2"></div>
     </div>
   Body/html should have `background: transparent` for it to show through. */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #050505;
  pointer-events: none;
}
.site-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.site-bg__blob--cyan-1 {
  width: 82vmin;
  height: 82vmin;
  top: -15%;
  left: -10%;
  background: radial-gradient(circle at center,
              rgba(0, 222, 222, 0.55) 0%,
              rgba(0, 222, 222, 0) 65%);
  animation: bg-drift-1 36s ease-in-out infinite;
}
.site-bg__blob--cyan-2 {
  width: 75vmin;
  height: 75vmin;
  bottom: -10%;
  right: -10%;
  background: radial-gradient(circle at center,
              rgba(0, 170, 170, 0.42) 0%,
              rgba(0, 170, 170, 0) 65%);
  animation: bg-drift-2 44s ease-in-out infinite;
}
.site-bg__blob--dark-1 {
  width: 97vmin;
  height: 97vmin;
  top: 25%;
  left: 35%;
  background: radial-gradient(circle at center,
              #1a1a1a 0%,
              transparent 65%);
  animation: bg-drift-3 40s ease-in-out infinite;
}
.site-bg__blob--dark-2 {
  width: 105vmin;
  height: 105vmin;
  bottom: 15%;
  left: 15%;
  background: radial-gradient(circle at center,
              #0f0f14 0%,
              transparent 65%);
  animation: bg-drift-4 48s ease-in-out infinite;
}

/* Grain overlay — breaks up the 8-bit banding you get from soft gradients.
   Static fractal-noise SVG tiled over the blobs at low opacity. */
.site-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

@keyframes bg-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30vw, 20vh) scale(1.1); }
  50%      { transform: translate(50vw, 55vh) scale(0.95); }
  75%      { transform: translate(10vw, 40vh) scale(1.05); }
}
@keyframes bg-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40vw, -25vh) scale(1.08); }
  66%      { transform: translate(-20vw, -50vh) scale(0.92); }
}
@keyframes bg-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30vw, 20vh) scale(1.15); }
}
@keyframes bg-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(28vw, -18vh) scale(1.1); }
  70%      { transform: translate(-15vw, -35vh) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__blob { animation: none; }
}

/* Mobile: giant blurs + mix-blend-mode + continuous transform animations
   tank framerate. Swap the whole thing for a static painted radial gradient
   that lands as one paint call and doesn't animate. */
@media (max-width: 768px), (pointer: coarse) {
  .site-bg {
    background:
      radial-gradient(60% 45% at 12% 18%, rgba(0, 222, 222, 0.22) 0%, rgba(0, 222, 222, 0) 70%),
      radial-gradient(55% 40% at 88% 82%, rgba(0, 170, 170, 0.14) 0%, rgba(0, 170, 170, 0) 70%),
      radial-gradient(70% 50% at 55% 55%, rgba(30, 30, 30, 0.55) 0%, rgba(30, 30, 30, 0) 70%),
      #050505;
  }
  .site-bg__blob,
  .site-bg::after {
    display: none;
  }
}