:root{
  --bg:#050506;
  --fg:#f4f4f6;
  --muted:#5f5f69;
  --line:rgba(255,255,255,.14);
  --accent:#5865f2;
  --cyan:#00f0ff;
  --magenta:#ff00c8;
  --display:"Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --ui:"Oswald", "Arial Narrow", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ui);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:clamp(1.25rem,4vw,3rem);
}

#particles{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
}

.grid{
  position:fixed; inset:-1px; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:160px 160px, 160px 160px, 32px 32px, 32px 32px;
  -webkit-mask-image:radial-gradient(115% 95% at 50% 48%, #000 10%, rgba(0,0,0,.45) 55%, transparent 88%);
  mask-image:radial-gradient(115% 95% at 50% 48%, #000 10%, rgba(0,0,0,.45) 55%, transparent 88%);
  animation:drift 45s linear infinite;
}

@keyframes drift{
  to{background-position:160px 160px, 160px 160px, 160px 160px, 160px 160px}
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%),
    radial-gradient(60% 40% at 50% 42%, rgba(88,101,242,.16), transparent 70%);
}

.scanlines{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.35;
  mix-blend-mode:overlay;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0 1px,
    transparent 1px 3px
  );
}

.sweep{
  position:fixed; left:0; right:0; height:22vh; z-index:4; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.045), transparent);
  animation:sweep 7s linear infinite;
}

@keyframes sweep{
  0%{transform:translateY(-30vh)}
  100%{transform:translateY(120vh)}
}

main{
  position:relative; z-index:5;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1rem,2.5vw,1.75rem);
  max-width:60rem;
}

.status{
  margin:0 0 -.4rem;
  display:flex; align-items:center; gap:.5rem;
  font-size:clamp(.68rem,1.7vw,.82rem);
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}

.caret{
  display:block;
  width:.42em; height:1em;
  margin-left:-.2em;
  background:var(--muted);
  animation:blink 1.05s steps(1) infinite;
}

@keyframes blink{50%{opacity:0}}

.glitch{
  position:relative;
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(6rem,30vw,22rem);
  line-height:.82;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 40px rgba(255,255,255,.18);
  animation:flicker 6s steps(1) infinite;
  user-select:none;
  pointer-events:none;
}

.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0; width:100%;
  mix-blend-mode:screen;
  pointer-events:none;
}

.glitch::before{
  color:var(--cyan);
  transform:translate(-3px,-1px);
  animation:clip-a 4s steps(2) infinite;
}

.glitch::after{
  color:var(--magenta);
  transform:translate(3px,1px);
  animation:clip-b 3.3s steps(2) infinite;
}

@keyframes clip-a{
  0%,72%,100%{clip-path:inset(100% 0 0 0)}
  74%{clip-path:inset(12% 0 74% 0)}
  77%{clip-path:inset(58% 0 28% 0)}
  80%{clip-path:inset(32% 0 51% 0)}
  83%{clip-path:inset(78% 0 8% 0)}
  86%{clip-path:inset(4% 0 88% 0)}
}

@keyframes clip-b{
  0%,64%,100%{clip-path:inset(100% 0 0 0)}
  66%{clip-path:inset(66% 0 20% 0)}
  69%{clip-path:inset(20% 0 66% 0)}
  72%{clip-path:inset(45% 0 40% 0)}
  75%{clip-path:inset(86% 0 4% 0)}
}

@keyframes flicker{
  0%,94%,100%{opacity:1}
  95%{opacity:.72}
  96%{opacity:1}
  97%{opacity:.85}
}

.glitch.is-glitching{animation:shake .18s steps(2) infinite}

.glitch.is-glitching::before{
  animation:none;
  clip-path:inset(24% 0 38% 0);
  transform:translate(-14px,2px) skewX(-8deg);
}

.glitch.is-glitching::after{
  animation:none;
  clip-path:inset(58% 0 12% 0);
  transform:translate(14px,-2px) skewX(8deg);
}

@keyframes shake{
  0%{transform:translate(0)}
  25%{transform:translate(-3px,1px)}
  50%{transform:translate(2px,-2px)}
  75%{transform:translate(-1px,2px)}
  100%{transform:translate(0)}
}

.actions{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem;
  margin-top:.5rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.5rem;
  border-radius:.6rem;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.btn svg{flex:none}

.btn-ghost{
  color:var(--fg);
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}

.btn-ghost:hover{
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.07);
  box-shadow:0 8px 30px rgba(255,255,255,.06);
}

.btn-ghost .arrow{transition:transform .18s ease}
.btn-ghost:hover .arrow{transform:translateX(4px)}

.btn-discord{
  color:#fff;
  background:var(--accent);
  box-shadow:0 8px 30px rgba(88,101,242,.35);
}

.btn-discord:hover{
  background:#4752c4;
  box-shadow:0 12px 38px rgba(88,101,242,.5);
}

footer{
  position:fixed;
  bottom:clamp(.9rem,3vw,1.6rem);
  left:0; right:0;
  z-index:5;
  text-align:center;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
  pointer-events:none;
}

.visits{
  position:fixed;
  top:clamp(.9rem,3vw,1.6rem);
  right:clamp(.9rem,3vw,1.6rem);
  z-index:5;
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .75rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  pointer-events:none;
  user-select:none;
}

.visits-dot{
  width:.36rem; height:.36rem;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.3; transform:scale(.75)}
}

.visits-count{
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}

@media (max-width:30rem){
  .actions{width:100%; flex-direction:column}
  .btn{justify-content:center; width:100%}
  .visits{padding:.35rem .55rem; gap:.4rem; font-size:.6rem; letter-spacing:.16em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .sweep{display:none}
}