.ptr-inline {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
}

.ptr-slot {
  position: relative;
  display: inline-block;
  min-width: 1ch;
  white-space: nowrap;
  contain: layout style;
  perspective: 900px;
  transform-style: preserve-3d;
}

.ptr-word {
  display: inline-block;
  transition:
    opacity var(--ptr-fade, 650ms) cubic-bezier(0.2, 0.9, 0.25, 1),
    transform var(--ptr-fade, 650ms) cubic-bezier(0.2, 0.9, 0.25, 1),
    filter var(--ptr-fade, 650ms) cubic-bezier(0.2, 0.9, 0.25, 1);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  transform-origin: 50% 55%;
}

.ptr-word-next {
  position: absolute;
  left: 0;
  top: 0;
}

.ptr-word.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  filter: blur(0);
}

.ptr-word.is-hidden {
  opacity: 0;
  transform: translateY(0.45em) rotateX(-20deg);
  filter: blur(5px);
}

.ptr-word.is-hidden.is-outgoing {
  transform: translateY(-0.45em) rotateX(20deg);
}

@media (prefers-reduced-motion: reduce) {
  .ptr-word {
    transition: none;
    transform: none !important;
    filter: none !important;
  }
}