.glitch
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT
  .line GLITCH EFFECT

body {
  background: repeating-linear-gradient(
      0deg,
      #0E0D0E 25%,
      #0E0D0E 50%,
      #171819 50%,
      #171819 75%
    );
  background-size: 10px 10px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Barlow', sans-serif;
  justify-content: center;
  align-items: center;
}

.glitch {
  position: relative;
  color: #fff;
  font-size: 80px;
}

.line {
  &:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation:
        clip 3000ms $i * -300ms linear infinite,
        glitch#{$i} 500ms random(1000) * -1ms linear infinite;

      @keyframes glitch#{$i} {
        0% {
          transform: translateX(0);
        }
        80% {
          transform: translateX(0);
          color: #fff;
        }
        85% {
          transform: translateX(random(10) - 5px);
          color: #4E9A26;
        }
        90% {
          transform: translateX(random(10) - 5px);
          color: #AC1212;
        }
        95% {
          transform: translateX(random(10) - 5px);
          color: #fff;
        }
        100% {
          transform: translateX(0);
        }
      }
    }
  }
}

@keyframes clip {
  0% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 120%,
      0 120%
    );
  }
  
  100% {
    clip-path: polygon(
      0 -20%,
      100% -20%,
      100% 0%,
      0 0
    );
  }
}