/* Innova × Clean Car — Sistema de Motion 2050 (sin WebGL)
   Fuente de verdad. Copiar a site/ y site-b2b/ (no editar las copias). */
@property --aurora-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

:root {
	--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out-tunnel: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 600ms;
	--dur-reveal: 900ms;
	--stagger: 80ms;
}

/* 1. Reveal: estado inicial + visible (fallback IO añade .is-visible) */
.mo-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-soft),
		transform var(--dur-reveal) var(--ease-out-soft);
	will-change: opacity, transform;
}
.mo-reveal.is-visible {
	opacity: 1;
	transform: none;
}
.mo-reveal[data-mo-delay] {
	transition-delay: var(--mo-delay, 0ms);
}
/* No-JS: si el scripting está desactivado, mostrar el contenido sin depender de animación */
@media (scripting: none) {
	.mo-reveal {
		opacity: 1;
		transform: none;
	}
}

/* 2. Glass panel */
.mo-glass {
	background: color-mix(in srgb, var(--surface-card, #fff) 70%, transparent);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid
		color-mix(in srgb, var(--led-blue, #1e9bd7) 30%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
	.mo-glass {
		background: var(--surface-card, #fff);
	}
}

/* 3. Aurora animada (fondo secciones oscuras) */
.mo-aurora {
	position: relative;
	isolation: isolate;
	/* el ::before sobredimensionado (inset -20%) no debe desbordar el documento */
	overflow: hidden;
}
.mo-aurora::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -1;
	background: conic-gradient(
		from var(--aurora-angle),
		var(--dark-bg, #0a1626),
		var(--led-blue, #1e9bd7),
		var(--led-cyan, #4fd1e0),
		var(--dark-surface, #11203a),
		var(--dark-bg, #0a1626)
	);
	filter: blur(80px) opacity(0.55);
	animation: mo-aurora-spin 24s linear infinite;
	animation-play-state: var(--mo-aurora-play, running);
}
@keyframes mo-aurora-spin {
	to {
		--aurora-angle: 360deg;
	}
}

/* 4. Botón glow */
.mo-glow {
	position: relative;
	transform: translate3d(var(--mo-mx, 0), var(--mo-my, 0), 0);
	transition:
		transform var(--dur-fast) var(--ease-out-soft),
		box-shadow var(--dur-base) var(--ease-out-soft);
}
.mo-glow:hover {
	box-shadow: var(--shadow-glow, 0 0 40px rgba(30, 155, 215, 0.35));
}

/* 5. Parallax: las capas reciben --mo-py desde JS */
.mo-parallax {
	transform: translate3d(0, var(--mo-py, 0), 0);
	will-change: transform;
}

@media (max-width: 640px) {
	.mo-parallax {
		transform: none !important;
	}
}

/* Reduced motion: desactivar todo movimiento perturbador */
@media (prefers-reduced-motion: reduce) {
	.mo-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.mo-aurora::before {
		animation: none;
	}
	.mo-glow {
		transform: none !important;
	}
	.mo-glow:hover {
		transform: none;
	}
	.mo-parallax {
		transform: none !important;
	}
}

/* ---- Tilt 3D (cards de modelo, solo pointer fino) ---- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.mo-tilt {
		transform-style: preserve-3d;
		transition:
			transform 0.2s ease,
			box-shadow 0.2s ease;
		will-change: transform;
	}
	.mo-tilt.is-tilting {
		transition: none;
	}
}