.tr-split .tr-w {
  display: inline-block;
  white-space: nowrap;
}
.tr-split .tr-ch {
  display: inline-block;
  will-change: opacity, filter, color;
}
.tr-split:not(.is-in) .tr-ch {
  opacity: 0;
}
.tr-split.is-in .tr-ch {
  animation: title-reveal-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 26ms);
}
.tr-split.is-in .tr-ch.is-out {
  animation: title-reveal-out 0.5s cubic-bezier(0.55, 0, 0.75, 0) both;
  animation-delay: calc(var(--i) * 26ms);
}

@keyframes title-reveal-in {
  0% {
    opacity: 0;
    filter: blur(8px);
    color: var(--c);
    transform: translateX(-2px);
  }
  35% {
    opacity: 1;
    filter: blur(0);
    color: var(--c);
    transform: none;
  }
}
@keyframes title-reveal-out {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
  35% {
    color: var(--c);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
    color: var(--c);
    transform: translateX(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-split .tr-ch,
  .tr-split:not(.is-in) .tr-ch {
    opacity: 1;
  }
  .tr-split.is-in .tr-ch {
    animation: none;
  }
}