/* USING THIS STYLE, THANKS! (https://codepen.io/pbitos/pen/zypwVr) */

.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 30vw;
  height: 30vh;
  overflow: hidden;
  z-index: 450;
  opacity: 1;
  pointer-events: none;
}

.noise:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  will-change: background-position;
  animation: noise 1s infinite alternate;
}

.lines {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 300;
  opacity: 0.6;
  will-change: opacity;
  animation: opacity 3s linear infinite;
}

.lines:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    var(--vhs-noise-color) 51%
  );
  background-size: 100% 4px;
  will-change: background, background-size;
  animation: scanlines 0.2s linear infinite;
}

.main .noise:before {
  background-size: 150%;
}

.main .vhs {
  position: relative;
  left: 0.5rem;
  top: 0.5rem;
  will-change: text-shadow;
  animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
  will-change: opacity;
  animation: type 1.2s infinite alternate;
  animation-delay: calc(60ms * var(--char-index));
}

.main .time {
  position: relative;
  right: 2rem;
  top: 2rem;
  will-change: text-shadow;
  animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .counter {
  position: relative;
  left: 2rem;
  bottom: 2rem;
  will-change: text-shadow;
  animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
	0%,
	100% {
		background-position: 0 0;
	}
	10% {
		background-position: -5% -10%;
	}
	20% {
		background-position: -15% 5%;
	}
	30% {
		background-position: 7% -25%;
	}
	40% {
		background-position: 20% 25%;
	}
	50% {
		background-position: -25% 10%;
	}
	60% {
		background-position: 15% 5%;
	}
	70% {
		background-position: 0 15%;
	}
	80% {
		background-position: 25% 35%;
	}
	90% {
		background-position: -10% 10%;
	}
}

@keyframes opacity {
  0% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.15;
  }
  35% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes scanlines {
  from {
    background: linear-gradient(
      to bottom,
      transparent 50%,
      var(--vhs-scanline-color) 51%
    );
    background-size: 100% 4px;
  }
  to {
    background: linear-gradient(
      to bottom,
      var(--vhs-scanline-color) 50%,
      transparent 51%
    );
    background-size: 100% 4px;
  }
}

@keyframes rgbText {
  0% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), 0px 0 0.4px rgba(251, 0, 231, 0.8),
      0 0px 0.7px rgba(0, 233, 235, 0.8), 0px 0 0.7px rgba(0, 242, 14, 0.8),
      0 0px 0.7px rgba(244, 45, 0, 0.8), 0px 0 0.7px rgba(59, 0, 226, 0.8);
  }
  25% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), 0px 0 0.4px rgba(251, 0, 231, 0.8),
      0 0px 0.7px rgba(0, 233, 235, 0.8), 0px 0 0.7px rgba(0, 242, 14, 0.8),
      0 0px 0.7px rgba(244, 45, 0, 0.8), 0px 0 0.7px rgba(59, 0, 226, 0.8);
  }
  45% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), 0.9px 0 0.4px rgba(251, 0, 231, 0.8),
      0 0.9px 0.4px rgba(0, 233, 235, 0.8), -0.9px 0 0.4px rgba(0, 242, 14, 0.8),
      0 -0.9px 0.4px rgba(244, 45, 0, 0.8), 0.9px 0 0.4px rgba(59, 0, 226, 0.8);
  }
  50% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), -0.9px 0 0.4px rgba(251, 0, 231, 0.8),
      0 -0.9px 0.4px rgba(0, 233, 235, 0.8), 0.9px 0 0.4px rgba(0, 242, 14, 0.8),
      0 0.9px 0.4px rgba(244, 45, 0, 0.8), -0.9px 0 0.4px rgba(59, 0, 226, 0.8);
  }
  55% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), 0px 0 0.7px rgba(251, 0, 231, 0.8),
      0 0px 0.7px rgba(0, 233, 235, 0.8), 0px 0 0.7px rgba(0, 242, 14, 0.8),
      0 0px 0.7px rgba(244, 45, 0, 0.8), 0px 0 0.7px rgba(59, 0, 226, 0.8);
  }
  90% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), -0.9px 0 0.4px rgba(251, 0, 231, 0.8),
      0 0.9px 0.4px rgba(0, 233, 235, 0.8), 0.9px 0 0.4px rgba(0, 242, 14, 0.8),
      0 -0.9px 0.4px rgba(244, 45, 0, 0.8), 0.9px 0 0.4px rgba(59, 0, 226, 0.8);
  }
  100% {
    text-shadow: -0.4px 0.4px 0.7px rgba(255, 255, 255, 0.6),
      0.4px -0.4px 0.7px rgba(255, 255, 235, 0.7), 0.9px 0 0.4px rgba(251, 0, 231, 0.8),
      0 -0.9px 0.4px rgba(0, 233, 235, 0.8), -0.9px 0 0.4px rgba(0, 242, 14, 0.8),
      0 0.9px 0.4px rgba(244, 45, 0, 0.8), -0.9px 0 0.4px rgba(59, 0, 226, 0.8);
  }
}

@keyframes type {
  0%,
  19% {
    opacity: 0;
  }
  20%,
  100% {
    opacity: 1;
  }
}