/* bl-particles · blomon-base */
.bl-particles {
  position: relative;
  display: block;
  line-height: 0;
}

/* La imagen fuente NO se ve en el front: el bloque debe empezar ya en
   partículas. Sigue en el DOM porque es de donde el efecto saca los píxeles
   (y porque es el respaldo si el efecto no puede arrancar), pero arranca
   invisible.

   RED DE SEGURIDAD, sin JS: si a los 3 s nadie ha marcado el bloque, la
   imagen se revela sola. Cubre el caso de que el JS no llegue a ejecutarse
   (404 del archivo, error de otro script). En cuanto el módulo se monta añade
   .is-armed y esta animación queda cancelada, así que en condiciones normales
   no llega a dispararse nunca — ni en los bloques que están más abajo de la
   pantalla, que no arrancan hasta que te acercas. */
.bl-particles__img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: bl-particles-rescate 0.3s linear 3s forwards;
}

@keyframes bl-particles-rescate {
  to { opacity: 1; }
}

.bl-particles.is-armed .bl-particles__img,
.bl-particles.is-ready .bl-particles__img {
  animation: none;
  opacity: 0;
}

/* El efecto no puede arrancar (sin WebGL, imagen ilegible, shader que falla):
   lo marca el JS y la imagen se queda a la vista, como antes. */
.bl-particles.is-fallback .bl-particles__img {
  animation: none;
  opacity: 1;
}

/* las imágenes siguientes solo sirven de fuente para las partículas */
.bl-particles img:not(.bl-particles__img) { display: none; }

/* Sin transición al aparecer: el primer fotograma del canvas ya es la imagen
   formada en partículas, así que cualquier cruce solo se vería como un
   parpadeo. */
.bl-particles__canvas {
  position: absolute;
  pointer-events: none; /* no bloquea enlaces ni botones cercanos */
  opacity: 0;
}
.bl-particles.is-ready .bl-particles__canvas { opacity: 1; }

/* Con "reducir movimiento" el JS no arranca: se ve la imagen normal. El
   !important es necesario porque gana a la animación de rescate. */
@media (prefers-reduced-motion: reduce) {
  .bl-particles__canvas { display: none; }
  .bl-particles .bl-particles__img {
    animation: none !important;
    opacity: 1 !important;
  }
}