/* El escaneo del casco sobre NEO.
 *
 * Recorre su cuerpo y se para en cada parte: sube a la cabeza, baja a los
 * brazos, sigue a las manos y vuelve a los ojos. En cada parada engancha, pone
 * el nombre y la cifra sube sola.
 *
 * Nada de esto toca a NEO: se dibuja encima. Si se quita este archivo, el
 * heroe queda exactamente como estaba.
 */

.escaner{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
/* NEO respira: el fondo del heroe hace un zoom lento de scale(1) a scale(1.06)
   cada 26 segundos, asi que su cuerpo se mueve por la pantalla. Si la capa del
   escaner se queda quieta, la mirilla se despega de el poco a poco. Lleva la
   misma animacion, sobre la misma caja y el mismo origen, para viajar pegada. */
@media(prefers-reduced-motion:no-preference){
  .escaner{animation:acerca 26s ease-in-out infinite alternate}
}
/* Solo para calibrar: ?quieto detiene las dos respiraciones a la vez, para
   poder medir donde cae cada parte sin que nada se mueva. */
.quieto .hero .fondo,.quieto .escaner{animation-play-state:paused!important}
@media(max-width:900px){.escaner{display:none}}

/* La linea que recorre a NEO de arriba abajo entre parada y parada. */
.escaner .barrido{position:absolute;left:0;right:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(49,229,192,.85),rgba(255,157,46,.5),transparent);
  box-shadow:0 0 18px rgba(49,229,192,.55)}

/* La mirilla que se posa sobre cada parte. */
.escaner .mira{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;
  opacity:0;transform:scale(.55);
  transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.2,1),left .75s cubic-bezier(.45,.05,.2,1),top .75s cubic-bezier(.45,.05,.2,1)}
.escaner .mira.puesta{opacity:1;transform:scale(1)}
.escaner .mira svg{width:132px;height:132px;overflow:visible}
.escaner .mira circle,.escaner .mira path,.escaner .mira line{fill:none;stroke:#31e5c0;
  stroke-width:1.3;vector-effect:non-scaling-stroke}
.escaner .mira .centro{fill:#31e5c0;stroke:none}
/* El arco que se llena hasta el porcentaje de esa parte. */
.escaner .mira .arco{stroke:#ff9d2e;stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.2,1)}
@media(prefers-reduced-motion:no-preference){
  .escaner .mira.puesta .anillo{transform-origin:66px 66px;animation:giroDer 7s linear infinite}
  .escaner .mira.puesta .anillo2{transform-origin:66px 66px;animation:giroIzq 5s linear infinite}
}

/* El rotulo sale de la mirilla por una linea, como una anotacion tecnica. */
.escaner .rotulo{position:absolute;opacity:0;transform:translateX(-8px);
  transition:opacity .35s,transform .35s,left .75s cubic-bezier(.45,.05,.2,1),right .75s cubic-bezier(.45,.05,.2,1),top .75s cubic-bezier(.45,.05,.2,1);
  font-family:'Space Mono',monospace;white-space:nowrap}
.escaner .rotulo.puesto{opacity:1;transform:none}
.escaner .rotulo .guia{display:block;height:1px;background:rgba(49,229,192,.5);width:0;
  transition:width .5s ease-out;margin-bottom:9px}
.escaner .rotulo.puesto .guia{width:78px}
.escaner .rotulo b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#31e5c0;font-weight:400;text-shadow:0 0 14px rgba(49,229,192,.6)}
.escaner .rotulo i{display:block;font-style:normal;font-size:30px;font-weight:700;color:#fff;
  letter-spacing:-1px;margin-top:4px;text-shadow:0 0 24px rgba(255,157,46,.5);
  font-variant-numeric:tabular-nums}
.escaner .rotulo i em{font-style:normal;font-size:17px;color:#ff9d2e;margin-left:2px}
/* De donde sale la cifra. Un "97 %" a secas no dice nada; con "253 de 262
   turnos sin fallo" se puede comprobar, que es la diferencia entre una lectura
   y un adorno. */
.escaner .rotulo small{display:block;font-size:10.5px;line-height:1.5;color:#7d879b;
  margin-top:7px;max-width:190px;white-space:normal}

/* La lectura fija de abajo: deja claro que esto es una lectura, no un adorno. */
.escaner .lectura{position:absolute;left:4vw;bottom:16%;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(49,229,192,.65);
  opacity:0;transition:opacity .5s}
.escaner .lectura.puesta{opacity:1}
.escaner .lectura b{color:#ff9d2e;font-weight:400}