@keyframes fade {
	0% {
		opacity: 0;
		--scale: 0.8;
	}
	100% {
		opacity: 1;
		--scale: 1;
	}
}

@keyframes fade-up {
	0% {
		opacity: 0;
		--translate-y: var(--increment);
	}
	100% {
		opacity: 1;
		--translate-y: 0;
	}
}

@keyframes fade-down {
	0% {
		opacity: 0;
		--translate-y: calc(-1 * var(--increment));
	}
	100% {
		opacity: 1;
		--translate-y: 0;
	}
}

@keyframes fade-left {
	0% {
		opacity: 0;
		--translate-x: var(--increment);
	}
	100% {
		opacity: 1;
		--translate-x: 0;
	}
}

@keyframes fade-right {
	0% {
		opacity: 0;
		--translate-x: calc(-1 * var(--increment));
	}
	100% {
		opacity: 1;
		--translate-x: 0;
	}
}

@keyframes slide-up {
	0% {
		--translate-y: var(--offset, 110%);
	}
	100% {
		--translate-y: 0;
	}
}

@keyframes slide-down {
	0% {
		--translate-y: calc(-1 * var(--offset, 110%));
	}
	100% {
		--translate-y: 0;
	}
}

@keyframes slide-left {
	0% {
		--translate-x: var(--offset, 110%);
	}
	100% {
		--translate-x: 0;
	}
}

@keyframes slide-right {
	0% {
		--translate-x: calc(-1 * var(--offset, 110%));
	}
	100% {
		--translate-x: 0;
	}
}