.glitch-image:hover, .glitch:hover, a:hover {
  animation-iteration-count: infinite;
}

.glitch-image {
  animation: shift 3s ease-in-out .2s alternate 5;
}

.glitch, a:hover {
  position: relative;
  text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary), 0.025em 0.04em 0 var(--primary-inverse);
  animation: glitch 2s ease alternate 5, shift 2s ease alternate 5;

  &::before, &::after {
    position: absolute;
    top: 0;
    left: 0;
  }

  &::before {
    animation: glitch 1s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    transform: translate(-0.04em, -0.03em);
    opacity: 0.75;
  }

  &::after {
    animation: glitch .5s infinite;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    transform: translate(0.04em, 0.03em);
    opacity: 0.75;
  }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
      0.025em 0.04em 0 var(--primary-inverse);
  }
  15% {
    text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
      0.025em 0.04em 0 var(--primary-inverse);
  }
  16% {
    text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
      -0.05em -0.05em 0 var(--primary-inverse);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
      -0.05em -0.05em 0 var(--primary-inverse);
  }
  50% {
    text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
      0 -0.04em 0 var(--primary-inverse);
  }
  99% {
    text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
      0 -0.04em 0 var(--primary-inverse);
  }
  100% {
    text-shadow: -0.05em 0 0 var(--primary-hover), -0.025em -0.04em 0 var(--primary),
      -0.04em -0.025em 0 var(--primary-inverse);
  }
}

@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    transform: skewX(0deg);
    filter: invert(0%);
    fill: var(--text-color);
  }
  41% {
    transform: skewX(50deg);
    fill: var(--primary);
  }
  42% {
    transform: skewX(-20deg);
    filter: invert(40%);
  }
  59% {
    transform: skewX(50deg);
    fill: var(--primary-hover);
  }
  60% {
    transform: skewX(-40deg);
    filter: invert(10%);
  }
  63% {
    transform: skewX(10deg);
    filter: invert(30%);
    fill: var(--primary-hover);
  }
  70% {
    transform: skewX(-30deg);
    fill: var(--primary);
  }
  71% {
    transform: skewX(15deg);
    filter: invert(100%);
  }
}