.hero-glitch-letter {
  position: relative;
  display: inline-block;
}

.hero-glitch-original {
  transition: opacity 160ms ease;
}

.hero-glitch-letter.is-glitching > .hero-glitch-original {
  opacity: 0.16;
}

.hero-glitch-substitute,
.hero-glitch-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.hero-glitch-substitute {
  transition: opacity 150ms ease;
}

.hero-glitch-letter.is-glitching > .hero-glitch-substitute {
  opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
  .hero-glitch-original,
  .hero-glitch-substitute {
    transition: none;
  }
}