/**
 * Truck Scene - Animación SVG sincronizada con slideshow
 *
 * Estructura del DOM (Safe SVG plugin):
 * .wp-block-safe-svg-svg-icon
 *   └── .safe-svg-inside.safe-svg-inline.cm-truck-scene-svg (tiene width: 1201px inline!)
 *         ├── svg (original, lo ocultamos)
 *         ├── .cm-truck-scene__road
 *         └── .cm-truck-scene__truck
 *
 * @package CONVIA_Child
 * @since 1.0.0
 */

/* ==========================================================================
   Contenedor padre de Safe SVG - Este es el que debe recortar
   ========================================================================== */

.wp-block-safe-svg-svg-icon:has(.cm-truck-scene-svg) {
	position: relative;
	width: 100% !important;
	max-width: 1200px;
	height: 102px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/* ==========================================================================
   Contenedor principal - Override inline styles de Safe SVG
   ========================================================================== */

.cm-truck-scene-svg {
	--truck-position-x: -333px;
	position: relative !important;
	width: 100% !important;
	max-width: none !important;
	height: 102px !important;
	overflow: visible !important;
}

/* ==========================================================================
   SVG original - Ocultar después de procesar
   ========================================================================== */

.cm-truck-scene-svg.is-initialized > svg {
	display: none !important;
}

/* ==========================================================================
   Road (Carretera) - 1200px, centrado, se recorta por el padre
   ========================================================================== */

.cm-truck-scene__road {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1200px;
	height: 102px;
	pointer-events: none;
}

.cm-truck-scene__road svg {
	display: block;
	width: 1200px;
	height: 102px;
}

/* ==========================================================================
   Truck (Camión) - 370px, se mueve en el espacio visible
   ========================================================================== */

.cm-truck-scene__truck {
	position: absolute;
	top: 0;
	left: 0;
	width: 370px;
	height: 102px;
	will-change: transform;
	-webkit-transform: translateX(var(--truck-position-x));
	transform: translateX(var(--truck-position-x));
	transition: transform 0.5s ease-out;
	pointer-events: none;
}

.cm-truck-scene__truck svg {
	display: block;
	width: 370px;
	height: 102px;
}