/* ================================================
   Finismedia — Marquesina Widget v1.0.0
   ================================================ */

/* ── Contenidor ──────────────────────────────── */
.fm-marquee-wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

/* ── Track horitzontal ───────────────────────── */
.fm-marquee-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	will-change: transform;
}

/* display:contents fa transparent el span del pass —
   els fills van directament al flex del track */
.fm-marquee-pass {
	display: contents;
}

.fm-marquee-item,
.fm-marquee-sep {
	flex-shrink: 0;
	white-space: pre;
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	.fm-marquee-track {
		animation: none !important;
	}
}

/* Pausa al hover gestionada per JS (smoothPause/smoothResume) */

/* ── Keyframes ───────────────────────────────── */
/*
 * JS mesura 1 pass i clona fins omplir el contenidor.
 * --fm-pass-size = amplada (px) d'un sol pass, calculada per JS.
 * Animem exactament 1 pass-size → loop perfecte sense salt ni buit.
 * Fallback 0px: sense JS el contingut es veu estàtic (sense animació).
 */

@keyframes fm-marquee-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(calc(-1 * var(--fm-pass-size, 0px))); }
}

@keyframes fm-marquee-right {
	0%   { transform: translateX(calc(-1 * var(--fm-pass-size, 0px))); }
	100% { transform: translateX(0); }
}