/* -----------------------------------------
   Soulmix - Animación de entrada "text reveal"
   Cada palabra del título sube desde abajo, recortada por una máscara,
   en cascada palabra por palabra, al entrar en el viewport.
   ----------------------------------------- */

.text-reveal {
	opacity: 0;
}

.text-reveal.is-revealed {
	opacity: 1;
}

.text-reveal__word {
	display: inline-block;
	vertical-align: top;
}

.text-reveal__word-inner {
	display: inline-block;
	/*
	 * Máscara con clip-path en vez de overflow:clip + translateY, para no
	 * depender de la caja de línea del contenedor ni desplazar la palabra
	 * fuera de su caja (lo que podía solaparla con la línea inferior).
	 *
	 * El primer valor del inset() es NEGATIVO a propósito: con un
	 * line-height < 1 (los títulos usan 0.94), la caja del inline-block
	 * mide menos que el propio glifo, así que el remate de las vocales
	 * acentuadas (Á, É, Í, Ó, Ú) sobresale por encima del borde superior
	 * de la caja. Un inset con 0 arriba recortaba justo ahí y decapitaba
	 * las tildes durante la animación. Extendiendo la ventana de recorte
	 * 0.35em por arriba, el acento entra dentro de la zona visible sin
	 * tocar el layout: clip-path no ocupa espacio, así que no añade
	 * ninguna separación visual entre líneas ni cambia la estética.
	 */
	clip-path: inset(-0.35em 0 100% 0);
	transform: translateY(30%);
	transition: clip-path 1.1s cubic-bezier(0.23, 1, 0.32, 1), transform 1.1s cubic-bezier(0.23, 1, 0.32, 1);
}

/*
 * Al final de la animación la ventana se abre también por abajo y por los
 * lados, manteniendo la holgura superior para los acentos. Se dejan valores
 * negativos en los cuatro lados para que ningún glifo con descendente (g, j,
 * p, y) o acento quede rozando el borde del recorte.
 */
.text-reveal.is-revealed .text-reveal__word-inner {
	clip-path: inset(-0.35em -0.15em -0.35em -0.15em);
	transform: translateY(0);
}