/**
 * Section reveal (motion.js): sections below the fold fade in and move up
 * 24px once, when they enter the viewport. The classes are only ever set by
 * the script, so without JavaScript every section is simply visible.
 * Opacity and translate only: no layout shift.
 */

.reveal {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.6s ease, translate 0.6s ease;
}

.reveal.is-revealed {
	opacity: 1;
	translate: none;
}

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