/* zaxfun — ENTRADAS ESCALONADAS (Pieza 3 del acabado premium).
 *
 * Los bloques no aparecen todos de golpe: entran uno detrás de otro, con 60 ms
 * de retraso entre ellos, según vas llegando a ellos al bajar. Es lo que
 * convierte «una página que ya estaba ahí» en «una página que se está armando
 * para ti», y es el efecto que más se nota en el móvil, que es donde más se
 * baja.
 *
 * ═══ LAS TRES REGLAS QUE NO SE TOCAN ═══
 *
 * 1. EL ESTADO INICIAL LO PONE JAVASCRIPT, JAMÁS EL HTML.
 *    Aquí no hay ni un selector que apunte a una clase que venga escrita en el
 *    index. `.zx-entra` se la pone `js/entradas.js` al arrancar. Si el JS falla,
 *    si el navegador es viejo o si el rastreador de Google no lo ejecuta, NADA
 *    tiene `opacity: 0` y la portada se ve entera. Poner el estado inicial en el
 *    HTML es la forma más rápida de dejar una web en blanco para el buscador.
 *
 * 2. SE ANIMAN SOLO `opacity` Y `transform`.
 *    Van por el compositor y no obligan al navegador a recalcular la página.
 *    Nada de `height`, `top` ni `margin`: eso se ve a tirones en un teléfono de
 *    gama baja.
 *
 * 3. ES `animation`, NO `transition` — y la clase se quita al terminar.
 *    Con `transition` habría que declarar aquí un `transition:` que pisaría el
 *    de `.juguete` (que ya tiene el suyo para el hover) y el levantarse de la
 *    tarjeta pasaría de .22s a .55s. Con `animation` los dos conviven. Eso sí:
 *    una animación con `fill-mode: both` deja su último fotograma clavado por
 *    encima de cualquier regla, así que `transform: none` ganaría para siempre
 *    al `translateY(-4px)` del hover. Por eso `entradas.js` quita las clases en
 *    `animationend` y el elemento vuelve a su estado natural.
 */

/* LOS TRES NÚMEROS DEL EFECTO, en un solo sitio.
   Están aquí y no repartidos por las reglas porque son lo único que se toca
   para calibrarlo, y porque así la página de taller puede cambiarlos en vivo
   (`?fuerza=` en `js/entradas.js`) sin tocar el CSS.

   ESTOS SON LOS QUE ELIGIÓ ZAX (2026-08-23), mirando los tres lado a lado en
   `herramientas/prueba-acabado.html`: «cuando entra suave está bien». Se
   probaron también «medio» (30px / 90ms) y «marcado» (52px / 130ms) y los dos
   le parecieron de más. No subirlos sin que él lo pida.

   Ojo: «suave» aquí NO es la primera versión que no notó. Estos números son los
   mismos, pero las TARJETAS entran aparte y con bastante más cuerpo (ver abajo),
   y eso es lo que hizo que el efecto pasara de invisible a bien.

     --zx-viaje  cuánto sube el bloque al entrar
     --zx-paso   el escalón entre un bloque y el siguiente
     --zx-dur    lo que tarda cada uno */
:root {
  --zx-viaje: 16px;
  --zx-paso:  60ms;
  --zx-dur:   .55s;
}

.zx-entra {
  opacity: 0;
  /* Aviso al navegador de que estas dos van a cambiar, para que las suba a su
     propia capa antes de empezar. Se retira solo al acabar (lo hace el JS):
     dejarlo puesto en 20 elementos gasta memoria de vídeo para nada. */
  will-change: opacity, transform;
}

.zx-dentro {
  animation: zx-entrar var(--zx-dur) cubic-bezier(.2, .9, .25, 1) both;
  /* El escalón. `--i` lo pone el JS: 0, 1, 2… dentro de cada grupo, así que la
     cuenta se reinicia en cada estante y nunca hay un bloque esperando dos
     segundos por estar el decimoquinto de la página. */
  animation-delay: calc(var(--i, 0) * var(--zx-paso));
}

@keyframes zx-entrar {
  from { opacity: 0; transform: translateY(var(--zx-viaje)); }
  to   { opacity: 1; transform: none; }
}

/* LAS TARJETAS ENTRAN MÁS QUE EL RESTO. Son la pieza principal de la portada:
   si entran igual que un párrafo, no hay portada, hay una lista. Suben más,
   vienen un punto más lejos (la escala) y se enderezan de una inclinación
   mínima — 1,2 grados, que no se llega a leer como que la tarjeta estaba
   torcida, solo como que ha llegado hasta ahí. */
.juguete.zx-dentro,
.proximamente.zx-dentro {
  animation-name: zx-entrar-carta;
  transform-origin: 50% 120%;
}

@keyframes zx-entrar-carta {
  from { opacity: 0; transform: translateY(calc(var(--zx-viaje) * 1.5)) scale(.94) rotate(-1.2deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* EL FRENO. `entradas.js` ya se sale sin hacer nada si el sistema pide menos
   movimiento —así ni siquiera llega a poner las clases—, pero esto queda como
   segunda barrera por si alguien cambia el ajuste con la página abierta. */
@media (prefers-reduced-motion: reduce) {
  .zx-entra  { opacity: 1; will-change: auto; }
  .zx-dentro { animation: none; }
}