@use 'sass:string';

@for $i from 0 through 20 {
	.transition-delay-#{$i} {
		transition-delay: string.unquote('#{$i}s');
	}

	.transition-duration-#{$i} {
		transition-duration: string.unquote('#{$i}s');
	}

	.animation-delay-#{$i} {
		animation-delay: string.unquote('#{$i}s');
	}

	.animation-duration-#{$i} {
		animation-duration: string.unquote('#{$i}s');
	}
}

@keyframes fly-in-top {
	0% {
		opacity: 0;
		transform: translateY(-1.5rem);
	}

	15% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fly-in-bottom {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	to {
		opacity: 1;
		transform: translateZ(0);
	}
}

@keyframes pan-left {
	0% {
		opacity: 0;
		transform: translateX(-1.5rem);
	}

	60% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pan-right {
	0% {
		opacity: 0;
		transform: translateX(1.5rem);
	}

	60% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	60% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	20% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}
}

@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

@keyframes sparkle {
	0% {
		transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}

	25% {
		transform: scale(1) rotate(360deg);
		opacity: 1;
	}

	50% {
		transform: scale(0.3) rotate(720deg);
		opacity: 0;
	}

	100% {
		transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}
}