.splitting .char {
  animation: opacity 2s both, slide-in 5s cubic-bezier(0.5, 0, 0.5, 1);
  animation-delay: calc(60ms * var(--char-index));
}

.splitting[data-scroll=out] .char {
    opacity: .4;
    transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
}
.invisible {
transition: opacity 0.5s ease;
opacity: 0.0;
}

.visible {
transition: opacity 0.5s ease;
opacity: 1.0;
}
@keyframes opacity {
  from {
    opacity: 0;
  }
}
@keyframes slide-in {
  0% {
    transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
  }
  20%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}