:root {
	--animation-easing: ease-out;
	--animation-duration: 1s;
	--animation-start-delay: 0.2s;
	--animation-delay-step: 0.75s;
	--animation-index: 0;
}

/* Fade In */
.fade-in-animation {
	opacity: 0;
}
.fade-in-animation.inview {
	animation: fadeIn var(--animation-duration) var(--animation-easing) forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Fade In Stagger */
.fade-in-stagger-animation > * {
	opacity: 0;
	--animation-duration: 0.4s;
	--animation-delay-step: 0.25s;
}
.inview.fade-in-stagger-animation > * {
	--animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: fadeIn var(--animation-duration) var(--animation-easing)
		var(--animation-delay) forwards;
}

/* Stagger Up */
.stagger-up-animation > * {
	opacity: 0;
}
.inview.stagger-up-animation > * {
	--animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: staggerUp var(--animation-duration) var(--animation-easing)
		var(--animation-delay) forwards;
}

@keyframes staggerUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Stagger Left */
.stagger-left-animation > * > * {
	opacity: 0;
}
.inview.stagger-left-animation > * > * {
	--animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: staggerLeft var(--animation-duration) var(--animation-easing)
		var(--animation-delay) forwards;
}

@keyframes staggerLeft {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Stagger Left - Border Animation for Numbered List */
.wp-block-limson-numbered-list[data-show-dividers="true"]
	.stagger-left-animation
	> .wp-block-limson-numbered-list__item::before {
	transform: scaleX(0);
	transform-origin: right;
}

.wp-block-limson-numbered-list[data-show-dividers="true"]
	.stagger-left-animation.inview
	> .wp-block-limson-numbered-list__item::before {
	--border-animation-duration: 0.2s;
	--animation-delay: calc(
		(var(--animation-delay-step) * var(--animation-index))
	);
	animation: borderSlideIn var(--border-animation-duration)
		var(--animation-easing) var(--animation-delay) forwards;
}

@keyframes borderSlideIn {
	to {
		transform: scaleX(1);
	}
}

/* Pop In Stagger*/
.pop-in-stagger-animation > * {
	opacity: 0;
}
.inview.pop-in-stagger-animation > * {
	--animation-duration: 0.25s;
	--animation-delay-step: 0.15s;

	--animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: popInStagger var(--animation-duration) var(--animation-easing)
		var(--animation-delay) forwards;
}

@keyframes popInStagger {
	0% {
		opacity: 0;
		scale: 0.5;
	}
	80% {
		scale: 1.05;
		opacity: 1;
	}
	100% {
		scale: 1;
		opacity: 1;
	}
}

/* Checkbox Animation */
.checkbox-animation.inview > li::after {
	--check-animation-duration: 0.3s;
	--animation-delay-step: 0.2s;
	--check-animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: checkIconPopIn var(--check-animation-duration)
		var(--animation-easing) var(--check-animation-delay) forwards;
}

@keyframes checkIconPopIn {
	0% {
		opacity: 0;
		scale: 2;
	}
	70% {
		scale: 0.9;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}

/* Flip In */
.flip-in-stagger-animation > * {
	--animation-duration: 0.3s;
	--animation-delay-step: 0.2s;
	transform-origin: 25% 50%;
	opacity: 0;
}
.flip-in-stagger-animation.inview > * {
	--animation-delay: calc(
		var(--animation-start-delay) +
			(var(--animation-delay-step) * var(--animation-index))
	);
	animation: flipInStagger var(--animation-duration) var(--animation-easing)
		var(--animation-delay) forwards;
}

@keyframes flipInStagger {
	0% {
		opacity: 0.75;
		scale: 1.05;
		transform: rotateY(60deg);
	}
	100% {
		opacity: 1;
		scale: 1;
		transform: rotateY(0deg);
	}
}