/*
  Fondo cinematográfico de la mina para la pantalla de registro.

  El canvas ocupa toda la ventana en position:fixed detrás del formulario.
  Encima va un velo oscuro para que el texto blanco y el botón naranja del
  formulario se lean sin competir con la imagen.
*/

/*
  El body de la app trae un radial-gradient azul propio del kiosk. En la
  pantalla de registro lo tapamos para que se vea el fondo de la mina —
  las otras apps (ruleta, flappy) conservan su fondo porque cargan otros
  html.
*/
.body--registro {
  background: #0a0705 !important;
}

.mine-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #0a0705;
  display: block;
}

.mine-bg__overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(4, 12, 26, 0.35) 0%, rgba(2, 8, 20, 0.72) 100%);
}


/* ------------------------------------------- fondo vertical (tótem/tablet) */

/*
  El canvas de arriba es una escena APAISADA: sus tres capas
  (assets/mine-bg/*.jpg) son de 1376x768 y js/mine-bg.js las dibuja a las
  medidas del canvas, sin conservar proporción. En un tótem 2160x3840 eso no
  recorta el tajo abierto: lo aplasta a 9:16 y encima estira 1376 px de ancho
  hasta 2160 (4320 con DPR 2), así que sale deformado y blando.

  En vertical, entonces, se apaga el canvas y manda una foto ya encuadrada a
  9:16 (assets/fondos/inicio.jpg, se genera con `npm run fondos`).

  La foto va como background y no como <img> por una razón concreta: un <img>
  el navegador lo descarga aunque esté en display:none, así que en una laptop
  se bajaría una foto vertical que nunca se muestra. Un background declarado
  dentro de un @media que no aplica no se pide jamás. El precio es que no hay
  `srcset`, y la elección de tamaño hay que escribirla a mano —abajo—, pero
  los dos formatos de destino los conocemos de antemano.
*/

.mina-vertical {
  display: none;
}

@media (orientation: portrait) {

  .mine-bg {
    display: none;
  }

  .mina-vertical {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /*
      `cover` + foco al 62%: la foto es 9:16 exacta, así que en el tótem entra
      entera y el foco da igual. En tablets más cuadradas (4:3, 3:4) sobra
      alto y el recorte se lleva el techo del túnel —que es sólo roca y
      tubería— conservando a los mineros y las vías, que es lo que hay que
      ver. El color de debajo tapa el hueco mientras la foto carga.
    */
    background: #0a0705 center 62% / cover no-repeat;

    /*
      Tablets. `image-set()` resuelve dos ejes a la vez: el formato (AVIF si
      el navegador lo soporta, si no JPG) y la densidad (1x/2x), que es lo que
      distingue a una tablet de 810 px DPR 1 de una de 810 px DPR 2.
    */
    /*
      Dos declaraciones a propósito: un navegador que no entienda `image-set()`
      descarta esa línea entera y se queda con el JPG de arriba —mejor blando
      que negro—. El que sí la entiende pisa la primera y sólo descarga la que
      gana.
    */
    background-image: url('../assets/fondos/inicio-md.jpg');
    background-image: image-set(
      url('../assets/fondos/inicio-md.avif') type('image/avif') 1x,
      url('../assets/fondos/inicio-lg.avif') type('image/avif') 2x,
      url('../assets/fondos/inicio-md.jpg')  type('image/jpeg') 1x,
      url('../assets/fondos/inicio-lg.jpg')  type('image/jpeg') 2x
    );
  }

}

/*
  Tótem 4K. Son 2160 px de ancho CSS a DPR 1, así que por densidad le tocaría
  el 1x —la foto de 1080— y se vería blanda estirada al doble. A partir de
  1600 px de ancho en vertical no hay tablet posible: es el tótem, y siempre
  va la grande.
*/
@media (orientation: portrait) and (min-width: 1600px) {

  .mina-vertical {
    background-image: url('../assets/fondos/inicio-lg.jpg');
    background-image: image-set(
      url('../assets/fondos/inicio-lg.avif') type('image/avif'),
      url('../assets/fondos/inicio-lg.jpg')  type('image/jpeg')
    );
  }

}