@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;900&display=swap');

:root {
  --c1: #ff006e;
  --c2: #8338ec;
  --c3: #3a86ff;
  --bg: #0d0d0d;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Orbitron',sans-serif}

body,html{height:100%;background:var(--bg);color:#fff;overflow-x:hidden}

canvas#bg{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  z-index:-1;
}

/* Glitch title */
.glitch{
  font-size:clamp(3rem,8vw,8rem);
  font-weight:900;
  text-transform:uppercase;
  position:relative;
  letter-spacing:.05em;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:transparent;
  overflow:hidden;
}
.glitch::before{
  left:2px;text-shadow:-2px 0 var(--c1);
  animation:glitch-1 2.5s infinite linear alternate-reverse;
}
.glitch::after{
  left:-2px;text-shadow:-2px 0 var(--c2);
  animation:glitch-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-1{
  0%{clip-path:inset(10% 0 85% 0);}
  20%{clip-path:inset(50% 0 30% 0);}
  40%{clip-path:inset(20% 0 60% 0);}
  60%{clip-path:inset(90% 0 5% 0);}
  80%{clip-path:inset(30% 0 40% 0);}
  100%{clip-path:inset(100% 0 0 0);}
}
@keyframes glitch-2{
  0%{clip-path:inset(80% 0 5% 0);}
  20%{clip-path:inset(10% 0 85% 0);}
  40%{clip-path:inset(60% 0 30% 0);}
  60%{clip-path:inset(30% 0 40% 0);}
  80%{clip-path:inset(5% 0 90% 0);}
  100%{clip-path:inset(0 0 100% 0);}
}

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
  text-align:center;
  padding:2rem;
}

.tagline{
  margin:1rem 0 2rem;
  font-size:1.3rem;
  opacity:.8;
}

.countdown{
  display:flex;
  gap:2rem;
  margin:2rem 0;
  font-size:1.5rem;
}
.countdown div{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.countdown span{
  font-size:3rem;
  font-weight:900;
  color:var(--c3);
  text-shadow:0 0 10px var(--c3);
}
.countdown label{
  font-size:.9rem;
  opacity:.7;
}

.cta{
  margin-top:2rem;
  padding:1rem 3rem;
  background:linear-gradient(45deg,var(--c1),var(--c2));
  border:none;
  color:#fff;
  font-size:1.2rem;
  border-radius:50px;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
  box-shadow:0 0 20px var(--c1);
}
.cta:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 0 40px var(--c2);
}