content section h1.animated-title span,
content section h2.animated-title span {
  font-family: var(--display-font);
  opacity: 0;
  line-height: 0.85;
	padding-bottom: 10px;
  white-space: nowrap;
}

content section h1.animated-title.active span.animate-left,
content section h2.animated-title span.animate-left {
  display: block;
  animation-name: slideFromLeft;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

content section h1.animated-title.active span.animate-right,
content section h2.animated-title span.animate-right {
  display: block;
  animation-name: slideFromRight;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Delay per rendere l'ingresso sequenziale */
.delay-1 {
	animation-delay: 0.5s;
}
.delay-2 {
	animation-delay: 1s;
}
.delay-3 {
	animation-delay: 1.5s;
}
