/* ── BACKGROUND.CSS — grid, aurora blobs, particles ── */

/* Animated dot grid */
.bg-grid {
  position: fixed; inset: 0; z-index: var(--z-background);
  overflow: hidden; pointer-events: none;
}
.bg-grid::before {
  content: '';
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gmove 25s linear infinite;
  will-change: transform;
}
@keyframes gmove {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(60px, 60px, 0); }
}

/* Aurora blobs — blurred radial gradients */
.aurora {
  position: fixed; inset: 0; z-index: var(--z-background);
  pointer-events: none; overflow: hidden;
}
.ab {
  position: absolute; border-radius: 50%;
  filter: blur(120px);
  animation: apulse ease-in-out infinite;
  will-change: transform, opacity;
}
.ab.a1 {
  width:700px; height:500px; top:-100px; left:-200px;
  background: radial-gradient(ellipse, rgba(0,212,255,.055), transparent 70%);
  animation-duration: 8s;
}
.ab.a2 {
  width:600px; height:600px; top:30%; right:-150px;
  background: radial-gradient(ellipse, rgba(168,85,247,.045), transparent 70%);
  animation-duration: 11s; animation-delay: -3s;
}
.ab.a3 {
  width:800px; height:400px; bottom:-100px; left:30%;
  background: radial-gradient(ellipse, rgba(255,107,53,.035), transparent 70%);
  animation-duration: 13s; animation-delay: -6s;
}
@keyframes apulse {
  0%,100% { transform: scale(1) translate(0,0);       opacity: .6; }
  50%      { transform: scale(1.12) translate(25px,-15px); opacity: 1; }
}

/* Particle container — JS populates .p elements */
.particles {
  position: fixed; inset: 0; z-index: var(--z-particles); pointer-events: none;
}
.p {
  position: absolute; border-radius: 50%;
  animation: pfloat linear infinite; opacity: 0;
  will-change: transform, opacity;
}
@keyframes pfloat {
  0%   { transform: translateY(100vh);                  opacity: 0; }
  10%  {                                                 opacity: .8; }
  90%  {                                                 opacity: .8; }
  100% { transform: translateY(-10vh) translateX(60px); opacity: 0; }
}