/**
 * Il nastro scorrevole, comune alle bande che lo portano.
 *
 * Due sezioni, stessa meccanica: "Che vuò fà" in home e «Ma vale 'a pena?»
 * sulla Loyalty. Le frasi stanno nel documento una volta sola e il modulo
 * `caffeNapoli/marquee` le ripete, poi accende l'animazione.
 *
 * I selettori elencano le classi delle due sezioni invece di una sola classe
 * generica: quelle stanno nel markup salvato di pagine già pubblicate, e
 * rinominarle le lascerebbe senza veste. Quel che cambia da una banda
 * all'altra — passo, maschera, pesi — lo dicono le sezioni con le proprietà
 * qui sotto, e questo foglio va quindi caricato prima dei loro.
 */

.action-trio__marquee,
.conviene__marquee {
	--marquee-passo: 1.4em;
	--marquee-durata: 38s;
	/* Le estremità sfumano invece di tagliare di netto. */
	--marquee-maschera: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% );

	overflow: hidden;
	padding-block: 0.18em;
	-webkit-mask-image: var( --marquee-maschera );
	mask-image: var( --marquee-maschera );
}

/* Ogni sezione tiene il selettore che aveva: `conviene` ha bisogno anche di
   `.wp-block-group` per scavalcare i margini che core dà al gruppo, e
   allinearci pure `action-trio` ne alzerebbe la specificità senza motivo. */
.action-trio__track,
.wp-block-group.conviene__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: var( --marquee-passo );
	width: max-content;
	/* Un gap anche in coda. Senza, metà nastro misura tre frasi e due gap e
	   mezzo mentre il ciclo ne ripete tre e tre: a ogni giro il nastro
	   saltava indietro di mezzo spazio. */
	padding-inline-end: var( --marquee-passo );
}

.action-trio__track > *,
.wp-block-group.conviene__track > * {
	margin-block: 0;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.action-trio__track .is-bold,
.conviene__track .is-bold {
	font-weight: 700;
}

/* Solo il corsivo: il peso è quello di base, e dove cambia lo dice la banda. */
.action-trio__track .is-italic,
.conviene__track .is-italic {
	font-style: italic;
}

/* L'animazione si accende solo quando il modulo ha duplicato il nastro:
   senza la copia, translateX(-50%) lascerebbe metà banda vuota. Senza
   JavaScript le tre frasi restano ferme e leggibili. */
.action-trio__marquee.is-looping .action-trio__track,
.conviene__marquee.is-looping .conviene__track {
	animation: marquee var( --marquee-durata ) linear infinite;
	will-change: transform;
}

@keyframes marquee {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

/* Il puntatore ferma il nastro: serve a chi vuole leggere una frase intera. */
.action-trio__marquee:hover .action-trio__track,
.action-trio__marquee:focus-within .action-trio__track,
.conviene__marquee:hover .conviene__track,
.conviene__marquee:focus-within .conviene__track {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.action-trio__marquee.is-looping .action-trio__track,
	.conviene__marquee.is-looping .conviene__track {
		animation: none;
	}
}