/**
 * GOYN — Fascia scorrevole
 *
 * Fonte: src/components/Marquee.jsx e le regole `.marquee*` in
 * src/styles.css:231-246.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * IL LOOP, E PERCHÉ -50%
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * La pista contiene DUE gruppi identici. Spostarla di -50% la porta esattamente
 * nel punto in cui il secondo gruppo occupa la posizione che aveva il primo:
 * l'animazione può ricominciare senza che si veda un salto. Con tre gruppi il
 * -50% cadrebbe a metà del secondo, e il salto si vedrebbe a ogni giro.
 *
 * La durata qui è un RIPIEGO da 40 secondi, non la verità: marquee.js misura la
 * larghezza reale e la sostituisce con quella che dà i pixel al secondo chiesti
 * nei controlli. 40 secondi sulle frasi predefinite (una passata misura 1237px,
 * due gruppi da due passate fanno ~2474px) valgono ~62 px/s, cioè quasi
 * esattamente i 55 px/s dell'originale: senza JavaScript la fascia va comunque
 * alla velocità giusta.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * LE COSTANTI LOCALI
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *   --goyn-mq-border   rgba(211,171,99,.22) — oro al 22%. Non è in palette come
 *                      variabile trasparente pronta, quindi vive qui.
 *   --goyn-mq-duration 40s — il ripiego spiegato sopra.
 *
 * Tutto il resto viene dai token del tema o dai controlli dell'editor.
 */

/* ============================================================
   1. La fascia
   ============================================================ */

.goyn-marquee {
	/* --- valori sovrascritti dai controlli --- */
	--goyn-mq-bg: var(--goyn-petrol-deep);
	--goyn-mq-color: var(--goyn-peach);
	--goyn-mq-border: var(--goyn-gold-22);
	--goyn-mq-border-w: 1px;
	--goyn-mq-dot: var(--goyn-gold);
	--goyn-mq-dot-size: 5px;
	--goyn-mq-gap: 44px;
	--goyn-mq-pad-y: 15px;

	/* Ripiego senza JavaScript: vedi l'intestazione. */
	--goyn-mq-duration: 40s;

	position: relative;
	overflow: hidden;
	padding: var(--goyn-mq-pad-y) 0;
	background-color: var(--goyn-mq-bg);
	color: var(--goyn-mq-color);
	border-top: var(--goyn-mq-border-w) solid var(--goyn-mq-border);
	border-bottom: var(--goyn-mq-border-w) solid var(--goyn-mq-border);
}

/* ============================================================
   2. La pista
   ============================================================ */

.goyn-marquee__track {
	display: flex;
	width: max-content;
	animation: goyn-marquee-run var(--goyn-mq-duration) linear infinite;
	will-change: transform;
}

/* La direzione nominale è una proprietà, non un secondo keyframe: così
   `playbackRate` di marquee.js resta positivo in marcia normale e negativo
   soltanto quando la pagina scorre verso l'alto — cioè un solo significato per
   il segno. */
.goyn-marquee--reverse .goyn-marquee__track {
	animation-direction: reverse;
}

@keyframes goyn-marquee-run {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.goyn-marquee__group,
.goyn-marquee__set {
	display: flex;
	align-items: center;
}

/*
 * Il ritmo della fascia è UNIFORME: la stessa distanza fra la frase e il
 * pallino che la segue e fra quel pallino e la frase successiva. Il pallino
 * risulta quindi centrato fra due frasi.
 *
 * Servono perciò due spazi, esattamente come nell'originale, dove
 * `.marquee-item` ha `gap: 44px` fra le voci e `padding-right: 44px` in fondo:
 *
 *   qui sotto: `gap` fra le voci + `padding-right` dopo l'ultima, altrimenti
 *   l'ultima frase di una passata toccherebbe la prima della successiva;
 *   più in basso: `gap` dentro la voce, fra la frase e il suo pallino.
 */
.goyn-marquee__set {
	gap: var(--goyn-mq-gap);
	padding-right: var(--goyn-mq-gap);
}

/*
 * Frase e separatore restano uniti: sono un solo elemento in linea. Conta nel
 * riflusso statico, dove un capo fra la frase e il suo pallino sarebbe brutto.
 */
.goyn-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--goyn-mq-gap);
	white-space: nowrap;
}

.goyn-marquee__word {
	/* Famiglia e maiuscolo arrivano da .goyn-label del child theme; qui solo ciò
	   che è specifico della fascia. Restano sovrascrivibili dal controllo di
	   tipografia. */
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 4px;
}

.goyn-marquee__dot {
	flex: none;
	width: var(--goyn-mq-dot-size);
	height: var(--goyn-mq-dot-size);
	border-radius: 50%;
	background-color: var(--goyn-mq-dot);
}

.goyn-marquee__sep {
	flex: none;
	opacity: 0.5;
}

/* ============================================================
   3. Pausa
   ------------------------------------------------------------
   Due sorgenti, entrambe via `animation-play-state`:

     • il passaggio del mouse, se il controllo è attivo;
     • `is-paused`, che marquee.js mette quando la fascia è fuori schermo o la
       scheda è in secondo piano.

   `is-paused` è una classe e non `animation.pause()` delle Web Animations, di
   proposito: mescolare pause()/play() con `animation-play-state` del CSS crea un
   conflitto di priorità fra i due meccanismi. Così lo script tocca solo
   `playbackRate`, che non ha corrispondente in CSS, e i due non si pestano i
   piedi.
   ============================================================ */

.goyn-marquee--pause-hover:hover .goyn-marquee__track,
.goyn-marquee.is-paused .goyn-marquee__track {
	animation-play-state: paused;
}

/* ============================================================
   4. Frasi per i lettori di schermo
   ------------------------------------------------------------
   Nascosto agli occhi, non alle tecnologie assistive. `display: none` o
   `visibility: hidden` lo toglierebbero anche a loro, che è l'opposto.

   La classe è locale e non nel tema: il child theme non ha un'utilità di questo
   tipo (verificato, e nemmeno Hello Elementor). Quando servirà a un secondo
   widget, il posto giusto sarà base.css del tema.
   ============================================================ */

.goyn-marquee__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Avviso mostrato solo nell'editor, quando non c'è nessuna frase. */
.goyn-marquee__notice {
	margin: 0;
	padding: 8px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   5. RIFLUSSO STATICO
   ------------------------------------------------------------
   Serve nei due casi in cui la fascia non si muove. Fermare la pista e basta
   NON è una soluzione: la pista è larga il doppio del contenuto e sta dentro un
   `overflow: hidden`, quindi resterebbe visibile solo la prima parte, con
   l'ultima frase tagliata a metà.

   Le misure, prese dal file del font e non a occhio: una passata delle sei frasi
   predefinite occupa 1237px. Entra su un desktop da 1440px, non entra a 1280,
   e su un telefono da 390px ne servono quattro righe. Una fascia ferma
   mostrerebbe una frase e mezza su sei.

   Il riflusso quindi: una sola passata di un solo gruppo — le altre copie
   servono al loop, non alla lettura — che va a capo e si centra. Se le frasi
   entrano in una riga, `justify-content: center` le centra e non si vede
   differenza; se non entrano, vanno a capo. Un solo insieme di regole copre i
   due casi senza doverli distinguere.

   ⚠️ Le dichiarazioni sono ripetute in due blocchi perché una media query e un
      selettore non si possono unire in una sola regola. Se modifichi uno,
      modifica l'altro: sono lo stesso layout per due ragioni diverse.
   ============================================================ */

/* --- ragione 1: l'utente ha chiesto meno movimento --- */
@media (prefers-reduced-motion: reduce) {
	.goyn-marquee__track {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		animation: none;
		will-change: auto;
	}

	.goyn-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.goyn-marquee__group + .goyn-marquee__group {
		display: none;
	}

	.goyn-marquee__set {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
		padding-right: 0;
	}

	.goyn-marquee__set + .goyn-marquee__set {
		display: none;
	}

	/* Il separatore dell'ultima frase resterebbe appeso nel vuoto. */
	.goyn-marquee__item:last-child .goyn-marquee__dot,
	.goyn-marquee__item:last-child .goyn-marquee__sep {
		display: none;
	}
}

/* --- ragione 2: l'editor di Elementor ---
   Stesso layout. Una fascia in moto perpetuo nel canvas distrae, e una fascia
   ferma e troncata sarebbe peggio: così il cliente vede tutte le frasi che ha
   scritto, complete. In frontend nulla di questo si applica. */
.elementor-editor-active .goyn-marquee__track,
.elementor-editor-preview .goyn-marquee__track {
	width: auto;
	flex-wrap: wrap;
	justify-content: center;
	animation: none;
	will-change: auto;
}

.elementor-editor-active .goyn-marquee__group,
.elementor-editor-preview .goyn-marquee__group {
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.elementor-editor-active .goyn-marquee__group + .goyn-marquee__group,
.elementor-editor-preview .goyn-marquee__group + .goyn-marquee__group {
	display: none;
}

.elementor-editor-active .goyn-marquee__set,
.elementor-editor-preview .goyn-marquee__set {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 8px;
	padding-right: 0;
}

.elementor-editor-active .goyn-marquee__set + .goyn-marquee__set,
.elementor-editor-preview .goyn-marquee__set + .goyn-marquee__set {
	display: none;
}

.elementor-editor-active .goyn-marquee__item:last-child .goyn-marquee__dot,
.elementor-editor-preview .goyn-marquee__item:last-child .goyn-marquee__dot,
.elementor-editor-active .goyn-marquee__item:last-child .goyn-marquee__sep,
.elementor-editor-preview .goyn-marquee__item:last-child .goyn-marquee__sep {
	display: none;
}