body{
  background: #111;
  color: #fff;
  position: relative;
}
body::before {
  content: "WILTO";
  color: #00cc00;
  font-family: VHS;
  text-transform: uppercase;
  position: absolute;
  right: 4rem;
  top: 0rem;
  font-size: clamp( 8rem, 20vw, 12rem );
  visibility: hidden;
  transform: scale(1);
  pointer-events: none;
  text-shadow: -3px -3px 0  #000, -3px 2px 0  #000, -2px -2px 0  #000, -1px -1px 0  #000, 1px 1px 0  #000, 2px 2px 0  #000, 3px 3px 0  #000;
  animation: hideo 7s linear;
  animation-fill-mode: forwards;
  z-index: 2;
}
.container {
  background: #000;
  position: relative;
  overflow: hidden;
}
.container::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background:  rgba(0,0,0,.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.container::before {
  background: -webkit-repeating-linear-gradient(top, transparent 1px, rgba(255,0,0,.125) 1px,rgba(0,255,0,.125) 1px, rgba(0,0,255,.125) 1px, rgba(0, 0, 0, .5) 3px);
  background: -moz-repeating-linear-gradient(top, transparent 1px, rgba(255,0,0,.125) 1px,rgba(0,255,0,.125) 1px, rgba(0,0,255,.125) 1px, rgba(0, 0, 0, .5) 3px);
  background: repeating-linear-gradient(top, transparent 1px, rgba(255,0,0,.125) 1px,rgba(0,255,0,.125) 1px, rgba(0,0,255,.125) 1px, rgba(0, 0, 0, .5) 3px);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

.container::after {
  animation: flicker 0.125s infinite;
}

.screen {
  animation: turn-on 4s ease-in-out;
  animation-fill-mode: forwards;
  width:100%;
  height:100%;
  border:none;
}

@keyframes flicker{
  0%   { opacity: .2; }
  10%  { opacity: .1; }
  20%  { opacity: 0; }
  30%  { opacity: .2; }
  40%  { opacity: .1; }
  50%  { opacity: .3; }
  60%  { opacity: .2; }
  70%  { opacity: .1; }
  80%  { opacity: 0; }
  90%  { opacity: .1; }
  100% { opacity: .2; }
}

@keyframes hideo {
  0% {
    visibility:hidden;
    transform: scale(1);
  }
  10% {
    visibility:hidden;
    transform: scale(1);
  }
  11% {
    visibility:visible;
    transform: scale(1);
  }
  60% {
    transform: scale(1);
  }
  60.1% {
    transform: scale( .5);
  }
  100% {
    visibility:hidden;
    transform: scale( .5);
  }
}

@keyframes turn-on {
  0% {
    transform: scale(1,0.8) translate3d(0,0,0);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1,0.8) translate3d(0,100%,0);
  }
  3.6% {
    transform: scale(1,0.8) translate3d(0,-100%,0);
    opacity: 1;
  } 
  9% {
    transform: scale(1.3,0.6) translate3d(0,100%,0);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    transform: scale(1,1) translate3d(0,0,0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1,1) translate3d(0,0,0);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@media( prefers-reduced-motion: reduce ) {
  .container::after,
  .screen {
    animation: none;
  }
}