/*
 * SBS lightweight motion enhancement layer — v1.7.97
 * Uses opacity + the independent CSS translate property so existing transform/GSAP logic is not replaced.
 */
:root {
	--sbs-motion-duration: 560ms;
	--sbs-motion-distance-text: 12px;
	--sbs-motion-distance-card: 18px;
	--sbs-motion-distance-media: 10px;
	--sbs-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.sbs-motion-js .sbs-motion-item {
	opacity: 0;
	translate: 0 var(--sbs-motion-distance, 14px);
	transition:
		opacity var(--sbs-motion-duration) var(--sbs-motion-ease),
		translate var(--sbs-motion-duration) var(--sbs-motion-ease);
	transition-delay: var(--sbs-motion-delay, 0ms);
	will-change: opacity, translate;
}

html.sbs-motion-js .sbs-motion-item.sbs-motion-text {
	--sbs-motion-distance: var(--sbs-motion-distance-text);
}

html.sbs-motion-js .sbs-motion-item.sbs-motion-card {
	--sbs-motion-distance: var(--sbs-motion-distance-card);
}

html.sbs-motion-js .sbs-motion-item.sbs-motion-media {
	--sbs-motion-distance: var(--sbs-motion-distance-media);
}

html.sbs-motion-js .sbs-motion-item.sbs-motion-visible {
	opacity: 1;
	translate: 0 0;
}

html.sbs-motion-js .sbs-motion-item.sbs-motion-settled {
	will-change: auto;
}

/* Never hide content in editor, reduced-motion, print, or low-power safety mode. */
html.sbs-motion-reduced .sbs-motion-item,
body.elementor-editor-active .sbs-motion-item,
body.elementor-editor-preview .sbs-motion-item {
	opacity: 1 !important;
	translate: none !important;
	transition: none !important;
	will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	html.sbs-motion-js .sbs-motion-item {
		opacity: 1 !important;
		translate: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}

@media print {
	.sbs-motion-item {
		opacity: 1 !important;
		translate: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}