/**
 * Titolo animato Goertz — [goertz_titolo_animato]
 *
 * Due righe di testo che compaiono lettera per lettera (dissolvenza +
 * leggero slide dal basso), una sola volta, quando il titolo entra nel
 * viewport. Nessuno stile di testo (font, colore, dimensione): il testo
 * eredita tutto dal modulo Divi che contiene lo shortcode.
 */

.goertz-titolo-animato {
	width: 100%;
}

.goertz-titolo-animato--center {
	text-align: center;
}

.goertz-titolo-animato__titolo {
	margin: 0;
}

/* Ogni riga occupa il proprio spazio: le due frasi restano impilate
   indipendentemente dal tag di titolo ereditato dal modulo Divi. */
.goertz-titolo-animato__riga {
	display: block;
}

/* Ogni lettera parte invisibile e leggermente più in basso; la
   comparsa scatta con un ritardo crescente in base a --i, la variabile
   con l'indice della lettera impostata in PHP. */
.goertz-titolo-animato__lettera {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.35em);
	transition:
		opacity 1s ease,
		transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 0.07s);
}

/* Classe aggiunta una sola volta dal JS quando il titolo entra nel
   viewport: le lettere compaiono e la classe non viene più rimossa. */
.goertz-titolo-animato.is-attivo .goertz-titolo-animato__lettera {
	opacity: 1;
	transform: translateY(0);
}

/* Titolo animato: puramente decorativo (le lettere sono spezzate in
   span). Il testo reale per screen reader è qui, nascosto solo
   visivamente. */
.goertz-titolo-animato__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Accessibilità: riduzione del movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.goertz-titolo-animato__lettera {
		transition-duration: 0.2s;
		transition-delay: 0s !important;
		transform: none;
	}
}