/* Stile per le singole lettere */
.text-animation span {
  display: inline-block;
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
}

/* Animazione di apparizione */
.animate-in {
  animation: sideSlide 0.5s 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.2);
    color: #ffffff;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
    color: inherit; /* Mantiene il colore del testo bianco */
  }
}

/* Animazione di scomparsa */
.animate-out {
  animation: sideSlideOut 0.5s forwards;
}

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

/* Gli elementi rimangono sempre visibili, gestiamo solo l'opacità tramite le animazioni */