/* ===========================================================================
   BOOT-DARK GAMES — efectos compartidos por las tres paginas del sitio.

   Vive en /demon-tiles/lib/ porque ese es un contexto ESTATICO de LiteSpeed:
   asi lo sirve el servidor directo y no Django, y las tres paginas se lo
   comen de la cache del navegador una sola vez.

   Cuatro cosas y ninguna mas:
     1. el lienzo de particulas
     2. los brillos (glow) por juego
     3. las entradas al hacer scroll
     4. el selector de idioma

   REGLA QUE NO SE SALTA: todo esto es ADORNO. Si el navegador pide menos
   movimiento, o si el JS no llega, la pagina tiene que quedarse exactamente
   igual de legible y con todo en su sitio. Por eso nada de esto coloca
   contenido: las particulas van en un canvas aparte, las entradas parten de
   opacidad 1 en el CSS base y solo el JS las apaga, y el selector de idioma se
   pinta desde JS (si no hay JS, no hay boton muerto en la barra).
   ======================================================================== */

/* ========================================================= FONDO DE VIDEO
   El componente vive AQUI, no en cada pagina. Se quedo una vez solo en la
   pagina de Demon Tiles y las otras dos maquetaron el <video> y su poster en
   el flujo, como dos fotos enormes en mitad de la portada: si el componente
   esta en tres sitios, tarde o temprano falta en uno.

   El poster (.cartel) va DEBAJO y no se quita nunca: si el video no arranca
   -iOS con ahorro de datos, Data Saver, o animaciones reducidas- lo que queda
   es la imagen y no un rectangulo negro.
   El scrim de encima no es adorno: sin el, el texto blanco sobre gameplay de
   colores no se lee, y eso es un fallo de accesibilidad, no de gusto. Cada
   pagina puede cambiarle el degradado; el resto se queda como esta. */
.vidbg{position:absolute;inset:0;overflow:hidden;z-index:0;background:#07080a}
.vidbg video,.vidbg .cartel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* el gameplay es MUY colorido; bajarle saturacion y brillo lo devuelve al
     sitio que le toca, que es el fondo */
  filter:saturate(.92) brightness(.7) contrast(1.06);
}
.vidbg video{opacity:0;transition:opacity .9s ease}
.vidbg video.visible{opacity:1}
.vidbg .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,10,.60) 0%,rgba(7,8,10,.14) 34%,rgba(10,11,13,.92) 88%,var(--bg,#0a0b0d) 100%);
}

/* ============================================================ PARTICULAS
   El canvas va ENTRE el video y el texto: por encima del gameplay para que
   se vean flotando sobre el, y por debajo del contenido para no comerse ni
   un clic. pointer-events:none es justo eso. */
.particulas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.4s ease;
}
.particulas.encendido{opacity:1}

/* el contenido de una portada con particulas tiene que subir por encima */
.hero .dentro,.hero .env,.mitad .dentro{z-index:2}

/* ================================================================= BRILLOS
   Un glow no es "ponerle sombra a todo": es UNA fuente de luz por bloque, en
   el color del juego que manda ahi. Si brillan cinco cosas a la vez, no
   brilla ninguna.  Cada seccion declara su color en --glow y hereda. */
.glow{text-shadow:0 0 28px rgba(255,255,255,.18)}
.glow-fd{--glow:255,209,46}
.glow-dt{--glow:170,255,60}
.glow-fd h1,.glow-fd h2,.glow-dt h1,.glow-dt h2{
  text-shadow:0 0 34px rgba(var(--glow),.26), 0 2px 18px rgba(0,0,0,.75);
}

/* el halo que respira detras de un logo o un icono */
.halo{position:relative}
.halo::before{
  content:"";position:absolute;left:50%;top:50%;
  width:180%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(var(--glow,255,255,255),.22) 0%,rgba(var(--glow,255,255,255),0) 62%);
  z-index:-1;pointer-events:none;
  animation:respira 5.5s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.06)}
}

/* botones: el brillo aparece al pasar por encima, no de fabrica */
.btn,.btn-primary{position:relative}
.btn:hover{box-shadow:0 0 30px rgba(var(--glow,255,255,255),.22)}
.btn-primary:hover{box-shadow:0 0 34px rgba(var(--glow,255,255,255),.34)}

/* tarjetas: la franja de color se enciende al pasar por encima */
.card,.panel{--glow:255,255,255}
@media (hover:hover){
  .card:hover::before,.panel:hover::before{box-shadow:0 0 18px 1px rgba(var(--glow),.75)}
  .card::before,.panel::before{transition:box-shadow .25s ease}
}

/* la raya de colores de los carriles, pero encendida */
.carriles,.raya-color{
  box-shadow:0 0 22px rgba(255,255,255,.28), 0 0 6px rgba(255,255,255,.45);
}

/* ====================================================== ENTRADAS AL SCROLL
   OJO AL ORDEN: el estado visible es el de FABRICA. Solo cuando el JS
   confirma que puede animar le pone .anim al <html>, y entonces -y solo
   entonces- los elementos empiezan escondidos. Asi, sin JS o con un error,
   la pagina se ve entera igual. */
html.anim [data-rev]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
html.anim [data-rev].visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.anim [data-rev]{opacity:1!important;transform:none!important;transition:none}
  .halo::before,.particulas{animation:none}
}

/* ========================================================= NUMEROS QUE SUBEN
   El contador solo cambia el texto; el hueco lo reserva el CSS con
   tabular-nums para que el bloque no baile mientras cuenta. */
[data-num]{font-variant-numeric:tabular-nums}

/* =============================================================== IDIOMA
   Dos letras, no una bandera: una bandera dice pais, no idioma, y el
   espanol no es de un solo pais. */
.idioma{display:inline-flex;align-items:center;border:1px solid var(--line,#2b2f37);border-radius:999px;overflow:hidden;flex:none}
.idioma button{
  appearance:none;background:none;border:0;cursor:pointer;
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.06em;
  color:var(--txt3,#6b727c);padding:9px 11px;min-height:36px;
  transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.idioma button + button{border-left:1px solid var(--line,#2b2f37)}
.idioma button:hover{color:var(--txt,#f2f4f7)}
.idioma button[aria-pressed="true"]{background:var(--txt,#f2f4f7);color:#07080a}

/* mientras el JS cambia de idioma, un parpadeo corto para que se note que
   la pagina ha hecho caso */
.cambiando [data-i18n]{animation:pestaneo .42s ease}
@keyframes pestaneo{from{opacity:.25}to{opacity:1}}

/* ============================================================== SEPARADOR
   El zigzag de Final Dash y los cinco carriles de Demon Tiles, en SVG, como
   costura entre secciones. Es decoracion pura: aria-hidden y sin texto. */
.separador{display:block;width:100%;height:26px;opacity:.5}
.separador path,.separador rect{vector-effect:non-scaling-stroke}