/* ================
   Canvas de partículas + capa de “Aurora/Mesh”
   (no requiere cambios en el HTML)
   ================ */

/* Lienzo de partículas (detrás) */
#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;            /* capa más baja */
  display: block;
  pointer-events: none;
}

/* Capa aurora/mesh sobre el canvas y bajo el contenido */
body::before,
body::after{
  content: "";
  position: fixed;
  inset: -15% -10%;      /* sobresale para que el blur no “corte” bordes */
  z-index: 1;            /* entre canvas (0) y contenido (.overlay z=2) */
  pointer-events: none;
  filter: blur(60px);
  opacity: .65;
  transform: translate3d(0,0,0);
}

/* Blob principal con conic/radial mix (violeta/cyan) */
body::before{
  background:
    radial-gradient(800px 600px at 20% 30%, rgba(124,58,237,.32), transparent 60%),
    radial-gradient(600px 500px at 80% 20%, rgba(34,211,238,.22), transparent 60%),
    conic-gradient(from 180deg at 50% 50%, rgba(167,139,250,.18), rgba(34,211,238,.14), rgba(244,114,182,.12), rgba(167,139,250,.18));
  animation: auroraShift 30s linear infinite;
}

/* Blob secundario para “mesh” sutil */
body::after{
  background:
    radial-gradient(700px 540px at 70% 75%, rgba(244,114,182,.18), transparent 60%),
    radial-gradient(500px 420px at 30% 75%, rgba(124,58,237,.22), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraDrift 42s linear infinite reverse;
  opacity: .55;
}

/* Animaciones muy lentas (no marean ni aceleran) */
@keyframes auroraShift {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-1%, -1%, 0) rotate(2deg) scale(1.02); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(1%, 1%, 0) rotate(-2deg) scale(1.015); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* Respeta usuarios con “reduce motion” */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
}