/* Testo Animato 1.1.0 */

/* Evita il "lampo" di testo prima che lo script lo prepari.
   Rete di sicurezza: se lo script non parte, il testo riappare comunque dopo 3s. */
html.ta-js .testo-animato:not(.ta-pronto) {
	visibility: hidden;
	animation: ta-sicurezza 0s linear 3s forwards;
}
@keyframes ta-sicurezza { to { visibility: visible; } }

/* Stato nascosto */
.testo-animato.ta-pronto .ta-w {
	opacity: 0;
	transition-property: opacity, transform, filter, color, background-size;
	will-change: opacity;
}

/* Effetti */
.testo-animato.ta-fx-su .ta-w      { display: inline-block; transform: translateY(0.45em); }
.testo-animato.ta-fx-zoom .ta-w    { display: inline-block; transform: scale(0.6); }
.testo-animato.ta-fx-sfocato .ta-w { filter: blur(8px); }

/* Stato visibile (deve stare dopo gli effetti) */
.testo-animato.ta-attivo .ta-w {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Link: la linea al passaggio del mouse.
   Il tema la disegna con a::after (funziona solo su una riga): qui la sostituiamo
   con uno sfondo che segue il testo anche quando il link va a capo.
   Colore e spessore si cambiano con --ta-linea e --ta-linea-spessore. */
.testo-animato a::after,
.testo-animato a::before { display: none !important; }

.testo-animato a {
	white-space: nowrap;               /* il link va a capo tutto intero */
	text-decoration: none;
	background-image: linear-gradient(var(--ta-linea, #fff), var(--ta-linea, #fff));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% var(--ta-linea-spessore, 1px);
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;       /* la linea scorre da una riga all'altra */
}
.testo-animato a:hover,
.testo-animato a:focus-visible {
	background-size: 100% var(--ta-linea-spessore, 1px);
}
/* Link più larghi dello schermo: possono andare a capo (lo decide lo script). */
.testo-animato a.ta-spezza { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
	.testo-animato .ta-w { transition: none !important; }
}