.dtk-reveal {
	opacity: 0;
	translate: 0 0;
	transition:
		opacity var(--dtk-reveal-duration, 500ms) ease,
		translate var(--dtk-reveal-duration, 500ms) ease;
}

.dtk-reveal--from-bottom {
	translate: 0 1.5rem;
}

.dtk-reveal--from-top {
	translate: 0 -1.5rem;
}

.dtk-reveal--from-left {
	translate: -1.5rem 0;
}

.dtk-reveal--from-right {
	translate: 1.5rem 0;
}

.dtk-reveal.dtk-reveal--in {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce), (scripting: none) {
	.dtk-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}
}