/* https://codepen.io/AlainBarrios/pen/OEOKgm */
*, *::before, *::after {
  box-sizing: border-box;
}

.glitch {
  --glitch-title: "www.frostedbrains.com";
  --glitch-font-size: 40px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.glitch .glitch__item {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.glitch .glitch__item:nth-child(n+2) {
  opacity: 0;
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.glitch .glitch__item:nth-child(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-2;
}
.glitch .glitch__item:nth-child(2) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-3;
}
.glitch .glitch__item:nth-child(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-4;
}
.glitch .glitch__item:nth-child(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}
@keyframes glitch-anim-flash {
  0%, 5% {
    opacity: 0.2;
    transform: translate3d(var(--glitch-horizontal), var(--glitch-height), 0);
  }
  5.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
.glitch .glitch__title {
  font-size: var(--glitch-font-size);
  color: #111;
  position: relative;
  mix-blend-mode: overlay;
  filter: drop-shadow(0 0 3px #fff);
/*  text-transform: uppercase; */
}
.glitch .glitch__title:before, .glitch .glitch__title:after {
  content: var(--glitch-title);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.glitch .glitch__title:before {
  left: 2px;
  text-shadow: -1px 0 #00ffea;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 2s linear infinite alternate-reverse;
}
.glitch .glitch__title:after {
  left: -2px;
  text-shadow: -1px 0 #fe3a7f;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2s 1s linear infinite alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(101px, 9999px,  27px, 0); }
    5% { clip: rect(101px, 9999px,  21px, 0); }
   10% { clip: rect( 73px, 9999px, 139px, 0); }
   15% { clip: rect( 73px, 9999px,  25px, 0); }
   20% { clip: rect(154px, 9999px,  22px, 0); }
   25% { clip: rect(  4px, 9999px, 104px, 0); }
   30% { clip: rect( 64px, 9999px, 131px, 0); }
   35% { clip: rect( 15px, 9999px,  29px, 0); }
   40% { clip: rect( 52px, 9999px, 152px, 0); }
   45% { clip: rect(132px, 9999px,  56px, 0); }
   50% { clip: rect( 75px, 9999px,  34px, 0); }
   55% { clip: rect( 41px, 9999px, 137px, 0); }
   60% { clip: rect(126px, 9999px, 149px, 0); }
   65% { clip: rect( 47px, 9999px, 111px, 0); }
   70% { clip: rect( 47px, 9999px,  25px, 0); }
   75% { clip: rect( 83px, 9999px,  99px, 0); }
   80% { clip: rect(128px, 9999px, 126px, 0); }
   85% { clip: rect(150px, 9999px, 118px, 0); }
   90% { clip: rect(145px, 9999px,  29px, 0); }
   95% { clip: rect( 77px, 9999px, 104px, 0); }
  100% { clip: rect( 12px, 9999px,  91px, 0); }
}

@keyframes glitch-anim-2 {
   0% {
	opacity: 1;
	transform: translate3d(var(--gap-horizontal), 0, 0);
	clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
   2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
   4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
   6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
   8% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}
@keyframes glitch-anim-4 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}