/*
 * Zaguán — entradas de lo marcado con is-anim-* / data-anim.
 *
 * Desde la 2.14.0 la entrada la empieza el CSS, no GSAP. Todo lo marcado arranca
 * su animación en el primer pintado y acaba visible por sí solo, así que:
 *
 *   - lo que se ve al cargar (el titular del hero) entra sin esperar a que
 *     lleguen ~117 KB de JavaScript con `defer`, y cuenta para el LCP en cuanto
 *     se pinta;
 *   - si GSAP no llega nunca, no hay nada oculto que liberar ni failsafe que
 *     esperar.
 *
 * interactions.js marca con .zgn-anim-gsap lo que está FUERA de pantalla al
 * arrancar y se queda con ello: le quita esta animación y lo anima con
 * ScrollTrigger cuando llega. La animación CSS de esos elementos ya habrá
 * corrido sin que nadie la viera.
 *
 * Condiciones para animar, y así no dejar nunca contenido inaccesible:
 *
 *   1. .zaguan-js en <html>    → hay JavaScript (lo pone un script en head, que
 *                                no lo pone con movimiento reducido).
 *   2. prefers-reduced-motion  → la media query de abajo.
 *
 * Fill-mode `backwards` y keyframes solo con `from`: durante el retardo se
 * aplica el estado inicial y, al acabar, la animación desaparece y manda el CSS
 * del tema. Con `both` el transform final se quedaría pegado y pisaría el hover
 * del tema; con un `to` explícito, una opacidad del tema se vería a 1.
 *
 * El selector va por prefijo real y no por `[class*="is-anim-"]`, para no
 * capturar clases ajenas que contengan esa subcadena (p. ej. "this-is-animated").
 */

/*
 * Tokens. El tema los fija en theme.json → settings.custom.motion:
 *
 *   "custom": { "motion": { "entrada": {
 *       "duracion": "0.8s", "distancia": "40px", "escala": "0.94",
 *       "ease": "cubic-bezier(0.215, 0.61, 0.355, 1)", "escalonado": "0.1s",
 *       "corta": { "duracion": "0.45s", "distancia": "14px" }
 *   } } }
 *
 * Los valores por defecto son los de siempre: 0,8 s, 40 px y power2.out de GSAP
 * (cubic-bezier(0.215, 0.61, 0.355, 1)). interactions.js lee estas mismas
 * propiedades, así que la entrada en CSS y la de GSAP no se separan.
 */
:root {
	--zgn-anim-duracion: var(--wp--custom--motion--entrada--duracion, 0.8s);
	--zgn-anim-distancia: var(--wp--custom--motion--entrada--distancia, 40px);
	--zgn-anim-escala: var(--wp--custom--motion--entrada--escala, 0.94);
	--zgn-anim-ease: var(--wp--custom--motion--entrada--ease, cubic-bezier(0.215, 0.61, 0.355, 1));
	--zgn-anim-escalonado: var(--wp--custom--motion--entrada--escalonado, 0.1s);
	--zgn-anim-corta-duracion: var(--wp--custom--motion--entrada--corta--duracion, 0.45s);
	--zgn-anim-corta-distancia: var(--wp--custom--motion--entrada--corta--distancia, 14px);
}

/*
 * El retardo de cada elemento. No hereda: sin esto, el hijo de un grupo con
 * is-anim-delay-2 heredaría el retardo del padre aunque no lleve ninguno.
 */
@property --zgn-anim-retardo {
	syntax: "<time>";
	inherits: false;
	initial-value: 0s;
}

@keyframes zgn-anim-fade-up {
	from {
		opacity: 0;
		transform: translateY(var(--zgn-anim-distancia));
	}
}

@keyframes zgn-anim-fade-up-short {
	from {
		opacity: 0;
		transform: translateY(var(--zgn-anim-corta-distancia));
	}
}

@keyframes zgn-anim-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes zgn-anim-scale-in {
	from {
		opacity: 0;
		transform: scale(var(--zgn-anim-escala));
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* fade-up es el preset por defecto, también para un elemento que solo lleva
	   is-anim-delay-N o un data-anim desconocido (igual que en el JS). */
	html.zaguan-js :is([class^="is-anim-"], [class*=" is-anim-"], [data-anim]):not(.zgn-anim-gsap) {
		animation: zgn-anim-fade-up var(--zgn-anim-duracion) var(--zgn-anim-ease) backwards;
		animation-delay: var(--zgn-anim-retardo);
	}

	html.zaguan-js :is(.is-anim-fade-up-short, [data-anim="fade-up-short"]):not(.zgn-anim-gsap) {
		animation-name: zgn-anim-fade-up-short;
		animation-duration: var(--zgn-anim-corta-duracion);
	}

	html.zaguan-js :is(.is-anim-fade-in, [data-anim="fade-in"]):not(.zgn-anim-gsap) {
		animation-name: zgn-anim-fade-in;
	}

	html.zaguan-js :is(.is-anim-scale-in, [data-anim="scale-in"]):not(.zgn-anim-gsap) {
		animation-name: zgn-anim-scale-in;
	}

	/* data-anim manda sobre la clase, como en el JS: va después y con la misma
	   especificidad. */
	html.zaguan-js [data-anim="fade-up"]:not(.zgn-anim-gsap) {
		animation-name: zgn-anim-fade-up;
		animation-duration: var(--zgn-anim-duracion);
	}
}

/* is-anim-delay-N: N pasos del escalonado (0,1 s por defecto). data-anim-delay
   llega como --zgn-anim-retardo en línea desde el render (animations.php). */
.is-anim-delay-1 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 1); }
.is-anim-delay-2 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 2); }
.is-anim-delay-3 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 3); }
.is-anim-delay-4 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 4); }
.is-anim-delay-5 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 5); }
.is-anim-delay-6 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 6); }
.is-anim-delay-7 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 7); }
.is-anim-delay-8 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 8); }
.is-anim-delay-9 { --zgn-anim-retardo: calc(var(--zgn-anim-escalonado) * 9); }