.dycode_glitch_text_container {
  max-width: 100%;
}

.dycode_glitch_text_el {
  display: inline-block;
  font-size: clamp(2rem, 7vw, 5rem);
  line-height: 1.15;
  font-weight: 900;
  position: relative;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  user-select: none;
}

.dycode_glitch_text_el--hover {
  cursor: pointer;
}

.dycode_glitch_text_el::after,
.dycode_glitch_text_el::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: inherit;
  text-align: inherit;
  background-color: inherit;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  white-space: inherit;
}

.dycode_glitch_text_el:not(.dycode_glitch_text_el--hover)::after {
  transform: translateX(10px);
  text-shadow: var(--dgt-after-shadow, -5px 0 red);
  animation: dycode-glitch var(--dgt-after-duration, 3s) infinite linear alternate-reverse;
}

.dycode_glitch_text_el:not(.dycode_glitch_text_el--hover)::before {
  transform: translateX(-10px);
  text-shadow: var(--dgt-before-shadow, 5px 0 cyan);
  animation: dycode-glitch var(--dgt-before-duration, 2s) infinite linear alternate-reverse;
}

.dycode_glitch_text_el--hover::after,
.dycode_glitch_text_el--hover::before {
  content: '';
  opacity: 0;
  animation: none;
}

.dycode_glitch_text_el--hover:hover::after {
  content: attr(data-text);
  opacity: 1;
  transform: translateX(10px);
  text-shadow: var(--dgt-after-shadow, -5px 0 red);
  animation: dycode-glitch var(--dgt-after-duration, 3s) infinite linear alternate-reverse;
}

.dycode_glitch_text_el--hover:hover::before {
  content: attr(data-text);
  opacity: 1;
  transform: translateX(-10px);
  text-shadow: var(--dgt-before-shadow, 5px 0 cyan);
  animation: dycode-glitch var(--dgt-before-duration, 2s) infinite linear alternate-reverse;
}

@keyframes dycode-glitch {
  0%   { clip-path: inset(20% 0 50% 0); }
  5%   { clip-path: inset(10% 0 60% 0); }
  10%  { clip-path: inset(15% 0 55% 0); }
  15%  { clip-path: inset(25% 0 35% 0); }
  20%  { clip-path: inset(30% 0 40% 0); }
  25%  { clip-path: inset(40% 0 20% 0); }
  30%  { clip-path: inset(10% 0 60% 0); }
  35%  { clip-path: inset(15% 0 55% 0); }
  40%  { clip-path: inset(25% 0 35% 0); }
  45%  { clip-path: inset(30% 0 40% 0); }
  50%  { clip-path: inset(20% 0 50% 0); }
  55%  { clip-path: inset(10% 0 60% 0); }
  60%  { clip-path: inset(15% 0 55% 0); }
  65%  { clip-path: inset(25% 0 35% 0); }
  70%  { clip-path: inset(30% 0 40% 0); }
  75%  { clip-path: inset(40% 0 20% 0); }
  80%  { clip-path: inset(20% 0 50% 0); }
  85%  { clip-path: inset(10% 0 60% 0); }
  90%  { clip-path: inset(15% 0 55% 0); }
  95%  { clip-path: inset(25% 0 35% 0); }
  100% { clip-path: inset(30% 0 40% 0); }
}