/* ============================================================
   Chillin Online · el paso de una página a otra
   ------------------------------------------------------------
   Thinkific recarga la página entera en cada salto: no hay
   navegación de aplicación que valga. Entre que el alumno pulsa y
   la pantalla nueva está montada hay un hueco de entre 0,3 y 1,2
   segundos, y hasta ahora ese hueco era papel en blanco y luego
   todo de golpe.

   Aquí ese hueco se cubre con un VELO: el papel blanco de la casa
   con el isotipo teñido en el centro, latiendo despacio. La barra
   negra de arriba NO se tapa: se queda quieta con su logo y hace
   de ancla entre las dos páginas, así que el alumno nunca ve la
   pantalla entera vacía.

   EL VELO ES UNA PIEZA CONTINUA ENTRE DOS PÁGINAS. Se pone sobre
   la página VIEJA al pulsar el enlace y la página NUEVA nace ya con
   él puesto, así que lo que se ve es un solo velo que dura desde el
   clic hasta que la pantalla nueva está lista. Quien lo monta y lo
   retira es `paso.js`.

   DÓNDE APARECE: en los cambios de zona (entrar en la clase, volver
   al portal, ir a la cuenta). Avanzar de lección dentro del mismo
   curso NO lleva velo: el alumno encadena muchas lecciones seguidas
   y taparle la pantalla en cada una cansa.
   ============================================================ */

:root{
  /* El isotipo vive AQUÍ y una sola vez. La franja negra del índice
     plegado usa esta misma variable, así que el dibujo (que son seis
     mil caracteres) no viaja dos veces en el bloque. */
  --co-isotipo:url("data:image/png;base64,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");
  --co-paso-curva:cubic-bezier(.22,1,.36,1);
  /* La curva del velo, más blanda que la del resto de la casa: no
     tiene que sentirse como un elemento que llega, sino como luz que
     sube y baja. Sin rebote y sin tirón al arrancar. */
  --co-paso-suave:cubic-bezier(.33,0,.2,1);
}

/* ------------------------------------------------------------
   EL VELO

   Va por DEBAJO de la barra en el orden de apilado (250 contra los
   301 que el tema le pone a la suya) y no por debajo en la
   pantalla: así la barra se pinta encima sola, con el alto que
   tenga en cada sitio, y no hay que medir nada. En la clase la
   barra no trae orden propio, así que se le da aquí.
   ------------------------------------------------------------ */

.co-paso{
  position:fixed;
  z-index:250;
  inset:0;
  /* EL VELO SE PINTA DEL COLOR DEL PAPEL DE DONDE ESTÉ, y desde el
     26-ago eso ya no es blanco: la clase y el portal van en hueso.
     Un velo blanco sobre papel hueso destella MÁS CLARO que la
     página, que es exactamente el parpadeo que este velo existe
     para tapar.

     Se resuelve heredando y no escribiendo el color: el velo cuelga
     del cuerpo, y `--co-papel` la declaran `clase.css` y
     `portal.css` en ese mismo cuerpo. Donde no exista (el catálogo
     y las páginas de venta, que aún llevan el traje del tema) cae
     al blanco de antes y se comporta igual que hasta hoy. El día
     que esas pantallas tengan su papel, el velo lo toma solo. */
  background:var(--co-papel, #fff);
  /* Nace VISIBLE: en la página nueva el velo ya tiene que estar
     puesto en el primer pintado, sin fundido de entrada, porque un
     fundido aquí es exactamente el destello que se quiere quitar. */
  opacity:1;
}
/* La barra de la clase no trae orden de apilado propio y el velo se
   la comía. Con esto se queda arriba, como la del portal. */
body.take .course-player__top-bar{
  position:relative;
  z-index:301;
}

/* EL ISOTIPO, teñido. El dibujo es blanco con transparencia (se
   recortó para la franja negra del índice), así que sobre papel
   blanco no se vería: se usa de MÁSCARA y el color lo pone el
   fondo. Así el mismo archivo sirve en negro y en tinta. */
.co-paso::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:64px;
  height:54px;
  background:var(--co-tinta, #14110f);
  -webkit-mask:var(--co-isotipo) center/contain no-repeat;
  mask:var(--co-isotipo) center/contain no-repeat;
  /* EL REPOSO YA SE VE, y esto no es un detalle: Chrome PARA el
     reloj de las animaciones en una pestaña que no se está mirando,
     y las deja congeladas en su primer fotograma. Si el estado de
     partida del isotipo fuese invisible, abrir una lección en otra
     pestaña y volver a ella enseñaría un velo blanco y vacío. El
     latido es un adorno encima de algo que ya se ve. */
  opacity:.55;
  transform:translate(-50%,-50%) scale(.96);
  /* El latido arranca justo en el reposo (0% es este mismo estado),
     así que congelarlo no cambia nada de lo que se ve. */
  animation:co-paso-latido 2.1s var(--co-paso-curva) infinite;
}

/* EL FUNDIDO DE ENTRADA DEL ISOTIPO, solo con la pestaña delante.
   Trae el dibujo en vez de plantarlo, por si el estilo llegara un
   pelo más tarde que el papel blanco. Va aparte y lo enciende el
   guion porque una animación que EMPIEZA en invisible, congelada en
   su primer fotograma, deja el isotipo sin pintar; con la pestaña
   delante el reloj corre y eso no puede pasar. */
.co-paso--vivo::before{
  animation:co-paso-iso .32s var(--co-paso-suave),
            co-paso-latido 2.1s var(--co-paso-curva) .32s infinite;
}
@keyframes co-paso-iso{
  from{opacity:0;transform:translate(-50%,-50%) scale(.9)}
}
@keyframes co-paso-latido{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}
}

/* AL SALIR de una página el velo sí entra con fundido, porque cae
   sobre una pantalla que el alumno está mirando. Es el único caso, y
   por lo mismo de arriba lleva red: `paso.js` le fija la opacidad a
   mano un cuarto de segundo después, así que si el reloj de las
   animaciones estuviera parado el velo se pone igual. */
.co-paso--llega{
  opacity:0;
  animation:co-paso-entra .3s var(--co-paso-suave) forwards;
}
@keyframes co-paso-entra{to{opacity:1}}

/* LA RETIRADA. El desvanecido es un adorno: quien de verdad quita
   el velo es `paso.js`, que arranca el nodo del documento medio
   segundo después. Sin eso, una pestaña en segundo plano (donde
   Chrome para el reloj de las animaciones) se quedaría con el velo
   puesto hasta que alguien la mirase. */
.co-paso--fuera{
  opacity:0;
  transition:opacity .42s var(--co-paso-suave);
  pointer-events:none;
}
/* EL ISOTIPO SE VA PRIMERO, y en esto está casi toda la suavidad de
   la salida: si el papel y el dibujo se desvanecen a la vez, el
   isotipo se queda flotando sobre una pantalla que ya se ve por
   detrás y parece un fallo de pintado. Yéndose antes, lo que queda
   es solo papel aclarándose, que es lo que el ojo espera. Sube tres
   píxeles al irse, en la misma dirección que el latido. */
.co-paso--fuera::before{
  opacity:0;
  transform:translate(-50%,-50%) translateY(-3px) scale(.94);
  animation:none;
  transition:opacity .2s var(--co-paso-suave),
             transform .28s var(--co-paso-suave);
}

/* LAS DOS BARRAS DE LA CASA SE QUEDAN QUIETAS por encima del velo:
   arriba la negra con el logo y, en el teléfono, la de navegación de
   abajo. Son el marco de la aplicación y lo que cambia es lo de en
   medio; taparlas y devolverlas es un salto más, no uno menos.

   Eso sí, mientras el velo está puesto NO se pulsan. Una segunda
   navegación lanzada encima de la primera deja el velo colgado sin
   que nadie lo retire, y el alumno se queda mirando el isotipo.
   La barra de arriba se apaga un punto para que se lea que ahora
   mismo no responde. */
body.co-pasando .co-barra,
body.co-pasando header,
body.co-pasando [class*="header__"]{pointer-events:none}
body.co-pasando header a,
body.co-pasando header button,
body.co-pasando .co-barra{
  opacity:.72;
  transition:opacity .2s var(--co-paso-curva);
}

/* Sin movimiento: el isotipo se queda quieto y el velo entra y sale
   seco. Sigue cumpliendo su trabajo, que es tapar el hueco. */
@media (prefers-reduced-motion:reduce){
  .co-paso::before,
  .co-paso--vivo::before{animation:none;opacity:.7;transform:translate(-50%,-50%)}
  .co-paso--llega{opacity:1;animation:none}
  .co-paso--fuera{transition:none}
  .co-paso--fuera::before{transition:none;transform:translate(-50%,-50%)}
  body.co-pasando header a,
  body.co-pasando header button,
  body.co-pasando .co-barra{transition:none}
}