/* 
    GLITCH
*/
.glitch {
  position: relative;
  color: white;
  color: inherit;
}

.glitch::before, .glitch::after {
  color: inherit;
  content: attr(data-content);
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  overflow: hidden;
  top: 0;
}

.glitch::before {
  left: 3px;
  text-shadow: -2px 0 red;
  animation-name: glitch-animation-1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: reverse-alternate;
}
.glitch.glitch--lent::before {
  animation-duration: 8s;
}

.glitch::after {
  left: -3px;
  text-shadow: -2px 0 blue;
  animation-name: glitch-animation-2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: reverse-alternate;
}
.glitch.glitch--lent::after {
  animation-duration: 8s;
}

@keyframes glitch-animation-1 {
  0%   { clip-path: inset(87px 0 calc(100% - 87px) 0); }
  5%   { clip-path: inset(64px 0 calc(100% - 100px) 0); }
  10%  { clip-path: inset(123px 0 calc(100% - 7px) 0); }
  15%  { clip-path: inset(129px 0 calc(100% - 16px) 0); }
  20%  { clip-path: inset(122px 0 calc(100% - 93px) 0); }
  25%  { clip-path: inset(105px 0 calc(100% - 147px) 0); }
  30%  { clip-path: inset(8px 0 calc(100% - 4px) 0); }
  35%  { clip-path: inset(19px 0 calc(100% - 12px) 0); }
  40%  { clip-path: inset(72px 0 calc(100% - 82px) 0); }
  45%  { clip-path: inset(40px 0 calc(100% - 1px) 0); }
  50%  { clip-path: inset(48px 0 calc(100% - 86px) 0); }
  55%  { clip-path: inset(150px 0 calc(100% - 63px) 0); }
  60%  { clip-path: inset(78px 0 calc(100% - 38px) 0); }
  65%  { clip-path: inset(49px 0 calc(100% - 124px) 0); }
  70%  { clip-path: inset(64px 0 calc(100% - 11px) 0); }
  75%  { clip-path: inset(118px 0 calc(100% - 129px) 0); }
  80%  { clip-path: inset(147px 0 calc(100% - 16px) 0); }
  85%  { clip-path: inset(13px 0 calc(100% - 16px) 0); }
  90%  { clip-path: inset(106px 0 calc(100% - 30px) 0); }
  95%  { clip-path: inset(28px 0 calc(100% - 10px) 0); }
  100% { clip-path: inset(133px 0 calc(100% - 41px) 0); }
}
@keyframes glitch-animation-2 {
  0%   { clip-path: inset(133px 0 calc(100% - 70px) 0); }
  5%   { clip-path: inset(146px 0 calc(100% - 51px) 0); }
  10%  { clip-path: inset(59px 0 calc(100% - 56px) 0); }
  15%  { clip-path: inset(48px 0 calc(100% - 80px) 0); }
  20%  { clip-path: inset(112px 0 calc(100% - 12px) 0); }
  25%  { clip-path: inset(29px 0 calc(100% - 40px) 0); }
  30%  { clip-path: inset(108px 0 calc(100% - 141px) 0); }
  35%  { clip-path: inset(73px 0 calc(100% - 21px) 0); }
  40%  { clip-path: inset(114px 0 calc(100% - 3px) 0); }
  45%  { clip-path: inset(51px 0 calc(100% - 40px) 0); }
  50%  { clip-path: inset(75px 0 calc(100% - 127px) 0); }
  55%  { clip-path: inset(48px 0 calc(100% - 150px) 0); }
  60%  { clip-path: inset(105px 0 calc(100% - 122px) 0); }
  65%  { clip-path: inset(25px 0 calc(100% - 128px) 0); }
  70%  { clip-path: inset(74px 0 calc(100% - 100px) 0); }
  75%  { clip-path: inset(16px 0 calc(100% - 23px) 0); }
  80%  { clip-path: inset(45px 0 calc(100% - 98px) 0); }
  85%  { clip-path: inset(98px 0 calc(100% - 111px) 0); }
  90%  { clip-path: inset(12px 0 calc(100% - 25px) 0); }
  95%  { clip-path: inset(5px 0 calc(100% - 48px) 0); }
  100% { clip-path: inset(72px 0 calc(100% - 77px) 0); }
}
.glitch2, .glow {
  color: inherit;
  position: relative;
  animation: glitch2 5s 5s infinite;
}

.glitch2::before, .glow::before {
  content: attr(data-content);
  position: absolute;
  left: -2px;
  text-shadow: -5px 0 magenta;
  background: white;
  overflow: hidden;
  top: 0;
  animation: noise-1 3s linear infinite alternate-reverse, glitch2 5s 5.05s infinite;
}

.glitch2::after, .glow::after {
  content: attr(data-content);
  position: absolute;
  left: 2px;
  text-shadow: -5px 0 lightgreen;
  background: white;
  overflow: hidden;
  top: 0;
  animation: noise-2 3s linear infinite alternate-reverse, glitch2 5s 5s infinite;
}
.glitch2.glitch2--lent, .glow {
  animation: glitch2 15s 15s infinite;
}

.glitch2.glitch2--lent::before, .glow::before {
  animation: noise-1 9s linear infinite alternate-reverse, glitch2 15s 15.15s infinite;
}

.glitch2.glitch2--lent::after, .glow::after {
  animation: noise-2 9s linear infinite alternate-reverse, glitch2 15s 15s infinite;
}

@keyframes glitch2 {
  1% { transform: rotateX(10deg) skewX(90deg); }
  2% { transform: rotateX(0deg) skewX(0deg); }
}
@keyframes noise-1 {
  3.3333333333% { clip-path: inset(77px 0 11px 0); }
  6.6666666667% { clip-path: inset(7px 0 4px 0); }
  10% { clip-path: inset(46px 0 46px 0); }
  13.3333333333% { clip-path: inset(49px 0 16px 0); }
  16.6666666667% { clip-path: inset(28px 0 45px 0); }
  20% { clip-path: inset(63px 0 12px 0); }
  23.3333333333% { clip-path: inset(10px 0 75px 0); }
  26.6666666667% { clip-path: inset(85px 0 12px 0); }
  30% { clip-path: inset(57px 0 28px 0); }
  33.3333333333% { clip-path: inset(48px 0 20px 0); }
  36.6666666667% { clip-path: inset(67px 0 21px 0); }
  40% { clip-path: inset(25px 0 20px 0); }
  43.3333333333% { clip-path: inset(81px 0 13px 0); }
  46.6666666667% { clip-path: inset(4px 0 1px 0); }
  50% { clip-path: inset(82px 0 15px 0); }
  53.3333333333% { clip-path: inset(55px 0 4px 0); }
  56.6666666667% { clip-path: inset(26px 0 30px 0); }
  60% { clip-path: inset(49px 0 12px 0); }
  63.3333333333% { clip-path: inset(69px 0 15px 0); }
  66.6666666667% { clip-path: inset(100px 0 1px 0); }
  70% { clip-path: inset(33px 0 47px 0); }
  73.3333333333% { clip-path: inset(73px 0 1px 0); }
  76.6666666667% { clip-path: inset(18px 0 3px 0); }
  80% { clip-path: inset(32px 0 20px 0); }
  83.3333333333% { clip-path: inset(43px 0 27px 0); }
  86.6666666667% { clip-path: inset(32px 0 54px 0); }
  90% { clip-path: inset(43px 0 40px 0); }
  93.3333333333% { clip-path: inset(35px 0 21px 0); }
  96.6666666667% { clip-path: inset(42px 0 44px 0); }
  100% { clip-path: inset(46px 0 50px 0); }
}
@keyframes noise-2 {
  0% { clip-path: inset(34px 0 30px 0); }
  3.3333333333% { clip-path: inset(35px 0 66px 0); }
  6.6666666667% { clip-path: inset(20px 0 80px 0); }
  10% { clip-path: inset(59px 0 9px 0); }
  13.3333333333% { clip-path: inset(85px 0 14px 0); }
  16.6666666667% { clip-path: inset(25px 0 48px 0); }
  20% { clip-path: inset(71px 0 8px 0); }
  23.3333333333% { clip-path: inset(93px 0 7px 0); }
  26.6666666667% { clip-path: inset(75px 0 13px 0); }
  30% { clip-path: inset(7px 0 50px 0); }
  33.3333333333% { clip-path: inset(100px 0 1px 0); }
  36.6666666667% { clip-path: inset(97px 0 1px 0); }
  40% { clip-path: inset(7px 0 90px 0); }
  43.3333333333% { clip-path: inset(98px 0 2px 0); }
  46.6666666667% { clip-path: inset(82px 0 6px 0); }
  50% { clip-path: inset(3px 0 53px 0); }
  53.3333333333% { clip-path: inset(49px 0 12px 0); }
  56.6666666667% { clip-path: inset(33px 0 51px 0); }
  60% { clip-path: inset(67px 0 18px 0); }
  63.3333333333% { clip-path: inset(2px 0 79px 0); }
  66.6666666667% { clip-path: inset(71px 0 28px 0); }
  70% { clip-path: inset(44px 0 6px 0); }
  73.3333333333% { clip-path: inset(53px 0 24px 0); }
  76.6666666667% { clip-path: inset(17px 0 48px 0); }
  80% { clip-path: inset(93px 0 5px 0); }
  83.3333333333% { clip-path: inset(6px 0 16px 0); }
  86.6666666667% { clip-path: inset(94px 0 3px 0); }
  90% { clip-path: inset(4px 0 80px 0); }
  93.3333333333% { clip-path: inset(39px 0 51px 0); }
  96.6666666667% { clip-path: inset(64px 0 10px 0); }
  100% { clip-path: inset(67px 0 3px 0); }
}
.scanlines {
  overflow: hidden;
  mix-blend-mode: difference;
}

.scanlines::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
  animation: fudge 7s ease-in-out alternate infinite;
}

@keyframes fudge {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 2%);
  }
}
.glow {
  text-shadow: 0 0 1000px rgb(223, 191, 191);
  color: transparent;
  position: absolute;
  top: 0;
}

.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 0.8vw;
  color: rgba(165, 141, 141, 0.4);
  text-transform: uppercase;
  letter-spacing: 1em;
  text-align: center;
  position: absolute;
  left: 17%;
  animation: glitch2-2 5s 5.02s infinite;
}

@keyframes glitch2-2 {
  1% { transform: rotateX(10deg) skewX(70deg); }
  2% { transform: rotateX(0deg) skewX(0deg); }
}

/*
    JS
*/
.input-focus-anim-label {
  position: absolute;
  bottom: 100%;
  left: 22px;
  font-size: 12px;
  font-weight: 200;
  text-align: right;
  margin-bottom: -6px;
  transform: translateX(10px);
  white-space: nowrap;
  pointer-events: all;
  transition: 0.5s;
  color: #fff;
  opacity: 0;
  z-index: 10;
}
.input-focus-anim-label span {
  background-color: var(--bg-color, #fff);
  color: var(--font-color, #000);
  font-weight: 200;
  opacity: 0.7;
}

input:focus ~ .input-focus-anim-label span,
textarea:focus ~ .input-focus-anim-label span {
  background-color: var(--font-color, #000);
  color: var(--bg-color, #fff);
  font-weight: bold;
  opacity: 1;
}