/*
 * ALLPING scroll entrance effects
 * Paired with allping-entrance-animation-engine.js.
 */
:root {
	--allping-entrance-duration: 650ms;
	--allping-entrance-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--allping-entrance-distance: 24px;
}

:where(
	.entrance-left,
	.entrance-right,
	.entrance-up,
	.entrance-down,
	.entrance-fade,
	.entrance-zoom,
	.efecto-subir
) {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	transition-property: opacity, translate, scale;
	transition-duration: var(--allping-entrance-duration);
	transition-timing-function: var(--allping-entrance-easing);
}

:where(
	.entrance-left,
	.entrance-right,
	.entrance-up,
	.entrance-down,
	.entrance-fade,
	.entrance-zoom,
	.efecto-subir
).is-pending {
	opacity: 0;
	will-change: opacity, translate, scale;
}

.entrance-left.is-pending {
	translate: calc(0px - var(--allping-entrance-distance)) 0;
}

.entrance-right.is-pending {
	translate: var(--allping-entrance-distance) 0;
}

.entrance-up.is-pending,
.efecto-subir.is-pending {
	translate: 0 var(--allping-entrance-distance);
}

.entrance-down.is-pending {
	translate: 0 calc(0px - var(--allping-entrance-distance));
}

.entrance-zoom.is-pending {
	scale: 0.97;
}

:where(
	.entrance-left,
	.entrance-right,
	.entrance-up,
	.entrance-down,
	.entrance-fade,
	.entrance-zoom,
	.efecto-subir
).is-visible {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

:where(.entrance-left, .entrance-right, .entrance-up, .entrance-down, .entrance-fade, .entrance-zoom, .efecto-subir).is-visible.delay1 {
	transition-delay: 200ms;
}

:where(.entrance-left, .entrance-right, .entrance-up, .entrance-down, .entrance-fade, .entrance-zoom, .efecto-subir).is-visible.delay2 {
	transition-delay: 400ms;
}

:where(.entrance-left, .entrance-right, .entrance-up, .entrance-down, .entrance-fade, .entrance-zoom, .efecto-subir).is-visible.delay3 {
	transition-delay: 600ms;
}

:where(.entrance-left, .entrance-right, .entrance-up, .entrance-down, .entrance-fade, .entrance-zoom, .efecto-subir).is-visible.delay4 {
	transition-delay: 800ms;
}

:where(.entrance-left, .entrance-right, .entrance-up, .entrance-down, .entrance-fade, .entrance-zoom, .efecto-subir).is-visible.delay5 {
	transition-delay: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
	:where(
		.entrance-left,
		.entrance-right,
		.entrance-up,
		.entrance-down,
		.entrance-fade,
		.entrance-zoom,
		.efecto-subir
	) {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		transition: none !important;
		will-change: auto;
	}
}