/* ============================================================
   Chillin Online · la entrada y la salida de los elementos
   ------------------------------------------------------------
   El velo cubre el hueco entre dos páginas, pero cuando se
   retira la pantalla nueva aparecía entera y de golpe. Aquí las
   zonas de cada pantalla entran subiendo diez píxeles y
   apareciendo, una detrás de otra. Y al irse hacen lo contrario,
   más rápido: lo que entra animado sale animado.

   ES UN MECANISMO, NO UN ADORNO DE UNA PANTALLA. Todo lo que hay
   aquí son dos clases y una variable, sin nombrar ni una sola
   pieza del portal ni de la clase: quien decide QUÉ entra es el
   guion de cada pantalla, que reparte los turnos con
   `--co-orden`. Así una zona nueva se anima sin escribir una
   regla más.

   POR BLOQUES Y NO POR TARJETA, a propósito. Cuatro zonas
   entrando escalonadas se leen como una página que se monta;
   doce tarjetas entrando de una en una se leen como una página
   que va lenta, y a la tercera visita cansan.

   LA TRAMPA QUE MANDA EN TODO ESTE ARCHIVO: Chrome PARA el reloj
   de las animaciones en una pestaña que no se mira, y las
   congela en su primer fotograma. Como aquí el primer fotograma
   es invisible, una pestaña abierta en segundo plano se quedaría
   con la pantalla vacía. Por eso `entrada.js` solo pone estas
   clases si la pestaña está delante, y las retira por reloj
   cuando la animación tendría que haber terminado. Nada de lo
   que hay aquí puede ser lo que hace visible un elemento: el
   elemento ya se ve solo, y esto es lo que le añade la entrada.
   ============================================================ */

:root{
  /* Cuánto sube. Ocho píxeles y no diez: cuanto más corto es el
     viaje, más se lee como que la página se asienta y menos como
     que algo se desplaza. Con veinte parece que se sacude. */
  --co-entrada-viaje:8px;
  /* 480 y no 320. Una entrada corta se percibe como un tirón
     aunque la curva sea blanda: lo que suaviza de verdad es
     darle tiempo al final del recorrido, donde el movimiento ya
     va lento y el ojo lo acompaña. */
  --co-entrada-dura:480ms;
  /* El escalón entre una zona y la siguiente. `entrada.js` no deja
     pasar de seis turnos, así que la cascada nunca dura más de
     480+350. */
  --co-entrada-paso:70ms;
}

/* LA CURVA ES LA DEL VELO, no la de la casa. La de la casa
   (`--co-paso-curva`) arranca disparada y frena al final: en un
   botón que responde al dedo eso se lee como viveza, pero en algo
   que aparece solo se lee como un golpe. La del velo
   (`--co-paso-suave`) sale de quieto sin tirón, que es lo que hace
   falta cuando el elemento no viene de un gesto del alumno. */
.co-entra{
  animation:co-entrar var(--co-entrada-dura) var(--co-paso-suave) both;
  animation-delay:calc(var(--co-orden,0) * var(--co-entrada-paso));
}

/* La variante sin desplazamiento, para las piezas que no se pueden
   mover sin romper algo: un `transform` convierte al elemento en
   contenedor de posicionamiento, y eso deja sin efecto el `sticky`
   de lo que lleve dentro mientras dura. El índice de la clase, que
   tiene el nombre del curso y el buscador clavados arriba, entra
   así. */
.co-entra--suave{
  animation-name:co-entrar-suave;
}

@keyframes co-entrar{
  from{opacity:0;transform:translate3d(0,var(--co-entrada-viaje),0)}
  to{opacity:1;transform:none}
}
@keyframes co-entrar-suave{
  from{opacity:0}
  to{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .co-entra{animation:none}
}

/* ============================================================
   LA LLEGADA CON EL SCROLL

   La entrada de arriba es para lo que el alumno ya tiene delante.
   Esto es para lo que hay más abajo: la fila de tarjetas que
   asoma por el borde de la pantalla entra subiendo, una detrás de
   otra, en vez de estar ya puesta cuando el ojo llega.

   POR TARJETA, Y AQUÍ SÍ. Arriba está escrito que la entrada de
   la pantalla va por bloques y no por tarjeta, y sigue siendo
   verdad: doce tarjetas animándose al ABRIR el portal se leen
   como una página que va lenta. Esto es lo contrario. Lo de aquí
   abajo no retrasa nada, porque el alumno no lo está esperando:
   ha bajado él, y lo que encuentra ya está entrando.

   `co-espera` ES LA ÚNICA REGLA DE ESTE ARCHIVO QUE APAGA UN
   ELEMENTO, y por eso la pone el guion y nunca el estilo: si algo
   fallara y el guion no llegara a correr, no hay ni una tarjeta
   escondida. `entrada.js` solo la pone con la pestaña delante, y
   la retira entera si la pestaña se va al fondo.
   ============================================================ */

:root{
  /* Catorce y no ocho: las zonas de la entrada se ASIENTAN (viaje
     corto, casi un peso que baja), y una tarjeta que llega desde
     el borde de la pantalla necesita recorrido para leerse como
     que llega. */
  --co-llegada-viaje:14px;
  --co-llegada-dura:520ms;
  /* 60 y no 70: son tres o cuatro por fila, y el escalón se lee
     como un barrido de izquierda a derecha. Con el paso de las
     zonas la última llegaba tarde a su propia fila. */
  --co-llegada-paso:60ms;
}

.co-espera{opacity:0}

.co-llega{
  animation:co-llegar var(--co-llegada-dura) var(--co-paso-suave) both;
  animation-delay:calc(var(--co-orden,0) * var(--co-llegada-paso));
}

@keyframes co-llegar{
  from{opacity:0;transform:translate3d(0,var(--co-llegada-viaje),0)}
  to{opacity:1;transform:none}
}

/* Quien pide quieto no llega a ver ninguna de las dos clases (el
   guion ni las pone), pero la red se escribe igual: si una se
   colara, la pieza se ve y no se mueve. */
@media (prefers-reduced-motion:reduce){
  .co-espera{opacity:1}
  .co-llega{animation:none}
}

/* ============================================================
   LA SALIDA

   Al pulsar un enlace que cambia de zona, las mismas zonas que
   entraron bajan seis píxeles y se apagan mientras el velo se
   posa encima. Tres decisiones, y ninguna se lee en la
   animación:

   1 · MÁS RÁPIDA QUE LA ENTRADA (200 contra 480). La entrada
       acompaña a algo que el alumno todavía no ha visto; la
       salida va detrás de una decisión que ya ha tomado, y ahí
       cualquier demora se lee como que la academia va lenta.

   2 · TODAS A LA VEZ, SIN ESCALÓN. La entrada escalona porque
       está construyendo la pantalla y el orden dice qué manda.
       Al salir no hay nada que construir: escalonar la salida
       solo alarga la espera antes de la página siguiente.

   3 · Y CABE DENTRO DEL VELO, que entra con su fundido de 300.
       Por eso 200: si la salida durase más que el velo, el
       alumno vería el papel blanco posado sobre unos bloques que
       aún se están yendo por debajo.

   La curva NO es ninguna de las dos de la casa. Las dos frenan
   al final, que es lo que se quiere en algo que llega y se
   queda. Aquí pasa lo contrario: el bloque arranca despacio y se
   va acelerando hasta desaparecer, que es como se lee una salida
   sin que parezca que la pantalla se cae.

   Y AQUÍ NO HAY LA TRAMPA DE LA PESTAÑA DE FONDO, al revés que
   arriba: el primer fotograma de esta animación es el elemento
   TAL Y COMO SE VE. Si el reloj se congelara, la pantalla se
   queda como estaba, que es exactamente lo aceptable. Lo que sí
   lleva red es el final: el estado final es invisible, así que
   si la navegación no llegara a ocurrir, `paso.js` retira estas
   clases al retirar el velo.
   ============================================================ */

:root{
  --co-salida-viaje:6px;
  --co-salida-dura:200ms;
  --co-salida-curva:cubic-bezier(.4,0,1,1);
}

.co-sale{
  animation:co-salir var(--co-salida-dura) var(--co-salida-curva) both;
}
/* La variante sin desplazamiento, por lo mismo que en la entrada:
   el índice de la clase lleva dentro piezas clavadas arriba
   (`sticky`) y un `transform` las descuelga. En la salida se nota
   aún más, porque el alumno tiene los capítulos desplazados y el
   nombre del curso pegaría un salto justo al irse. */
.co-sale--suave{
  animation-name:co-salir-suave;
}

@keyframes co-salir{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(0,var(--co-salida-viaje),0)}
}
@keyframes co-salir-suave{
  from{opacity:1}
  to{opacity:0}
}

/* Sin animación, el bloque se queda a la vista y lo tapa el velo,
   que es la salida de toda la vida. */
@media (prefers-reduced-motion:reduce){
  .co-sale{animation:none}
}

/* ============================================================
   EL RELEVO

   El tercer momento, y el que no se parece a los otros dos:
   pasar de una lección a la siguiente DENTRO del mismo curso.
   Ahí no hay velo (el reproductor cambia la lección sin recargar
   la página, y taparlo cada vez cansaría).

   AQUÍ NO HAY SALIDA QUE MONTAR, y no es una decisión de gusto:
   está medido en la academia. Al pulsar otra lección, el
   reproductor retira el contenido viejo a los 16 ms y planta su
   bloque de "Cargando" en el mismo hueco, conservando el alto; la
   lección nueva llega sobre los 250. En 16 ms no cabe ninguna
   animación de salida, y forzarla obligaría a retener la
   pulsación del alumno para dar tiempo a que se vea, que es
   cobrarle espera a cambio de un adorno.

   LA ENTRADA ES LA MISMA QUE LA DE CUALQUIER PANTALLA, y en esto
   se dio una vuelta atrás: primero se hizo corta (300 y sin
   escalón, con el argumento de que quien avanza ya ha decidido) y
   se lee seca, un golpe después de esperar. Lo que hace suave al
   portal no es solo la duración: es que las zonas lleguen una
   detrás de otra. Dentro de la lección hay tres (el titular, el
   cuerpo y el pie) y entran igual, así que este archivo no
   necesita ni una regla para el relevo. Quien decide qué entra
   sigue siendo el guion de cada pantalla.
   ============================================================ */

/* ============================================================
   EL TITULAR ENTRA POR LÍNEAS

   El cuarto momento, y el más pequeño de los cuatro: un titular
   suelto (hoy el saludo del portal) que no entra como bloque
   sino renglón a renglón, cada uno subiendo desde detrás de su
   propia máscara.

   POR QUÉ NO SE HACE CON LA ENTRADA POR BLOQUES. Una zona que
   entra se mueve entera y se lee como una pieza que llega. Un
   titular por líneas se lee como algo que SE ESCRIBE, y ese es
   otro gesto: sirve para lo primero que ve el alumno al abrir, y
   solo para eso. Usarlo en cada título de la pantalla lo
   convertiría en un tic.

   LAS LÍNEAS LAS CUENTA EL GUION, NO EL ESTILO, y no hay otra
   forma: dónde parte un titular depende del ancho de la ventana
   y de la letra que haya cargado, así que se escriben las
   palabras, se mira a qué altura ha caído cada una y se agrupan
   las que comparten renglón. Por eso el motor espera a que la
   letra esté cargada antes de medir: midiendo con la letra del
   sistema, las líneas salen partidas donde no son.

   EL ESTADO APAGADO VIVE EN UNA CLASE Y NUNCA AL REVÉS. Sin la
   clase `co-lineas-espera`, el titular se ve. Así, si el guion
   se parte a mitad o el reloj se congela con la pestaña detrás,
   lo que queda en pantalla es el saludo, no un hueco en blanco.

   EL RECORTE NECESITA AIRE ABAJO. `overflow:hidden` sobre una
   caja del alto exacto de la línea le corta la cola a la g y a
   la p. Se le da un pelín de relleno abajo y se le quita otro
   tanto de margen, así que ocupa lo mismo y ya no recorta letra.
   ============================================================ */

.co-mascara{
  display:block;
  overflow:hidden;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.co-mascara > span{
  display:block;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--co-orden, 0) * 90ms);
}
.co-lineas-espera .co-mascara > span{transform:translateY(110%)}

@media (prefers-reduced-motion: reduce){
  .co-mascara > span{transition:none}
  .co-lineas-espera .co-mascara > span{transform:none}
}