/* ---------- background auras ---------- */
.auras {
  position: fixed;
  inset: 0;
  z-index: -3;
  filter: blur(100px) saturate(130%);
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  mix-blend-mode: screen;
}

.blob-1 {
  width: 55vmax; height: 55vmax;
  background: var(--violet);
  top: -15vmax; left: -10vmax;
  animation: drift-1 22s ease-in-out infinite alternate;
}

.blob-2 {
  width: 45vmax; height: 45vmax;
  background: var(--cyan);
  bottom: -15vmax; right: -10vmax;
  opacity: 0.35;
  animation: drift-2 26s ease-in-out infinite alternate;
}

.blob-3 {
  width: 35vmax; height: 35vmax;
  background: var(--magenta);
  top: 40%; left: 45%;
  opacity: 0.35;
  animation: drift-3 30s ease-in-out infinite alternate;
}

.blob-cursor {
  width: 30vmax; height: 30vmax;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  left: var(--mx); top: var(--my);
  transform: translate(-50%, -50%);
  opacity: 0.3;
  transition: left 0.6s ease-out, top 0.6s ease-out;
}

@keyframes drift-1 { to { transform: translate(20vw, 15vh) scale(1.15); } }
@keyframes drift-2 { to { transform: translate(-25vw, -20vh) scale(0.9); } }
@keyframes drift-3 { to { transform: translate(-30vw, 10vh) scale(1.3); } }

.grain {
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
}