/* CSS per il posizionamento smooth dell'immagine centrale */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hero-title span {
  display: inline-block;
  transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.switch-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  margin: 0 1rem;
  flex-shrink: 0; /* Impedisce alla container dell'immagine di cambiare dimensioni */
}

/* Assicura che i testi mantengano la loro posizione base durante le transizioni */
#text-1, #text-2 {
  display: inline-block; /* Necessario per animare la larghezza */
  vertical-align: middle; /* Allinea il testo con l'icona */
  transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  white-space: nowrap; /* Impedisce al testo di andare a capo durante l'animazione */
}

/* Stile per le singole lettere con transizione più smooth */
.text-animation span {
  display: inline-block;
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  transition: all 0.1s ease-out;
}

/* Animazione di apparizione aggiornata */
.animate-in {
  animation: sideSlide 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1);
    color: #00f0ff;
  }
  80% {
    transform: translate(20px, 0) scale(1);
    color: #00f0ff;
  }
  99% {
    transform: translate(0) scale(1.1);
    color: #ffffff;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
    color: inherit;
  }
}

/* Animazione di scomparsa aggiornata */
.animate-out {
  animation: sideSlideOut 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes sideSlideOut {
  0% {
    opacity: 1;
    transform: translate(0) scale(1);
  }
  40% {
    transform: translate(20px, 0) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-300px, 0) scale(0);
    opacity: 0;
  }
}