/*──────────────────────────────────────────────────────────────────────────
	REVEAL ANIMATIONS
──────────────────────────────────────────────────────────────────────────*/

.reveal-enabled :where(.fade-up, .fade-left, .fade-right) {
	opacity: 0;
	transition:
		opacity 500ms ease,
		transform 500ms ease;
	will-change: opacity, transform;
}

.reveal-enabled .fade-up {
	transform: translateY(2rem);
}

.reveal-enabled .fade-left {
	transform: translateX(-2rem);
}

.reveal-enabled .fade-right {
	transform: translateX(2rem);
}

.reveal-enabled :where(.fade-up, .fade-left, .fade-right).is-visible {
	opacity: 1;
	transform: translate(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal-enabled :where(.fade-up, .fade-left, .fade-right) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}