/* zaxfun — EL SELLO: lluvia de código en el nombre y el lema.
 *
 * Es la FIRMA VISUAL de la casa, la misma que ya llevan chequeclaro.com y
 * zaxdesigns.com. No se reinventa en cada web: se porta de
 * `Projects/Calculadora Cheque/maqueta/js/comun.js` (`descifrarTexto`) y aquí
 * solo cambian la paleta y qué piezas se enganchan. La receta y todas las
 * trampas ya pagadas están documentadas allí y en zaxdesigns.
 *
 * En zaxfun se enganchan DOS piezas y nada más: el `<h1 class="marca">` y el
 * `<p class="lema">`. Ni las tarjetas, ni los estantes, ni el pie. Una firma
 * que sale en cada rótulo deja de ser una firma — eso ya se probó en Sonido de
 * Vida y lo cortó el mismo día.
 *
 * ═══ LO QUE NO SE TOCA ═══
 *
 * 1. EL TEXTO NO SE PUEDE MOVER. Partir un título en letras convierte cada una
 *    en su propia caja, y entre cajas el navegador ya no aplica el ajuste entre
 *    pares (kerning): el error se acumula y la última palabra del renglón salta.
 *    Se apaga el kerning SIEMPRE, también en reposo, para que el estado quieto
 *    mida exactamente lo mismo que el partido. Si algún día se engancha una
 *    pieza nueva, hay que añadirla también a esa lista o volverá a saltar.
 * 2. LA LETRA CAE DE ARRIBA. No es un barrido de izquierda a derecha: eso se
 *    lee como un subrayado que pasa. El reparto por renglones lo hace el JS.
 * 3. NADA DE ESTO EXISTE SIN JS. El HTML no lleva ni una clase de aquí: si el
 *    JavaScript no corre, el título se ve entero y quieto, que es lo correcto.
 */

:root {
  /* La cabeza de la gota: el punto más encendido del efecto. Casi blanco con
     un toque de cian, para que case con el degradado del nombre (blanco →
     cian → violeta) sin salirse de la paleta de la casa. */
  --mx-cabeza: #dff2ff;

  /* Cuánto recorre la letra al caer. En `em`, así que escala con el texto…
     y ese es justo el problema que hubo que corregir: el nombre se pinta a
     6rem, donde .55em son CINCUENTA Y TRES píxeles. La letra salía volando por
     encima del título, dejaba un hueco negro debajo y no se leía como lluvia
     sino como una letra que falta y basura flotando arriba. En el lema, a 18px,
     esos mismos .55em son 10 px y se ve perfecto.
     Por eso el recorrido no es uno solo: cuanto más grande es la letra, menos
     fracción de su cuerpo tiene que viajar. */
  --mx-caida: .55em;
}

/* El nombre va a 6rem: aquí el recorrido se recorta a menos de la mitad. */
.marca { --mx-caida: .22em; }

/* ── El cinturón nº 1: el kerning ─────────────────────────────────────────
   Va sobre las piezas que se descifran y está puesto SIEMPRE, no solo mientras
   dura el efecto. Cuesta un pelo de ancho, imperceptible; a cambio la deriva
   del texto baja de ~11 px a ~0,1 px. */
.marca, .lema {
  font-kerning: none;
  font-variant-ligatures: none;
}

/* Las cajas del efecto no aportan estilo propio: heredan todo de la pieza que
   envuelven, para que partir el texto no cambie cómo se ve. */
span.mx, span.mx-linea, span.mx-palabra, b.mx__g {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  margin: 0; padding: 0; background: none; line-height: inherit;
}
span.mx { display: inline-block; position: relative; }
span.mx-linea { display: inline; }

/* El navegador parte de renglón entre dos cajas seguidas aunque no haya espacio
   entre ellas, y una letra suelta ES una caja. Cada palabra entera dentro de su
   `nowrap` y los espacios fuera, como texto de verdad: así el lema sigue
   partiendo por donde partía antes y no se cae una letra por renglón. */
span.mx-palabra { display: inline; white-space: nowrap; }

/* ── La letra que cae ─────────────────────────────────────────────────────
   Cada 65 ms se crea una nueva y por eso la animación vuelve a empezar: eso ES
   la lluvia. Dura un pelo menos que el relevo (62 de 65) o la letra no llega a
   posarse y el texto se ve flotando por encima de su línea. */
b.mx__g {
  display: inline-block; font: inherit;
  animation: mx-caer 62ms cubic-bezier(.24,.62,.38,1) both;
}
@keyframes mx-caer {
  /* Arranca en .28 y no en 0 a propósito: si un aparato congela el reloj de las
     animaciones, una letra con opacidad 0 y relleno `both` dejaría el título
     INVISIBLE. Apagada sí; desaparecida no.
     El recorrido lo pone `--mx-caida`: lo justo para que se lea como algo
     que CAE sin despegarse de su sitio. */
  from { transform: translateY(calc(-1 * var(--mx-caida))); opacity: .28; }
  55%  { opacity: .9; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Y la que estaba se va por abajo. Fuera del flujo, para que la columna no se
   ensanche mientras las dos coinciden. Ese solape es el rastro de la gota. */
.mx__g--sale {
  position: absolute; left: 0; top: 0; pointer-events: none;
  animation: mx-salir 74ms linear forwards;
}
@keyframes mx-salir {
  from { transform: translateY(0); opacity: .38; }
  to   { transform: translateY(var(--mx-caida)); opacity: 0; }
}

/* La cabeza de la lluvia: la letra que va delante, encendida, como la gota de
   delante en la película. */
.mx--cabeza {
  color: var(--mx-cabeza);
  text-shadow: 0 0 3px color-mix(in srgb, var(--cian) 34%, transparent),
               0 0 10px color-mix(in srgb, var(--violeta) 20%, transparent);
}

/* Y al posarse baja del encendido de la cabeza al color de siempre. Corto: la
   letra aterriza y se apaga. Si dura, el título entero se queda brillando. */
.mx--fijo { animation: mx-posarse 300ms cubic-bezier(.2,.7,.3,1); }
@keyframes mx-posarse {
  from { color: var(--mx-cabeza);
         text-shadow: 0 0 4px color-mix(in srgb, var(--cian) 38%, transparent),
                      0 0 12px color-mix(in srgb, var(--violeta) 22%, transparent); }
  to   { color: inherit; text-shadow: none; }
}

/* Ni la puntuación ni los signos caen: no son letra. */
.mx--seco { opacity: .75; }

/* ── La trampa del degradado ──────────────────────────────────────────────
   `.marca` se pinta con `background-clip: text` y color transparente: el
   degradado del padre se recorta contra los glifos de sus descendientes. Una
   letra que cae dentro heredaría ese transparente y sería INVISIBLE — el
   efecto se vería como huecos abriéndose en el nombre. Por eso el <b> que cae
   lleva su propio color, y las ya posadas vuelven solas al degradado.
   Misma trampa que en zaxdesigns.com y en el logo dorado de Sonido de Vida. */
.marca b.mx__g,
.marca .mx--cabeza { -webkit-text-fill-color: var(--mx-cabeza); color: var(--mx-cabeza); }
/* Mientras cae, la columna no debe recortar el degradado a un hueco vacío. */
.marca .mx--fijo { -webkit-text-fill-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  b.mx__g, .mx__g--sale, .mx--fijo { animation: none; }
}