/*
 * Cursore lampeggiante per l'effetto typewriter della hero.
 * Usato insieme a js/hero-typewriter.js
 */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: -2px;
  animation: typewriterBlink 1s step-end infinite;
}

@keyframes typewriterBlink {
  50% {
    opacity: 0;
  }
}

/*
 * Typewriter del corpo testo (sezione 2 "Lo Sappiamo" e sezione "Chi ci ha scelto")
 * Ogni carattere parte invisibile e appare in sequenza via JS (hero-typewriter.js),
 * creando l'effetto "scrittura a macchina" senza rompere gli span colorati interni.
 */
.tw-char {
  opacity: 0;
  transition: opacity 0.05s linear;
}

.tw-char.tw-visible {
  opacity: 1;
}

/* La capitalizzazione corretta viene già applicata via JS carattere per carattere:
   disattiva il text-transform:capitalize ereditato da .featured-heading sui singoli
   caratteri, altrimenti il browser tratta ogni span da 1 lettera come inizio parola
   e mette tutto in maiuscolo. */
#sezione2-body-typewriter .featured-heading .tw-char,
#sezione7-body-typewriter .featured-heading .tw-char {
  text-transform: none;
}