/*
 * Animaciones de entrada / salida al hacer scroll.
 * Uso en Elementor (Avanzado → Clases CSS):  anim anim--fade-up
 * Combinar con retraso:                      anim anim--zoom-out anim--d2
 * Que también se desvanezca al salir:        anim anim--fade-up anim--repeat
 *
 * IMPORTANTE: no usar a la vez "Animación de entrada" de Elementor en el mismo widget.
 * El JS (anim.js) agrega .is-in cuando el elemento entra en pantalla.
 * Solo se ocultan si <html> tiene .js-anim (lo pone functions.php), así sin JS todo se ve.
 */

.js-anim .anim {
	opacity: 0;
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out),
		filter var(--dur-slow) var(--ease-out),
		/* Hovers de elevación (hover-lift y bloques): sin retraso, para que respondan al instante. */
		translate var(--dur-fast) var(--ease-out) 0s,
		box-shadow var(--dur-fast) 0s;
	transition-delay: var(--anim-delay, 0s), var(--anim-delay, 0s), var(--anim-delay, 0s), 0s, 0s;
	will-change: opacity, transform;
}

.js-anim .anim--fade-up    { transform: translateY(40px); }
.js-anim .anim--fade-down  { transform: translateY(-40px); }
.js-anim .anim--fade-left  { transform: translateX(-48px); }
.js-anim .anim--fade-right { transform: translateX(48px); }
/* "Entra grande y se achica" */
.js-anim .anim--zoom-out   { transform: scale(1.25); filter: blur(6px); }
/* Entra chico y crece */
.js-anim .anim--zoom-in    { transform: scale(.85); }

.js-anim .anim.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Escalonado */
.anim--d1 { --anim-delay: .1s; }
.anim--d2 { --anim-delay: .2s; }
.anim--d3 { --anim-delay: .3s; }
.anim--d4 { --anim-delay: .45s; }
.anim--d5 { --anim-delay: .6s; }

/* Más lento, para títulos grandes */
.anim--slow { transition-duration: 1.3s; }

/* Hovers reutilizables.
   Usan la propiedad `translate` (no `transform`) para no chocar con .anim.is-in,
   que deja `transform: none` cuando el elemento ya entró en pantalla. */
.hover-lift { transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.hover-lift:hover { translate: 0 -6px; box-shadow: var(--shadow-card); }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform var(--dur-base) var(--ease-out); }
.hover-zoom:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.js-anim .anim,
	.js-anim .anim.is-in {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
	.hover-lift:hover { translate: none; }
	.hover-zoom:hover img { transform: none; }
}