/* ==========================================================================
   mobile.css — Versión vertical
   ==========================================================================

   Va enlazada la última, así que puede sobrescribir a las demás.

   Casi todo el trabajo de la versión móvil NO está aquí: está en js/mobile.js,
   que cambia el lienzo por uno vertical de 1080x2160 y vuelve a repartir la
   maqueta encima. Como todas las medidas del proyecto llegan al CSS como
   variables, esas reglas ya escritas valen igual para el lienzo vertical sin
   tocar una línea.

   Aquí quedan solo las cuatro cosas que una plantilla no puede expresar.
   ========================================================================== */

/* La misma consulta que js/mobile.js, palabra por palabra. Un viewport de
   escritorio no puede satisfacerla, y tools/auditar.py captura a 1920x1080 en
   apaisado, así que la auditoría del escritorio tampoco la ve nunca. */
@media (max-width: 900px) and (orientation: portrait) {

  /* ------------------------------------------------- Medidas de esta vista - */
  /* Las dos únicas que no caben en window.PLANTILLA, porque no son medidas de
     la maqueta sino de esta adaptación. Se declaran aquí juntas para que las
     reglas de abajo solo consuman variables, como en el resto del proyecto. */

  #stage {
    --m-col-w: 960px;          /* ancho de la columna de texto en el lienzo */
    --m-collage-escala: 0.75;  /* 800 px de collage -> 600 px */
  }

  /* ------------------------------------------------------- Gestos ------- */
  /* Cada cambio de hito escribe el hash, o sea que deja una entrada en el
     historial. Con historial, el deslizamiento hacia la derecha dispara el
     «atrás» del navegador, que compite con la flecha de js/mobile.js: en vez de
     ir al hito anterior se retrocede por el historial y se acaba saliendo de la
     línea de tiempo (se llega a la URL sin hash).

     `overscroll-behavior` es la forma prevista de desactivar esa navegación por
     gesto, y aquí no quita nada: la presentación no tiene scroll. */
  html {
    overscroll-behavior: none;
    /* Sin espera de doble toque en las flechas y las bolitas del riel. */
    touch-action: manipulation;
  }

  /* ------------------------------------------------------------ Lienzo ---- */
  /* js/scale.js calcula su transform con 1920x1080 escritos a mano, así que en
     vertical sale mal. Sus tres variables las escribe js/mobile.js y el
     !important gana al estilo en línea, de modo que el transform de scale.js
     nunca llega a aplicarse y no importa cuál de los dos escriba el último.

     El ancho y el alto de #stage no hay que tocarlos: salen de --lienzo-ancho y
     --lienzo-alto, que plantilla.js ya escribe con los valores verticales. */

  /* `fixed` no es cosmético, es lo que hace determinista el escalado. #stage
     mide 1080 px de ancho en el layout (el transform es solo visual), así que
     en `absolute` desborda el viewport del teléfono y Chrome responde
     ensanchando el viewport hasta 1080 px para que quepa: innerWidth deja de
     ser el ancho de la pantalla y el factor sale 1. Un elemento fijo no cuenta
     para el desbordamiento del documento, así que el viewport se queda en el
     ancho real y el factor vuelve a salir bien.

     No cambia nada más: ya estaba en top/left 0 con el origen arriba a la
     izquierda, y no hay scroll del que despegarse. */
  #stage {
    position: fixed;
    transform: translate(var(--m-tx, 0px), var(--m-ty, 0px))
               scale(var(--m-escala, 1)) !important;
  }

  /* ----------------------------------------------------------- Collage ---- */
  /* El marco va posicionado en absoluto, así que encogerlo con un scale no
     tiene ninguna consecuencia de flujo: no hace falta compensar nada.

     Es un tercer nivel de transform, por encima de .capa (parallax) y de
     .capa-img (entrada, rotación y flotación). No los fusiona ni se pelea con
     ellos: son elementos distintos y los transforms se componen. */

  .hito-collage {
    transform: scale(var(--m-collage-escala));
    transform-origin: top left;
  }

  /* ------------------------------------------- Retoques por hito, neutros -- */
  /* Cinco hitos traen un `layout` que estrecha su columna (410, 489 o 492 px),
     y resolver() lo mezcla ENCIMA de la plantilla, o sea también encima de la
     móvil. En el lienzo vertical esos anchos de escritorio dejarían la columna
     a menos de la mitad, así que aquí se ignoran.

     Es el único sitio donde hace falta !important sobre una medida: el ancho lo
     escribe aplicarHito() como estilo en línea sobre #hito. */

  .hito-subtitulo,
  .hito-texto {
    width: var(--m-col-w) !important;
  }

}