.hero h1.glitch.letter-glitch {
  font-family: 'IBM Plex Mono', 'DejaVu Sans Mono', monospace;
  font-size: clamp(3.1rem, 5.25vw, 4.95rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .94;
  text-transform: uppercase;
  animation: none !important;
}

.hero h1.glitch.letter-glitch::before,
.hero h1.glitch.letter-glitch::after {
  display: none;
}

.glitch-letters { display: inline; }
.glitch-word { display: inline-block; white-space: nowrap; }
.glitch-word + .glitch-word { margin-left: .2em; }
.glitch-word:first-child + .glitch-word { margin-left: 0; }

.glitch-char {
  position: relative;
  display: inline-block;
  color: inherit;
  font-style: normal;
  transform: translate3d(0, 0, 0);
  will-change: transform, color, text-shadow;
}

.glitch-char::before,
.glitch-char::after {
  content: attr(data-glitch-char);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.glitch-char.is-glitching {
  color: #39ff14;
  transform: translate3d(var(--glitch-x, 0), var(--glitch-y, 0), 0)
    skewX(var(--glitch-skew, 0deg));
  text-shadow: -2px 0 #020604, 2px 0 rgba(57, 255, 20, .5), 0 0 10px rgba(57, 255, 20, .72);
}

.glitch-char.is-glitching::before {
  color: #020604;
  opacity: .95;
  transform: translate3d(var(--glitch-black-x, -3px), 1px, 0);
  clip-path: inset(var(--glitch-slice-top, 12%) 0 var(--glitch-slice-bottom, 58%) 0);
}

.glitch-char.is-glitching::after {
  color: #71ff55;
  opacity: .88;
  transform: translate3d(var(--glitch-green-x, 3px), -1px, 0);
  clip-path: inset(var(--glitch-slice-bottom, 58%) 0 var(--glitch-slice-top, 12%) 0);
  text-shadow: 0 0 8px #39ff14;
}

.glitch-char.is-blackout {
  color: #020604;
  text-shadow: 1px 0 #39ff14;
}

@media (prefers-reduced-motion: reduce) {
  .glitch-char,
  .glitch-char::before,
  .glitch-char::after {
    transform: none !important;
    text-shadow: none !important;
  }
}

@media (max-width: 620px) {
  .hero h1.glitch.letter-glitch {
    font-size: clamp(2.35rem, 10.8vw, 3.35rem);
  }
}
