.has-reveal [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--routeon-reveal-duration) var(--routeon-reveal-ease),
		translate var(--routeon-reveal-duration) var(--routeon-reveal-ease);
	backface-visibility: hidden;
}

.has-reveal [data-reveal="up"] {
	translate: 0 var(--routeon-reveal-distance);
}

.has-reveal [data-reveal="right"] {
	translate: calc(-1 * var(--routeon-reveal-distance));
}

.has-reveal [data-reveal="left"] {
	translate: var(--routeon-reveal-distance);
}

.has-reveal [data-reveal].is-revealed {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal [data-reveal] {
		opacity: 1;
		translate: none;
		transition: none;
	}
}