/* CSS Document */
body { background-color: #000; font-family: 'Arial', sans-serif; overflow: hidden; }
::-webkit-scrollbar { width: 0px; background: transparent; }

/* Font fluidi */
.text-fluid-xs { font-size: clamp(9px, 0.9vw, 12px); }
.text-fluid-base { font-size: clamp(13px, 1.4vw, 18px); } 
.text-fluid-xl { font-size: clamp(18px, 2.2vw, 28px); }
.text-fluid-3xl { font-size: clamp(28px, 4vw, 56px); }

.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* SCORRIMENTO (MARQUEE) PER LE FERMATE */
.marquee-container {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	width: 100%;
}

/* Applica la maschera solo quando la classe 'scroll' è attiva (testo lungo) */
.marquee-container.scroll {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-content {
    /* Deve essere inline-block per superare la larghezza del contenitore */
	display: inline-block;
	white-space: nowrap;
	will-change: transform; 
	padding-left: 0;
}

/* Animazione attiva solo se aggiungiamo la classe .scroll via JS */
.marquee-content.scroll {
    /* Questo padding spinge il testo fuori dal contenitore a destra per l'animazione */
	padding-left: 100%; 
	/* La durata è impostata via JS inline style */
	animation-name: scroll-left;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* CORREZIONE PER L'ANIMAZIONE: usiamo un valore fisso grande per assicurare che il testo esca dallo schermo */
@keyframes scroll-left {
	0% { transform: translateX(0); }
	/* Sostituiamo translateX(-100%) con un valore fisso ampio per aggirare il calcolo fallato del browser */
	100% { transform: translateX(-2000px); } 
}