/* armado.css · v8.4 (22-sep) · EL ROMPECABEZAS: el vagón se arma por piezas al entrar.
   Nicolás, 16:35: «la cabina del metro se va armando como por partes, como en un rompecabezas
   gigante, eso creo que lo quitaste». Viene de 10-propuesta-el_collage_que_se_arma.md §2.
   Documento: docs/web/v8-21sep/85-armado-del-vagon.md.

   Solo selectores dentro de #viaje .vagon, y solo mientras dura el armado (840 ms más 240 ms de relevo). Las piezas las pone
   js/armado.js con las cajas de data/armado.json: cada una es un <i> del tamaño del lienzo que pinta la
   MISMA imagen que img.marco, al 100 % como ella, y clip-path (lo pone armado.js) deja ver solo su
   rectángulo. Al aterrizar la última se sueltan y vuelve la lámina única, así que el estado final es el
   plate pixel a pixel. Nada de esto toca viaje.css ni ventana.css.

   Curvas y tiempos, biblia §7: ease-orbe para la entrada (sale rápido, aterriza lento), ease-cromo
   para la opacidad (240 ms, cambio de estado), 480 ms por pieza, cinco ondas, nada pasa de 900 ms.
   --dx/--dy los pone armado.js en px (12 % de la diagonal del vagón que se ve). */

#viaje .lienzo>.armado{position:absolute;inset:0;z-index:2;pointer-events:none}

#viaje .lienzo>.armado>i{position:absolute;inset:0;display:block;margin:0;background:0 0/100% 100% no-repeat;
  transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--r,0deg)) scale(var(--e,.92));
  opacity:0;will-change:transform,opacity;backface-visibility:hidden}
#viaje .lienzo>.armado>i[hidden]{display:none}

/* .anda la pone armado.js un cuadro después de insertar el grupo: cada pieza sale hacia su sitio con
   su propio turno (--t) y aterriza en transform:none, o sea encima de donde estaba la lámina.
   La opacidad NO lleva turno: todas las piezas aparecen juntas en 240 ms, mientras cae el velo del zoom,
   y después encajan por ondas. Probado las dos maneras (documento 85 §4): con la opacidad escalonada, a
   los 200 ms el vagón del video se fundía a un escenario casi vacío (se leía como «desapareció»); así se
   lee como un rompecabezas de piezas sólidas que se cierra. */
#viaje .lienzo>.armado.anda>i{transform:none;opacity:1;
  transition:transform var(--dur,480ms) var(--orbe) var(--t,0ms),opacity 240ms var(--cromo)}

/* el relevo: la lámina ya está debajo; las piezas aterrizadas se funden encima y armado.js las suelta */
#viaje .lienzo>.armado.suelta{opacity:0;transition:opacity 240ms var(--cromo)}

/* mientras se arma no hay lámina: el vagón nace vacío, con la ventana ya andando, y las piezas lo llenan */
#viaje .lienzo.armando>img.marco{opacity:0}
/* ni rótulo, ni anfitriona, ni LED flotando en el vacío: llegan cuando el vagón ya está */
#viaje .lienzo.armando>.franja,
#viaje .lienzo.armando>.anfitriona,
#viaje .vagon.armando>.led{opacity:0}
#viaje .lienzo.recien>.franja,
#viaje .lienzo.recien>.anfitriona{transition:opacity .34s var(--cromo)}

/* quieto: no hay armado (armado.js ni arranca). Cinturón por si «reducir movimiento» se enciende con
   la página abierta */
@media (prefers-reduced-motion:reduce){
  #viaje .lienzo>.armado{display:none}
  #viaje .lienzo.armando>img.marco,
  #viaje .lienzo.armando>.franja,
  #viaje .lienzo.armando>.anfitriona,
  #viaje .vagon.armando>.led{opacity:1}
}