/* Vidas – Marquesina
 * Desktop (Figma): banda 153px negra, texto Soleil Light 85px ls -2% blanco, centrado vertical.
 * Móvil: banda 63px, texto 36px.
 * El JS duplica el grupo de frases hasta cubrir 2× el ancho y fija la duración según --vidas-marquee-speed (px/s).
 */

.vidas-marquee {
	--vidas-marquee-bg: #000;
	--vidas-marquee-color: #fff;
	--vidas-marquee-height: 153px;
	--vidas-marquee-speed: 100;          /* px por segundo (lo lee el JS) */
	--vidas-marquee-gap: 0.3em;          /* espacio a cada lado del separador */
	--vidas-marquee-duration: 30s;       /* lo calcula el JS a partir de la velocidad */
	--vidas-marquee-distance: 0px;       /* ancho de un grupo, lo fija el JS */

	position: relative;
	overflow: hidden;
	width: 100%;
	height: var(--vidas-marquee-height);
	background: var(--vidas-marquee-bg);
	color: var(--vidas-marquee-color);
	font-family: "Soleil", sans-serif;
}

.vidas-marquee__track {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	width: max-content;
	transform: translateY(-50%);
	will-change: transform;
	animation: vidas-marquee-left var(--vidas-marquee-duration) linear infinite;
}

.vidas-marquee-dir-right .vidas-marquee__track {
	animation-name: vidas-marquee-right;
}

.vidas-marquee-pause-yes .vidas-marquee:hover .vidas-marquee__track {
	animation-play-state: paused;
}

.vidas-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
}

.vidas-marquee__item,
.vidas-marquee__sep {
	display: inline-block;
	font-family: inherit;
	font-weight: 300;
	font-size: 85px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: inherit;
}

.vidas-marquee__sep {
	padding: 0 var(--vidas-marquee-gap);
}

@keyframes vidas-marquee-left {
	from { transform: translate3d(0, -50%, 0); }
	to   { transform: translate3d(calc(-1 * var(--vidas-marquee-distance)), -50%, 0); }
}

@keyframes vidas-marquee-right {
	from { transform: translate3d(calc(-1 * var(--vidas-marquee-distance)), -50%, 0); }
	to   { transform: translate3d(0, -50%, 0); }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.vidas-marquee {
		--vidas-marquee-height: 63px;
	}

	.vidas-marquee__item,
	.vidas-marquee__sep {
		font-size: 36px;
	}
}

/* Accesibilidad: sin desplazamiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
	.vidas-marquee__track {
		animation: none;
	}
}