*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'JetBrains Mono', monospace;
}

body{
  background:#020402;
  height:100vh;
  overflow:hidden;
  color:#00ff6a;
}

/* CENTER */
.wrapper{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:5;
}

/* LOGO */
.logo{
  font-size:clamp(6.5rem,16vw,13rem);
  letter-spacing:1rem;
  color:#00ff6a;
  text-shadow:
    0 0 18px rgba(0,255,106,0.9),
    0 0 60px rgba(0,255,106,0.6);
}

/* CONTACT */
.contact{
  margin-top:28px;
  font-size:1.15rem;
  color:#6bffb0;
  opacity:0.8;
}

/* BLINK */
.blink{
  animation:blink 3s infinite;
}
@keyframes blink{
  0%,100%{opacity:0.8;}
  50%{opacity:0.3;}
}

/* TV GLITCH LINE */
.glitch-line{
  position:fixed;
  left:0;
  width:100%;
  height:7px;
  background:rgba(0,255,106,0.9);
  mix-blend-mode:overlay;
  animation:glitchMove 3s linear infinite;
  pointer-events:none;
  z-index:4;
}
@keyframes glitchMove{
  from{top:-10%;}
  to{top:110%;}
}

/* SCANLINES */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.08) 3px
    );
  opacity:0.25;
  pointer-events:none;
  z-index:3;
}

/* LOGO DISTORT */
.glitch-active{
  animation:distort 0.12s linear infinite;
}
@keyframes distort{
  0%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  50%{transform:translateX(5px);}
  75%{transform:translateX(-3px);}
  100%{transform:translateX(0);}
}

/* CODE BLAST */
.code-blast{
  position:fixed;
  color:#00ff6a;
  font-size:1rem;
  text-shadow:0 0 10px rgba(0,255,106,0.9);
  pointer-events:none;
  z-index:2;
}

/* VHS OVERLAY */
.vhs{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
}
.vhs::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.06) 4px
    );
  opacity:0;
}
.vhs-active::before{
  opacity:0.3;
}
.vhs-active{
  animation:vhsShift 0.35s steps(2);
}
@keyframes vhsShift{
  0%{filter:none;transform:translateX(0);}
  20%{filter:blur(1px) saturate(130%);transform:translateX(-8px);}
  40%{filter:blur(0.5px) saturate(160%);transform:translateX(6px);}
  60%{filter:blur(1.2px) saturate(120%);transform:translateX(-4px);}
  100%{filter:none;transform:translateX(0);}
}
.vhs-active *{
  text-shadow:2px 0 red,-2px 0 cyan;
}