/*
 * GOYN — accensione parola per parola (meccanismo condiviso)
 *
 * Il contratto sta in testa a assets/js/words.js. Qui c'è il conto che traduce
 * UN numero — il progresso scritto dallo script — nell'opacità di ogni parola.
 *
 *   avanzamento della parola = progresso × numero di parole − indice
 *
 * che vale 0 quando il fronte di accensione la raggiunge e 1 quando l'ha
 * superata. Il `clamp` la tiene fra spenta e accesa.
 *
 * L'originale ha invece un `useTransform` per parola: con 22 parole sono 22
 * interpolazioni per frame, qui è una proprietà scritta per frame e il resto lo
 * fa il browser durante il calcolo dello stile.
 *
 * ⚠️ `--goyn-words-p: 1` NON è uno stato di partenza: è il comportamento senza
 *    JavaScript. Il paragrafo è tutto acceso e leggibile, e lo script lo spegne
 *    solo quando c'è ed è il momento.
 *
 * ⚠️ Il numero di parole e l'indice li stampa il template: il CSS non può
 *    contare i figli né leggere un attributo.
 *
 * `.goyn-word` (inline-block, `white-space: pre`) sta nel child theme, in
 * base.css: le parole sono spezzate in `<span>` anche dove questo meccanismo
 * non si usa.
 */

[data-goyn-words] {
	--goyn-words-p: 1;
	--goyn-word-dim: 0.16;
}

[data-goyn-words] .goyn-word {
	opacity: clamp(
		var(--goyn-word-dim),
		calc(
			var(--goyn-word-dim) +
			(1 - var(--goyn-word-dim)) *
			(var(--goyn-words-p) * var(--goyn-words-n, 1) - var(--goyn-word-i, 0))
		),
		1
	);
}

/*
 * Con movimento ridotto lo script non parte nemmeno, quindi la proprietà resta
 * a 1. La regola è comunque qui per il caso in cui l'impostazione cambi a pagina
 * aperta: il fronte si ferma e tutto resta acceso.
 */
@media (prefers-reduced-motion: reduce) {
	[data-goyn-words] .goyn-word {
		opacity: 1;
	}
}