/*
 * Animaciones de entrada.
 * Clases admitidas: "animated fadeIn|fadeInUp [fast] [delay-100ms|delay-200ms|delay-500ms]"
 * o los estilos de bloque "is-style-fade-in" / "is-style-fade-in-up".
 * Solo se ocultan los elementos cuando el script está activo (html.cadmo-anim).
 */

.cadmo-anim :is(.animated, .is-style-fade-in, .is-style-fade-in-up):not(.is-visible) {
	opacity: 0;
}

.cadmo-anim :is(.animated.fadeIn, .is-style-fade-in).is-visible {
	animation: cadmo-fade-in 1s both;
}

.cadmo-anim :is(.animated.fadeInUp, .is-style-fade-in-up).is-visible {
	animation: cadmo-fade-in-up 1s both;
}

.cadmo-anim .animated.fast.is-visible {
	animation-duration: 0.8s;
}

.cadmo-anim .animated.delay-100ms.is-visible {
	animation-delay: 0.1s;
}

.cadmo-anim .animated.delay-200ms.is-visible {
	animation-delay: 0.2s;
}

.cadmo-anim .animated.delay-500ms.is-visible {
	animation-delay: 0.5s;
}

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

	to {
		opacity: 1;
	}
}

@keyframes cadmo-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cadmo-anim :is(.animated, .is-style-fade-in, .is-style-fade-in-up) {
		animation: none !important;
		opacity: 1 !important;
	}
}