/* background.css — blob-layer, blobs, drift keyframes, grain.
   Generated from reference/styles.css (lines 60-117). */

/* ========== BLOB LAYER (fixed, behind everything) ========== */
.blob-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(99,102,241,0.08), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, rgba(168,85,247,0.08), transparent 60%),
    radial-gradient(1100px 900px at 50% 100%, rgba(34,211,238,0.06), transparent 60%),
    var(--bg-0);
}
.blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
  border-radius: 50%;
}
.blob.b1 { width: 620px; height: 620px; left: -120px; top: -140px;
  background: radial-gradient(circle at 30% 30%, var(--a-indigo), transparent 70%);
  animation: drift1 28s ease-in-out infinite; }
.blob.b2 { width: 520px; height: 520px; right: -80px; top: 20vh;
  background: radial-gradient(circle at 40% 40%, var(--a-violet), transparent 70%);
  animation: drift2 34s ease-in-out infinite; }
.blob.b3 { width: 700px; height: 700px; left: 30vw; top: 60vh;
  background: radial-gradient(circle at 50% 50%, var(--a-cyan), transparent 70%);
  animation: drift3 40s ease-in-out infinite; }
.blob.b4 { width: 450px; height: 450px; right: 10vw; bottom: -10vh;
  background: radial-gradient(circle at 50% 50%, var(--a-rose), transparent 70%);
  animation: drift1 36s ease-in-out infinite reverse; }

@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(120px, 80px) scale(1.1); }
  66%     { transform: translate(-60px, 140px) scale(0.95); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-180px, 100px) scale(1.15); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-140px, -60px) scale(1.08); }
  66%     { transform: translate(80px, -120px) scale(0.92); }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}