.intrail-animated-word {
  --intrail-word-duration: 800ms;
  --intrail-word-start-y: -18px;
  --intrail-word-start-scale-y: 0.55;
  --intrail-word-start-rotate-x: 90deg;
  display: flex;
  width: 100%;
}

.intrail-animated-word__text {
  color: rgba(245, 245, 245, 0.15);
  display: inline-flex;
  flex-wrap: wrap;
  font-family: Manrope, Arial, sans-serif;
  font-size: 220px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  pointer-events: none;
  text-transform: uppercase;
  user-select: none;
  white-space: normal;
}

.intrail-animated-word__letter {
  backface-visibility: hidden;
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--intrail-word-start-y)) scaleY(var(--intrail-word-start-scale-y)) rotateX(var(--intrail-word-start-rotate-x));
  transform-origin: center center;
  will-change: opacity, transform;
}

.intrail-animated-word__space {
  display: inline-block;
  width: 0.32em;
}

.intrail-animated-word.is-ready .intrail-animated-word__letter {
  animation: intrailAnimatedWordLetterIn var(--intrail-word-duration) cubic-bezier(0.22, 0.9, 0.25, 1) forwards;
}

@keyframes intrailAnimatedWordLetterIn {
  0% {
    opacity: 0;
    transform: translateY(var(--intrail-word-start-y)) scaleY(var(--intrail-word-start-scale-y)) rotateX(var(--intrail-word-start-rotate-x));
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1) rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intrail-animated-word__letter,
  .intrail-animated-word.is-ready .intrail-animated-word__letter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}