/* ==========================================================================
   Testo che entra lettera per lettera o parola per parola allo scroll (animazione di testo
   "char"/"word" di Animation Addons, GSAP SplitText). Comportamento in text-split.js.

     <h2 class="text-split" data-text-split="char" data-text-delay="0.15">…</h2>
     <div class="text-split" data-text-split="word" data-text-delay="0.25"><p>…</p></div>

   Valori del vivo: ogni pezzo parte spostato di 20px a destra e trasparente, 1s, 0.02s fra un
   pezzo e il successivo, curva power1.out (predefinita di GSAP), dopo data-text-delay secondi,
   quando il testo arriva all'85% dello schermo.

   A riposo il testo del vivo resta spezzato da SplitText in lettere inline-block: niente
   crenatura ne' legature fra le lettere. Le due regole qui sotto danno lo stesso disegno anche
   quando il testo non viene spezzato (senza JS, "riduci movimento"): stesso ingombro, stessi a capo.
   ========================================================================== */
.text-split {
  font-kerning: none;
  font-variant-ligatures: none;
}

.text-split__word,
.text-split__char {
  position: relative;
  display: inline-block;
}

.text-split.is-pending .text-split__unit {
  opacity: 0;
  transform: translateX(20px);
}

.text-split.is-pending.is-revealed .text-split__unit {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--text-split-delay, 0s);
}