.reveal {
	--reveal-distance: 24px;
	--reveal-duration: 700ms;
	--reveal-delay: 0ms;
	--reveal-ease: ease;
	--reveal-scale: 0.98;

	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--reveal-ease),
		transform var(--reveal-duration) var(--reveal-ease);
	transition-delay: var(--reveal-delay);
	will-change: opacity, transform;
}

.reveal-up {
	transform: translate3d(0, var(--reveal-distance), 0);
}

.reveal-down {
	transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

.reveal-left {
	transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.reveal-right {
	transform: translate3d(var(--reveal-distance), 0, 0);
}

.reveal-fade {
	transform: none;
}

.reveal-zoom {
	transform: scale(var(--reveal-scale));
}

.reveal-delay-1 {
	--reveal-delay: 90ms;
}

.reveal-delay-2 {
	--reveal-delay: 180ms;
}

.reveal-delay-3 {
	--reveal-delay: 270ms;
}

.reveal-delay-4 {
	--reveal-delay: 360ms;
}

.reveal-delay-5 {
	--reveal-delay: 450ms;
}

.reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}