/* ZERO · Marca animada
   css/marca.css

   El intro de primera vez (las dos gotas que se vuelven la Z) y la bienvenida
   de despues de registrarse. Cierra con la regla de movimiento reducido, que
   apaga las animaciones a quien lo pidio en su telefono.

   Salio de index.html, que tenia 5302 lineas. Es 1 de 8 pedazos y se
   carga en un orden fijo desde index.html: NO lo reacomodes ahi. */

/* ===== intro de primera vez: dos gotas que se vuelven la Z =====
   No es un video: es el isotipo animado con SVG (js/marca.js) y un reloj en
   JS. Un mp4 pesaria cien veces mas, se veria borroso al escalar, no seguiria
   la paleta ni el modo dia/noche, y sobre todo no podria fundirse con la
   pantalla de abajo — que es todo el efecto: el isotipo no se desvanece,
   VIAJA hasta su lugar en la puerta de entrada.

   El fondo no se pinta aqui: se DESTAPA. Encima de la puerta (que ya esta
   pintada desde el HTML) hay un velo casi negro que se levanta mientras la
   marca se arma, asi que al terminar el intro la aurora que se ve ya es la de
   la puerta. Corre una sola vez: queda anotado en localStorage.

   Los tiempos viven en index.html (BASE / RITMO, en la seccion INTRO). */
#intro{position:absolute;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;overflow:hidden;cursor:pointer}
html.no-intro #intro{display:none}
.intro-velo{position:absolute;inset:0;background:#050507;pointer-events:none}

.intro-stage{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;--mw:140px}
/* El lockup respeta el manual igual que la puerta: la palabra mide 0.4653 del
   ancho del isotipo y se separa 0.18·Z, ya descontado el hueco que la caja de
   la fuente deja encima de la mayuscula. */
.intro-mark{position:relative;width:var(--mw);will-change:transform}
.intro-z{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))}
.intro-z .zm-tinta{fill:var(--t5)}
.intro-word{display:flex;font-family:var(--ff-texto);font-weight:300;line-height:1;
  letter-spacing:.32em;color:var(--t5);text-transform:uppercase;
  font-size:calc(var(--mw)*.4653);margin-top:calc(var(--mw)*.1396);
  margin-right:-.32em;will-change:transform}
.intro-word span{display:inline-block;opacity:0}

/* ===== bienvenida: el puente entre la puerta y la app =====
   Se ve una vez, justo despues de entrar con la cuenta. La Z que quedo en la
   puerta se recoge en las dos gotas de donde salio, las gotas bajan cruzandose
   hasta el boton del centro y ahi se vuelven a desplegar, ya del tamano del
   boton. Detras, el velo se levanta y aparece la pantalla principal.
   Va encima de todo (z-index 95) pero sin robar toques, y se borra al acabar. */
#bienvenida{position:absolute;inset:0;z-index:95;overflow:hidden;pointer-events:none}
#bienvenida[hidden]{display:none}
.bv-velo{position:absolute;inset:0;background:#050507}
.bv-mark{position:absolute;left:0;top:0;will-change:transform}
.bv-z{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
.bv-z .zm-tinta{fill:var(--t5)}

/* ===== analizando ===== */
/* Tapa la app entera mientras piensa, y a propósito: quien acaba de tomar una
   foto no tiene nada que hacer en la pantalla de atrás, y dejarla a la vista
   invita a tocar algo a media lectura. `pointer-events:auto` es justamente eso
   —aquí sí se comen los toques—, al revés que la bienvenida, que solo se deja
   mirar. */
#analizando{position:absolute;inset:0;z-index:96;overflow:hidden;pointer-events:auto;
  display:flex;align-items:center;justify-content:center}
#analizando[hidden]{display:none}
/* Opaco del todo, no casi. Con un 97% se alcanzaban a leer los botones de
   atrás —"Reintentar la cámara", "Subir una foto"— peleando con el renglón que
   sí importa. El resplandor de la paleta evita que el fondo se lea como un
   negro plano de "se colgó": es la misma aurora de la app, quieta. */
.an-velo{position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% 22%,color-mix(in srgb,var(--t2) 22%,transparent),transparent 70%),
  var(--bg)}
.an-in{position:relative;z-index:2;width:100%;padding:0 34px;text-align:center}
.an-mark{width:96px;margin:0 auto 26px}
.an-z{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45))}
.an-z .zm-tinta{fill:var(--t5)}
.an-txt{font-size:13.5px;letter-spacing:.02em;color:var(--ink-dim);margin:0 0 16px}
.an-track{height:2px;border-radius:2px;background:var(--line);overflow:hidden;
  max-width:220px;margin:0 auto}
.an-track[hidden]{display:none}
.an-bar{height:100%;width:0;border-radius:2px;background:var(--sand);
  transition:width .25s linear}
/* Quien pidió menos movimiento en su sistema no ve el bucle: se queda la Z
   quieta y el renglón de texto, que es lo que de verdad informa. */
@media (prefers-reduced-motion:reduce){.an-mark{opacity:.9}}


/* La puerta ya está pintada debajo del intro desde el HTML; mientras el intro
   corre se queda en blanco para no verse a través, y sube en cascada justo
   cuando la marca aterriza. Todo vive bajo estas dos clases, así que en una
   apertura normal (sin intro) la puerta se comporta exactamente como antes. */
html.intro-on #gate .gate-logo,
html.intro-on #gate .gate-word{opacity:0;animation:none}
html.intro-on #gate .gate-title,
html.intro-on #gate .gate-card,
html.intro-on #gate .gate-legal{opacity:0}
/* isotipo y logotipo aparecen juntos y a la vez: son una sola pieza, y es el
   momento en que la marca voladora del intro aterriza sobre ellos */
html.intro-done #gate .gate-logo,
html.intro-done #gate .gate-word{animation:fade .5s var(--ease) .40s both}
html.intro-done #gate .gate-title{animation:gateRise .6s var(--ease) .16s both}
html.intro-done #gate .gate-card{animation:gateRise .6s var(--ease) .24s both}
html.intro-done #gate .gate-legal{animation:gateRise .6s var(--ease) .32s both}
@keyframes gateRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* En pantallas cortas baja el lockup COMPLETO: se cambia --mw y el
   logotipo se achica solo, sin romper la proporcion del manual. */
@media(max-height:700px){
  .intro-stage{--mw:112px}
}

/* ===== movimiento reducido ===== */
@media(prefers-reduced-motion:reduce){
  #aurora .ab,.bub,.stat.sbub,nav .scan-btn,.vf-line,.scroll-arrow,.comm-title .cw{animation:none}
  .view{animation:none}
}