<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>glitch.fm</title>
<style>
:root {
  --bg:     #080810;
  --cyan:   #00e5ff;
  --pink:   #ff2d9b;
  --purple: #b06dff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Courier New', Courier, monospace;
  color: var(--cyan);
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none; z-index: 0;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.09) 2px, rgba(0,0,0,.09) 4px
  );
  pointer-events: none; z-index: 200;
}

.stage {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.ascii {
  font-size: clamp(6px, 1.1vw, 13px);
  line-height: 1.2;
  white-space: pre;
  color: var(--cyan);
  text-shadow:
    0 0 6px  rgba(0,229,255,.95),
    0 0 18px rgba(0,229,255,.5),
    0 0 40px rgba(0,229,255,.18);
  animation: glitch 9s infinite;
}

@keyframes glitch {
  0%,90%,100% {
    text-shadow: 0 0 6px rgba(0,229,255,.95), 0 0 18px rgba(0,229,255,.5), 0 0 40px rgba(0,229,255,.18);
    transform: none;
  }
  91% { transform: translate(-2px,0); text-shadow: 2px 0 var(--pink), -1px 0 var(--cyan); }
  92% { transform: translate(2px,0);  clip-path: inset(20% 0 50% 0); }
  93% { transform: translate(-1px,0); clip-path: inset(50% 0 20% 0); text-shadow: -2px 0 var(--purple), 2px 0 var(--pink); }
  94% { transform: translate(1px,0) skewX(-1deg); clip-path: none; }
  95% { transform: none; text-shadow: 0 0 6px rgba(0,229,255,.95), 0 0 18px rgba(0,229,255,.5); }
}

.sub {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .6em;
  color: rgba(0,229,255,.28);
}

.cursor {
  display: inline-block;
  width: 7px; height: 11px;
  background: rgba(0,229,255,.45);
  vertical-align: middle;
  margin-left: 4px;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.g {
  position: fixed;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cyan);
  opacity: .042;
  transition: opacity .4s, color .4s;
  user-select: none;
  z-index: 5;
}
.g:hover     { opacity: .32; }
.g.nav:hover { opacity: .65; color: var(--pink); cursor: pointer; }
</style>
</head>
<body>

<a class="g nav" href="/drinks"  style="top:17%;left:6%">DRINKS</a>
<a class="g nav" href="/games"   style="top:70%;right:7%">GAMES</a>
<a class="g nav" href="/movies"  style="bottom:12%;left:11%">MOVIES</a>
<a class="g nav" href="/links"   style="top:23%;right:8%">LINKS</a>
<a class="g nav" href="/backlog" style="bottom:8%;left:47%">BACKLOG</a>

<span class="g" style="top:8%;left:54%">STATIC</span>
<span class="g" style="top:44%;left:2%">SIGNAL</span>
<span class="g" style="top:58%;right:3%">NOISE</span>
<span class="g" style="bottom:18%;right:18%">DECAY</span>
<span class="g" style="top:33%;left:78%">VOID</span>
<span class="g" style="top:80%;left:40%">ECHO</span>
<span class="g" style="bottom:28%;left:24%">BROADCAST</span>
<span class="g" style="top:52%;right:38%">DRIFT</span>
<span class="g" style="top:6%;left:18%">FREQUENCY</span>
<span class="g" style="bottom:22%;right:44%">TRANSMISSION</span>
<span class="g" style="top:88%;left:68%">CARRIER</span>
<span class="g" style="top:38%;left:46%">RESONANCE</span>

<div class="stage">
  <pre class="ascii">       _ _ _       _        __
  __ _| (_) |_ ___| |__    / _|_ __ ___
 / _` | | | __/ __| '_ \  | |_| '_ ` _ \
| (_| | | | || (__| | | |_|  _| | | | | |
 \__, |_|_|\__\___|_| |_(_)_| |_| |_| |_|
 |___/</pre>
  <div class="sub">transmission received<span class="cursor"></span></div>
</div>

</body>
</html>
