/**
 * Motion of the redesign: the prototype's fade-up (tailwind.config.ts,
 * raskin-prototypes/sba3), timed by the --sba-duration-* tokens.
 *
 * Two uses. Stylesheets animate their own elements with the keyframes, as the
 * header does for submenus and the mobile panel. Elementor elements get it as
 * an entrance animation: "Fade up" under Advanced > Motion Effects, registered
 * in includes/raskin/motion.php, which Elementor applies by adding the classes
 * `animated sba-fade-up` when the element scrolls into view, after the delay
 * set in the editor. Elementor's own `.animated` rule sets 1.25s, so the
 * duration is restated on the pair.
 */

@keyframes sba-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animated.sba-fade-up {
	animation: sba-fade-up var(--sba-duration-fade-up) ease-out both;
}

/* Keep the elements visible, just without the movement. */
@media (prefers-reduced-motion: reduce) {
	.animated.sba-fade-up {
		animation: none;
	}
}