/* ============================================================
   GLOBAL ANIMATED BACKGROUND
   ============================================================ */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--void);
}

.bg-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
  opacity: 0.6;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  will-change: transform;
}
.bg-blob--1 {
  width: 46vw; height: 46vw;
  top: -12vw; left: -10vw;
  background: radial-gradient(circle, var(--violet), transparent 70%);
  animation: driftA 26s ease-in-out infinite alternate;
}
.bg-blob--2 {
  width: 40vw; height: 40vw;
  top: 20vh; right: -14vw;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  animation: driftB 32s ease-in-out infinite alternate;
}
.bg-blob--3 {
  width: 36vw; height: 36vw;
  bottom: -14vw; left: 20vw;
  background: radial-gradient(circle, var(--pink), transparent 70%);
  animation: driftC 30s ease-in-out infinite alternate;
}

@keyframes driftA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, 8vh) scale(1.15); }
}
@keyframes driftB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-7vw, 6vh) scale(1.1); }
}
@keyframes driftC {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5vw, -6vh) scale(1.12); }
}

.bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

#particleField {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

@media (max-width: 700px) {
  .bg-grid { background-size: 42px 42px; }
}