/* ==========================================================================
   Titolo a parole rotanti (widget "animated-headline" di Elementor, stile "rotate",
   animazione "swirl" lettera per lettera). headline-rotate.js scompone le parole in
   lettere e le fa ruotare; senza JS o con "riduci movimento" resta la prima parola, ferma.
   Misure di default del widget; font, dimensione e colori li decide la sezione.
   ========================================================================== */
.headline-rotate {
  display: block;
  font-size: 43px;
  line-height: 1.2;
}

.headline-rotate__text,
.headline-rotate__words {
  vertical-align: bottom;
}

/* Contenitore delle parole: largo quanto la parola attiva (headline-rotate.js ne anima la larghezza). */
.headline-rotate__words {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: start;
  perspective: 300px;
  transition: width 0.5s;
}

.headline-rotate__word {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
}

.headline-rotate__word.is-active {
  position: relative;
  opacity: 1;
}

/* scomposto in lettere (headline-rotate.js): le parole restano visibili, decidono le lettere */
.headline-rotate.is-split .headline-rotate__word {
  opacity: 1;
}

.headline-rotate__letter {
  display: inline-block;
  opacity: 0;
}

.headline-rotate__letter.is-in {
  animation: headline-swirl-in 0.4s forwards;
}

.headline-rotate__letter.is-out {
  animation: headline-swirl-out 0.4s forwards;
}

/* keyframe dell'animazione "swirl" di Elementor */
@keyframes headline-swirl-in {
  0% { opacity: 0; transform: translateZ(-20px) rotateX(90deg); }
  60% { opacity: 1; transform: translateZ(-20px) rotateX(-10deg); }
  100% { opacity: 1; transform: translateZ(-20px) rotateX(0deg); }
}

@keyframes headline-swirl-out {
  0% { opacity: 1; transform: translateZ(-20px) rotateX(0); }
  60% { opacity: 0; transform: translateZ(-20px) rotateX(-100deg); }
  100% { opacity: 0; transform: translateZ(-20px) rotateX(-90deg); }
}

/* Titoli doppi IT/EN (classi testo-rotante-it / testo-rotante-en, come sul vivo):
   TranslatePress mette la lingua nel body, si mostra solo quello della lingua corrente.
   Sul vivo queste due regole stavano nel CSS aggiuntivo del Customizer di Hello Elementor,
   che col cambio di tema non si applica piu': per questo stanno qui. */
body.translatepress-it_IT .testo-rotante-en,
body.translatepress-en_GB .testo-rotante-it {
  display: none !important;
}