/* Shared scroll motion (opt-in). Nothing animates unless an element carries:
   .mg-rv       fade-up (a card, banner, etc.)
   .mg-rv-h     heading: fade + slight slide from the left
   .mg-rv-group a wrapper whose cards (.mg-cta, .mg-brand-card) each fade-up on their own, so stacked
                mobile cards animate as each one comes into view; card headings slide like .mg-rv-h.
   Hidden start states exist only under html.mg-anim, which a head script adds when motion is allowed,
   so no-JS, reduced-motion and script-failure visitors always see everything. Animations (not
   transitions) are used so they never fight the components' own hover transitions. */
@media (prefers-reduced-motion: no-preference) {
	html.mg-anim .mg-rv,
	html.mg-anim .mg-rv-h,
	html.mg-anim .mg-rv-group .mg-cta,
	html.mg-anim .mg-rv-group .mg-brand-card { opacity: 0; }
	html.mg-anim .mg-rv.mg-in,
	html.mg-anim .mg-rv-group .mg-cta.mg-in,
	html.mg-anim .mg-rv-group .mg-brand-card.mg-in {
		animation: mgRise 0.55s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: var(--mg-d, 0ms);
	}
	html.mg-anim .mg-rv-h.mg-in {
		animation: mgSlide 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: var(--mg-d, 0ms);
	}
	/* Card headings (shortcode output, so styled from here rather than edited in the shortcodes) slide
	   in just after their card starts; the description and button ride in with the card. */
	html.mg-anim .mg-rv-group .mg-cta .mg-cta-content h2 { opacity: 0; }
	html.mg-anim .mg-rv-group .mg-cta.mg-in .mg-cta-content h2 {
		animation: mgSlide 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: calc(var(--mg-d, 0ms) + 100ms);
	}
	/* If motion.js never ran (blocked/failed), the head script adds .mg-anim-failsafe after 4s. */
	html.mg-anim.mg-anim-failsafe .mg-rv,
	html.mg-anim.mg-anim-failsafe .mg-rv-h,
	html.mg-anim.mg-anim-failsafe .mg-rv-group .mg-cta,
	html.mg-anim.mg-anim-failsafe .mg-rv-group .mg-brand-card,
	html.mg-anim.mg-anim-failsafe .mg-rv-group .mg-cta .mg-cta-content h2 { opacity: 1; }
	@keyframes mgRise {
		from { opacity: 0; transform: translateY(22px); }
		to { opacity: 1; transform: none; }
	}
	@keyframes mgSlide {
		from { opacity: 0; transform: translateX(-6px); }
		to { opacity: 1; transform: none; }
	}
}