.motion-word {
  display: inline-block;
  white-space: nowrap;
}

.motion-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.8em) rotateX(-72deg) scale(.94);
  transform-origin: 50% 100%;
  filter: blur(7px);
  animation: letter-reveal .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: var(--letter-delay);
  will-change: opacity, transform, filter;
}

@keyframes letter-reveal {
  55% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-char {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}