/* ==========================================================================
   sparkles.css — Destellos titilantes de fondo
   Módulo autocontenido, complementario a hearts.css. Depende de
   #sparkles-bg (creado en index.html) y de los elementos .sparkle
   generados dinámicamente por sparkles.js.
   ========================================================================== */

/* Contenedor de fondo: fijo, detrás de todo (por debajo de los corazones),
   no bloquea clics */
#sparkles-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Destello individual: puntito estático que titila (aparece/desaparece)
   en una posición fija de la pantalla. Variables CSS asignadas desde JS:
   --x       posición horizontal (en vw)
   --y       posición vertical (en vh)
   --size    tamaño en px
   --opacity opacidad máxima del destello
   --dur     duración del ciclo de titileo (s)
   --delay   retraso antes de iniciar (s) */
.sparkle {
  position: absolute;
  left: var(--x, 50vw);
  top: var(--y, 50vh);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: #fff6d9;
  box-shadow: 0 0 6px 1px rgba(255, 235, 190, 0.8);
  opacity: 0;
  will-change: opacity, transform;
  animation-name: sparkle-twinkle;
  animation-duration: var(--dur, 3s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes sparkle-twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.4);
  }
  50% {
    opacity: var(--opacity, 0.75);
    transform: scale(1);
  }
}

/* Accesibilidad: si el usuario prefiere menos movimiento, mostramos solo
   unos pocos destellos fijos y tenues, sin animación de titileo. */
@media (prefers-reduced-motion: reduce) {
  .sparkle {
    animation: none !important;
    opacity: var(--opacity, 0.35) !important;
    transform: none !important;
  }
}