/*
 * hub-theme-zen: lo propio de Noche (la noche estrellada). La forma común con Bruma está en ../zen.css y los tokens en
 * ../tokens.css. El fondo (cielo, nebulosas, montañas, pinos y agua) es el boceto del mockup aprobado (bg-wide / bg-tall).
 *
 * Movimiento ambiental (D2, design-notes §2 · F-04: tiene que verse): capas sacadas del mismo boceto del mockup
 * (art/build-layers.mjs), encima del fondo y detrás del contenido, sin eventos:
 *   body::before  nebulosa (`.neb`): deriva ±60 px en 80 s, ida y vuelta
 *   body::after   estrellas A (`.tw`): titilan 7 s
 *   html::before  estrellas B: titilan 9 s, desfasadas
 *   html::after   estrellas C (con las de 4 puntas): titilan 11 s, desfasadas
 * Solo transform y opacity. Se apaga con prefers-reduced-motion (quedan quietas). Los juegos se abren en su propia
 * página, así que nada se mueve mientras se juega, y el navegador detiene las animaciones de una pestaña oculta.
 */

html[data-theme="noche"] body::before,
html[data-theme="noche"] body::after,
html[data-theme="noche"]::before,
html[data-theme="noche"]::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  background: center / cover no-repeat; will-change: transform, opacity;
}
html[data-theme="noche"] body::before { inset: -90px; background-image: url(/themes/noche/nebulosa.svg); }
html[data-theme="noche"] body::after { inset: 0; background-image: url(/themes/noche/estrellas-a.svg); }
html[data-theme="noche"]::before { inset: 0; background-image: url(/themes/noche/estrellas-b.svg); }
html[data-theme="noche"]::after { inset: 0; background-image: url(/themes/noche/estrellas-c.svg); }
html[data-kh][data-theme="noche"] body::before, html[data-kh][data-theme="noche"] body::after,
html[data-kh][data-theme="noche"]::before, html[data-kh][data-theme="noche"]::after { position: fixed; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="noche"] body::before { animation: kh-noche-nebulosa 80s ease-in-out infinite alternate; }
  html[data-theme="noche"] body::after { animation: kh-noche-titila 7s ease-in-out infinite; }
  html[data-theme="noche"]::before { animation: kh-noche-titila 9s ease-in-out -3s infinite; }
  html[data-theme="noche"]::after { animation: kh-noche-titila 11s ease-in-out -6s infinite; }
}
@keyframes kh-noche-titila { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes kh-noche-nebulosa { from { transform: translate3d(-60px, 10px, 0); } to { transform: translate3d(60px, -20px, 0); } }

/* Íconos: piedra de río (el arte del hub ya trae la piedra; los del juego se recortan con la misma forma) */
html[data-theme="noche"] :is(.kh-game__icon, .kh-room__icon, .kh-rk-game__icon, .kh-mis-card__icon) {
  border-radius: var(--t-radius-icon);
}
/* Saludo y bajadas en cursiva (Newsreader), puestos en luz de estrella */
html[data-theme="noche"] :is(.kh-greet__text, .kh-rooms__sub) { font-style: italic; color: var(--t-link); }
html[data-theme="noche"] .kh-greet__title { color: var(--t-text); }
/* Punto «entra cuando quieras»: respiración del halo (4 s) */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="noche"] .kh-room__state[data-state="live"]::before { animation: kh-zen-respira 4s ease-in-out infinite; }
}
@keyframes kh-zen-respira {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--t-live) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}