/* ═══════════════════════════════════════════════════════════════
   LA ESCENA DE UNA PÁGINA DEL SALÓN — sección 99 del esquema
   ---------------------------------------------------------------
   Dos ejes independientes: el FONDO es el decorado (quieto, decide
   el sitio) y las PARTÍCULAS son el movimiento (deciden el clima).

   POR QUÉ ES UN FICHERO APARTE Y NO ESTÁ EN hall/index.html
   Lo usan dos páginas: el Salón (para pintar la escena de verdad) y
   el creador (para la muestra en vivo de los desplegables). Con las
   reglas dentro del <style> de hall/index.html habría que copiarlas, y una
   muestra copiada acaba enseñando una cosa y la página otra. Mismo
   motivo que css/salon/hall-auras.css.

   Las figuras (luna, telaraña, araña, murciélago, hoja, horizonte)
   las dibuja window.PLSiluetas, en js/nucleo/theme-switcher.js — las mismas
   que usa el tema de Puzzleween. Aquí solo se colocan y se tiñen.
   ═══════════════════════════════════════════════════════════════ */

.hall-escenario { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ── Qué capas de las de siempre se ven en cada fondo ── */
/* «liso» apaga todo lo ambiental y deja solo el degradado; los
   demás encienden lo que les toca. Se apaga en vez de encender
   porque el HTML trae las capas escritas: son de la escena de
   siempre y el modo Global las necesita. */
.hall-escena.fondo-liso .hall-haz,
.hall-escena.fondo-liso .hall-emisor,
.hall-escena.fondo-liso .hall-estrella-capa,
.hall-escena.fondo-cripta .hall-haz,
.hall-escena.fondo-cripta .hall-emisor { opacity: 0; }

/* Las estrellas están ocultas en modo página (son del Salón
   global); estos dos fondos las recuperan. */
.hall-escena.modo-pagina.fondo-estrellas .hall-estrella-capa,
.hall-escena.modo-pagina.fondo-luna .hall-estrella-capa,
.hall-escena.modo-pagina.fondo-cripta .hall-estrella-capa { display: block; }

/* ── La luna ──────────────────────────────────────────────── */
/* Velada. Va detrás del contenido pero el texto le pasa por
   encima al hacer scroll, y un disco crema a plena opacidad deja
   ilegible el párrafo que le cruce. Mismo criterio que en el tema
   de Puzzleween. */
.hall-luna {
  position: absolute; top: 7%; right: 9%;
  width: 13rem; height: 13rem; opacity: 0.28;
  filter: drop-shadow(0 0 2.2rem rgba(var(--hall-haz), 0.45))
          drop-shadow(0 0 6rem rgba(var(--hall-haz), 0.22));
}

/* ── Telarañas ────────────────────────────────────────────── */
.hall-tela {
  position: absolute; top: 0;
  width: 11rem; height: 11rem; opacity: 0.3; overflow: visible;
}
.hall-tela.izq { left: 0; }
.hall-tela.der { right: 0; transform: scaleX(-1); }
.hall-tela .pl-tela-radio,
.hall-tela .pl-tela-hilo {
  fill: none; stroke: rgb(var(--hall-haz));
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.hall-tela .pl-tela-radio { stroke-width: 1.1px; opacity: 1; }
.hall-tela .pl-tela-hilo  { stroke-width: 0.7px; opacity: 0.7; }

/* La araña y su hilo comparten punto de giro, arriba del todo:
   así el hilo se mantiene recto mientras el conjunto se balancea. */
.hall-hilo {
  position: absolute; top: 0; left: 6.5rem;
  width: 1px; height: 6rem;
  background: linear-gradient(to bottom,
    rgba(var(--hall-haz), 0), rgba(var(--hall-haz), 0.4));
  transform-origin: 50% 0;
  animation: hallColumpio 9s ease-in-out infinite;
}
.hall-arana {
  position: absolute; top: 6rem; left: 6.5rem;
  width: 2.1rem; height: 1.6rem; margin-left: -1.05rem;
  opacity: 0.68; transform-origin: 1.05rem -6rem;
  animation: hallColumpio 9s ease-in-out infinite;
}
.hall-arana .pl-arana-patas path {
  fill: none; stroke: #0d0812; stroke-width: 2.1; stroke-linecap: round;
}

/* ── El horizonte ─────────────────────────────────────────── */
/* Puede ir a opacidad alta porque es OSCURO: sobre el texto claro
   del Salón, una silueta negra detrás de una letra la hace más
   legible, no menos. */
.hall-horizonte {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 11rem; opacity: 0.92;
}
.hall-horizonte .pl-loma,
.hall-horizonte .pl-siluetas path,
.hall-horizonte .pl-verja { fill: #05030a; }
.hall-horizonte .pl-loma { fill: #08050e; }
.hall-horizonte .pl-arbol path { fill: none; stroke: #05030a; stroke-linecap: round; }
/* Las ventanas encendidas se tiñen con el aura: son la única luz
   cálida de la escena y tienen que ser del color de la fiesta. */
.hall-horizonte .pl-ventana {
  fill: rgb(var(--hall-haz));
  filter: drop-shadow(0 0 6px rgba(var(--hall-haz), 0.8));
  animation: hallVela 3.1s ease-in-out infinite;
}
.hall-horizonte .pl-ventana-torre { animation-duration: 4.7s; animation-delay: -1.6s; }

.hall-niebla {
  position: absolute; left: -25%; right: -25%; bottom: 0; height: 12rem;
  background:
    radial-gradient(ellipse 42% 60% at 20% 94%, rgba(var(--hall-haz), 0.10), transparent 70%),
    radial-gradient(ellipse 46% 56% at 62% 99%, rgba(var(--hall-haz), 0.08), transparent 70%),
    radial-gradient(ellipse 34% 50% at 88% 95%, rgba(var(--hall-haz), 0.07), transparent 70%);
  animation: hallNiebla 34s ease-in-out infinite alternate;
}

/* ══════════════════════════════════════════════════════════════
   PARTÍCULAS
   Una sola clase base y un modificador por tipo. Lo que cambia es
   la forma, el sentido de la marcha y la velocidad: las brasas
   suben, la ceniza y las hojas caen, el polvo flota casi quieto y
   los murciélagos cruzan.
   ══════════════════════════════════════════════════════════════ */

.hall-part {
  position: absolute; left: 0;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}

/* Brasas — las de siempre. Suben la pantalla entera. */
.hall-part-brasa {
  bottom: -5vh; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%,
    rgb(var(--hall-haz)) 42%, rgba(var(--hall-haz), 0.65) 75%, transparent 100%);
  box-shadow: 0 0 6px rgba(var(--hall-haz), 0.85), 0 0 14px rgba(var(--hall-haz), 0.5);
  animation: hallSubeParticula var(--dur, 9s) linear var(--ret, 0s) infinite;
}

/* Polvo — motas en suspensión. Suben, pero apenas: la duración es
   el triple y el recorrido, un tercio. Se lee como aire quieto. */
.hall-part-polvo {
  bottom: -2vh; border-radius: 50%;
  background: rgb(var(--hall-haz));
  box-shadow: 0 0 5px rgba(var(--hall-haz), 0.7);
  animation: hallFlota calc(var(--dur, 9s) * 3) linear var(--ret, 0s) infinite;
}

/* Ceniza — cae recta y lenta, con una deriva mínima. */
.hall-part-ceniza {
  top: -4vh; border-radius: 50%;
  background: rgba(var(--hall-haz), 0.85);
  box-shadow: 0 0 4px rgba(var(--hall-haz), 0.45);
  animation: hallCae calc(var(--dur, 9s) * 1.6) linear var(--ret, 0s) infinite;
}

/* Hojas — caen girando sobre sí mismas. */
.hall-part-hoja {
  top: -6vh; width: var(--tam, 15px); height: var(--tam, 15px);
  color: rgb(var(--hall-haz));
  animation: hallCaeGirando var(--dur, 12s) linear var(--ret, 0s) infinite;
}
.hall-part-hoja .hall-part-svg { display: block; width: 100%; height: 100%; }

/* Murciélagos — cruzan de derecha a izquierda, subiendo. El vuelo
   va en el contenedor y el aleteo en el SVG: una sola animación
   no puede llevar el translate y el scale por caminos distintos. */
.hall-part-murcielago {
  left: 100%; width: var(--tam, 30px);
  animation: hallCruza var(--dur, 22s) linear var(--ret, 0s) infinite;
}
.hall-part-bat {
  display: block; width: 100%; height: auto;
  color: #120a1a;
  filter: drop-shadow(0 0 2px rgba(var(--hall-haz), 0.5))
          drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
  transform-origin: 50% 40%;
  animation: hallAleteo var(--aleteo, 0.32s) ease-in-out infinite;
}

@keyframes hallSubeParticula {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  8%   { opacity: var(--op, 1); }
  80%  { opacity: var(--op, 1); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -110vh, 0) scale(0.2); }
}
@keyframes hallFlota {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  14%  { opacity: var(--op, 0.6); }
  86%  { opacity: var(--op, 0.6); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -38vh, 0); }
}
@keyframes hallCae {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  10%  { opacity: var(--op, 0.7); }
  88%  { opacity: var(--op, 0.7); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), 108vh, 0); }
}
@keyframes hallCaeGirando {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10%  { opacity: var(--op, 0.5); }
  88%  { opacity: var(--op, 0.5); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), 108vh, 0) rotate(var(--giro, 360deg)); }
}
@keyframes hallCruza {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  6%   { opacity: var(--op, 0.55); }
  92%  { opacity: var(--op, 0.55); }
  100% { opacity: 0; transform: translate3d(calc(-100vw - 6rem), var(--subida, -12%), 0); }
}
@keyframes hallAleteo {
  0%, 100% { transform: scaleX(1)    scaleY(1); }
  50%      { transform: scaleX(0.42) scaleY(1.16); }
}
@keyframes hallColumpio {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes hallVela {
  0%, 100% { opacity: 1; }
  44%      { opacity: 0.8; }
  49%      { opacity: 0.6; }
  54%      { opacity: 0.95; }
  72%      { opacity: 0.76; }
}
@keyframes hallNiebla {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* Móvil: la araña y los murciélagos se van. Son los dos únicos
   adornos que cruzan de lado a lado, y en una pantalla estrecha
   pasan por delante del texto más de lo que adornan. */
@media (max-width: 620px) {
  .hall-luna { width: 8rem; height: 8rem; }
  .hall-tela { width: 7rem; height: 7rem; }
  .hall-hilo, .hall-arana, .hall-part-murcielago { display: none; }
  .hall-horizonte { height: 7rem; }
}