/* SM Motion Lite — loader orbs + scroll reveal (performance-first) */
:root {
	--sm-orb-navy: #0c1e4a;
	--sm-orb-blue: #1d4ed8;
	--sm-orb-cyan: #38bdf8;
	--sm-orb-amber: #f5a623;
}

/* —— Page loader (CSS orbs, no WebGL) —— */
#sm-orb-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, #06102a 0%, #0c1e4a 55%, #132a5c 100%);
	opacity: 1;
	visibility: visible;
	transition: opacity .35s ease, visibility .35s ease;
	pointer-events: none;
}
#sm-orb-loader.is-done {
	opacity: 0;
	visibility: hidden;
}
.sm-orb-loader__stage {
	position: relative;
	width: 88px;
	height: 88px;
}
.sm-orb-loader__core {
	position: absolute;
	inset: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0%, var(--sm-orb-cyan) 28%, var(--sm-orb-blue) 62%, var(--sm-orb-navy) 100%);
	box-shadow: 0 0 28px rgba(56, 189, 248, .45);
	animation: sm-orb-pulse 1.1s ease-in-out infinite;
}
.sm-orb-loader__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(245, 166, 35, .35);
	animation: sm-orb-spin 2.4s linear infinite;
}
.sm-orb-loader__ring::before,
.sm-orb-loader__ring::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sm-orb-amber);
	box-shadow: 0 0 12px rgba(245, 166, 35, .8);
}
.sm-orb-loader__ring::before { top: -5px; left: 50%; margin-left: -5px; }
.sm-orb-loader__ring::after { bottom: -5px; left: 50%; margin-left: -5px; background: var(--sm-orb-cyan); box-shadow: 0 0 12px rgba(56,189,248,.8); }
.sm-orb-loader__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
	opacity: .55;
	animation: sm-orb-float 2.2s ease-in-out infinite alternate;
}
.sm-orb-loader__blob--a {
	width: 34px; height: 34px; top: 4px; left: -6px;
	background: var(--sm-orb-blue);
}
.sm-orb-loader__blob--b {
	width: 28px; height: 28px; right: -4px; bottom: 8px;
	background: var(--sm-orb-amber);
	animation-delay: .35s;
}
.sm-orb-loader__label {
	margin-top: 18px;
	font: 600 12px/1.2 system-ui, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(232, 238, 248, .85);
	text-align: center;
}

@keyframes sm-orb-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}
@keyframes sm-orb-spin {
	to { transform: rotate(360deg); }
}
@keyframes sm-orb-float {
	from { transform: translateY(0) scale(1); }
	to { transform: translateY(8px) scale(1.08); }
}

/* —— Scroll reveal (CSS scroll-driven; no JS) —— */
@supports (animation-timeline: view()) {
	.sm-reveal,
	ul.products li.product,
	.sm-ficha-extra__block,
	.sm-hub-ecco,
	.sm-seo-block,
	.sm-conv-delivery,
	.sm-conv-volume,
	.sm-fbt {
		animation: sm-reveal linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}

	/* No animar el primer producto (suele ser LCP / above-the-fold) */
	ul.products li.product:nth-child(-n+2) {
		animation: none;
	}
}

@keyframes sm-reveal {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* A11y + data-saver: sin motion */
@media (prefers-reduced-motion: reduce) {
	#sm-orb-loader,
	#sm-orb-loader * {
		animation: none !important;
		transition: none !important;
	}
	#sm-orb-loader { display: none !important; }
	.sm-reveal,
	ul.products li.product,
	.sm-ficha-extra__block,
	.sm-hub-ecco,
	.sm-seo-block,
	.sm-conv-delivery,
	.sm-conv-volume,
	.sm-fbt {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}