@font-face{
  font-family:"Turret Road";
  src:url("fonts/TurretRoad-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:dark;
  --bg:#050505;
  --neon:#00f0ff;
  --cyan:#00f0ff;
  --magenta:#ff2a6d;
  --red:#ff003c;
  --muted:#6a6a6a;
  --text:#e8e8e8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 42%, #001820 0%, transparent 62%),
    radial-gradient(ellipse 35% 28% at 72% 68%, #1a001055 0%, transparent 50%);
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--neon)}
a:focus-visible{outline:1px solid var(--cyan);outline-offset:4px}

main{
  position:relative;
  z-index:1;
  text-align:center;
  padding:24px;
  max-width:100%;
}

.prompt{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.12em;
  margin:0 0 28px;
}
.prompt .p{color:var(--neon);margin-right:6px}
.cursor{color:var(--neon);animation:blink 1.05s steps(1) infinite}

.logo{
  position:relative;
  margin:0;
  font-family:"Turret Road",Impact,sans-serif;
  font-weight:800;
  font-size:clamp(48px,16vw,148px);
  letter-spacing:-.02em;
  line-height:0.9;
  color:var(--neon);
  text-transform:uppercase;
  transform:skewX(-8deg);
  text-shadow:
    0 0 10px #00f0ff88,
    0 0 32px #00f0ff44,
    0 0 70px #00f0ff22;
  user-select:none;
  isolation:isolate;
}

.logo::before,
.logo::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.logo::before{
  color:var(--cyan);
  z-index:-1;
  mix-blend-mode:screen;
}
.logo::after{
  color:var(--magenta);
  z-index:-2;
  mix-blend-mode:screen;
}

.logo.is-glitching{
  animation:logo-flicker .18s steps(2) 2;
}
.logo.is-glitching::before{
  opacity:.9;
  transform:translate(4px,-2px);
  clip-path:inset(12% 0 48% 0);
  animation:slice-a .18s steps(2) 2;
}
.logo.is-glitching::after{
  opacity:.8;
  transform:translate(-5px,3px);
  clip-path:inset(52% 0 8% 0);
  animation:slice-b .18s steps(2) 2;
}

.tagline{
  margin:32px 0 0;
  font-size:clamp(11px,2vw,14px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.soon{
  margin:40px 0 0;
  font-family:"Turret Road",Impact,sans-serif;
  font-weight:800;
  font-size:clamp(12px,2.2vw,15px);
  letter-spacing:.4em;
  color:var(--neon);
  opacity:.8;
  transform:skewX(-6deg);
}

.scanlines{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    #00000018 2px,
    #00000018 3px
  );
  opacity:.55;
}
.noise{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}

@keyframes blink{50%{opacity:0}}
@keyframes logo-flicker{
  0%{opacity:1;filter:brightness(1)}
  20%{opacity:.3;filter:brightness(2.4)}
  40%{opacity:1;filter:brightness(.65) hue-rotate(20deg)}
  60%{opacity:.5;filter:brightness(1.8)}
  80%{opacity:1;filter:brightness(1.15)}
  100%{opacity:1;filter:brightness(1)}
}
@keyframes slice-a{
  0%{transform:translate(4px,-2px)}
  50%{transform:translate(-8px,3px)}
  100%{transform:translate(5px,-3px)}
}
@keyframes slice-b{
  0%{transform:translate(-5px,3px)}
  50%{transform:translate(9px,-4px)}
  100%{transform:translate(-4px,2px)}
}

@media (max-width:520px){
  .tagline{letter-spacing:.12em}
  .soon{letter-spacing:.28em}
}

@media (prefers-reduced-motion:reduce){
  .cursor,.logo,.logo::before,.logo::after{animation:none!important}
  .logo.is-glitching,.logo.is-glitching::before,.logo.is-glitching::after{
    animation:none!important;
    opacity:1;
    transform:none;
    clip-path:none;
  }
  .logo::before,.logo::after{display:none}
  .scanlines,.noise{opacity:.2}
}