/* ─────────────────────────────────────────────────────────────────────
* Wonderland · Estrellas que caen · PATRÓN GLOBAL
*
* El cielo de Wonderland está siempre ahí. Toda página que NO tenga una
* imagen de cabecera propia lleva este fondo, para que el universo se
* sienta continuo — no una web con fondo oscuro, sino un lugar.
*
* Las estrellas no son decoración: son el símbolo central del proyecto
* (la constelación, los umbrales que se encienden, "el Gato enciende tus
* estrellas"). Que caigan de fondo es coherencia narrativa.
*
* USO · añadir en el :
*
* y antes de :
*
*
* El JS crea el contenedor y las partículas solo; no hay que tocar el HTML.
*
* NO aplicar en páginas con imagen de hero propia (capítulos, personajes):
* ahí el cielo ya lo pone la acuarela.
* ───────────────────────────────────────────────────────────────────── */
.wl-estrellas {
position: fixed;
inset: 0;
pointer-events: none; /* nunca interfiere con el contenido ni el scroll */
overflow: clip; /* clip, NO hidden · hidden atrapa el gesto en iOS */
/* z-index:0 (no -1). El de casi todas las páginas tiene fondo
* opaco; con -1 las estrellas quedarían pintadas DETRÁS de ese fondo y
* no se verían. Con 0 quedan sobre el fondo y bajo el contenido, que se
* pinta encima. Es lo mismo que ya funciona en territorios.html. */
z-index: 0;
}
.wl-estrellas .wl-particula {
position: absolute;
width: 2px;
height: 2px;
background: var(--gold-light, #e8d5a3);
border-radius: 50%;
animation: wlCaer linear infinite;
opacity: 0;
}
@keyframes wlCaer {
0% { transform: translateY(-20px) translateX(0); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.3; }
100% { transform: translateY(100vh) translateX(40px); opacity: 0; }
}
/* Respeto a quien prefiere no ver movimiento · las estrellas se quedan
* quietas en vez de caer. Wonderland no marea a nadie. */
@media (prefers-reduced-motion: reduce) {
.wl-estrellas .wl-particula {
animation: none;
opacity: 0.25;
}
}