/*
 * hub-theme-zen: lo propio de Bruma (la mañana con neblina). La forma común con Noche está en ../zen.css y los tokens en
 * ../tokens.css. El fondo (sol difuso, montañas por capas, pinos, fiordo y pájaros) es el boceto del mockup aprobado.
 *
 * Movimiento ambiental (D2, design-notes §2 · F-04: tiene que verse): los bancos de neblina `.mist` del mismo boceto
 * (art/build-layers.mjs), en 2 capas encima del fondo y detrás del contenido, sin eventos, que cruzan a distinto ritmo:
 *   body::before  neblina alta y media: ±180 px en 110 s, ida y vuelta
 *   body::after   neblina baja y del fiordo: ±140 px en 80 s, en sentido contrario
 * Solo transform. Se apaga con prefers-reduced-motion (queda quieta). 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="bruma"] body::before,
html[data-theme="bruma"] body::after {
  content: ''; position: fixed; inset: 0 -220px; z-index: -1; pointer-events: none;
  background: center / cover no-repeat; will-change: transform;
}
html[data-theme="bruma"] body::before { background-image: url(/themes/bruma/neblina-a.svg); }
html[data-theme="bruma"] body::after { background-image: url(/themes/bruma/neblina-b.svg); }
html[data-kh][data-theme="bruma"] body::before, html[data-kh][data-theme="bruma"] body::after { position: fixed; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="bruma"] body::before { animation: kh-bruma-cruza 110s ease-in-out infinite alternate; }
  html[data-theme="bruma"] body::after { animation: kh-bruma-cruza-b 80s ease-in-out infinite alternate; }
}
@keyframes kh-bruma-cruza { from { transform: translate3d(-180px, 0, 0); } to { transform: translate3d(180px, -8px, 0); } }
@keyframes kh-bruma-cruza-b { from { transform: translate3d(140px, 0, 0); } to { transform: translate3d(-140px, 6px, 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="bruma"] :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) en azul fiordo */
html[data-theme="bruma"] :is(.kh-greet__text, .kh-rooms__sub) { font-style: italic; color: var(--t-link); }
html[data-theme="bruma"] .kh-greet__title { color: var(--t-text); }
/* Tema claro: las sombras de Casino (pensadas para fondo oscuro) se suavizan */
html[data-theme="bruma"] :is(.kh-game, .kh-room, .kh-featured) { box-shadow: var(--t-shadow-card); }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="bruma"] .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; }
}