/* ══════════════════════════════════════════════
   FONDO ANIMADO COMPARTIDO — PatriciaSpanish
   Arcoíris + estrellas + sparkles flotantes
   Usar junto con background-effects.js
   ══════════════════════════════════════════════ */

.rainbow-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
}

.stars-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  animation: sparklePop var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  font-size: var(--size);
  left: var(--x);
  top: var(--y);
  opacity: 0;
}

@keyframes sparklePop {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* Nota: cualquier contenido real de la página debe llevar
   position: relative; z-index: 10; (o superior) para quedar
   por encima de este fondo. */