/*
 * Design System - AELITA
 * motion.css - restrained scroll-reveal.
 *
 * Elements get .reveal-hidden (opacity 0 + a slight offset) from
 * js/design-system/reveal.js only when they sit below the fold, then
 * .is-revealed as they scroll into view. Nothing is hidden without JS, and
 * prefers-reduced-motion skips the effect entirely.
 */

.reveal-hidden {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 500ms var(--ease-out),
		transform 500ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

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

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

/* Back-to-top: fade via CSS instead of jQuery, higher specificity than the
 * legacy `#back-top { transition: 1s }` in main.css. */
body #back-top {
	transition:
		opacity var(--dur-overlay) var(--ease-out),
		visibility 0s linear var(--dur-overlay);
}

body #back-top.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}