@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --bg: #050505;
  --text: #f2f2f2;
  --muted: #a7a7a7;
  --line: rgba(255,255,255,.22);
  --panel: rgba(255,255,255,.045);
  --cyan: rgba(0,255,255,.65);
  --red: rgba(255,0,80,.65);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: .02em;
  overflow-x: hidden;
}

.noise,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

.noise {
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: noiseShift .55s steps(2) infinite;
}

.scanlines {
  opacity: .18;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.12),
    rgba(255,255,255,.12) 1px,
    transparent 1px,
    transparent 4px
  );
}

@keyframes noiseShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-2%); }
  75% { transform: translate(2%,2%); }
  100% { transform: translate(0,0); }
}

.site-header {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.logo {
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-decoration: none;
  line-height: .8;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

nav a,
.socials a {
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-transform: uppercase;
  font-size: .85rem;
  transition: transform .2s ease, background .2s ease;
}

nav a:hover,
.socials a:hover,
.btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
}

main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.crt-box,
.panel,
.track-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.hero {
  min-height: 68vh;
  display: grid;
  align-content: center;
  padding: clamp(32px, 8vw, 86px);
  position: relative;
  overflow: hidden;
}

.hero::after,
.crt-box::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}

.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .9rem;
  margin: 0 0 16px;
}

h1, h2 {
  font-family: 'VT323', monospace;
  font-weight: 400;
  margin: 0 0 18px;
  text-transform: uppercase;
}

h1 { font-size: clamp(4rem, 13vw, 10rem); line-height: .78; }
h2 { font-size: clamp(2rem, 5vw, 3rem); }

.mega { margin-bottom: 28px; }

.hero-copy,
.page-title p,
.contact-wrap p,
.panel p,
.track-card p {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  max-width: 760px;
}


.hero-signal {
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: clamp(2.25rem, 6vw, 5.4rem);
  line-height: .9;
  max-width: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow: -2px 0 var(--red), 2px 0 var(--cyan), 0 0 24px rgba(255,255,255,.14);
}

.transmission-panel {
  overflow: hidden;
  position: relative;
}

.transmission-panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.08), transparent 35%);
  animation: slowSweep 7s linear infinite;
  opacity: .45;
}

.crt-screen {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.18);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.08) 1px, transparent 1px, transparent 5px),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 38%),
    rgba(0,0,0,.62);
  padding: 22px;
  min-height: 100%;
  box-shadow: inset 0 0 34px rgba(255,255,255,.08);
}

.screen-top,
.meter-row,
.last-signal {
  display: grid;
  gap: 12px;
  align-items: center;
}

.screen-top {
  grid-template-columns: 1fr auto;
  color: #fff;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.rec-light {
  color: #fff;
  text-shadow: -2px 0 var(--red), 2px 0 var(--cyan);
  animation: blink 1.1s steps(2) infinite;
}

.meter-row {
  grid-template-columns: 145px 1fr 46px;
  margin: 13px 0;
  color: var(--muted);
  font-size: .9rem;
}

.meter {
  height: 14px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.9));
  box-shadow: 0 0 18px rgba(255,255,255,.25);
  animation: meterPulse 2.4s steps(4) infinite;
}

.last-signal {
  grid-template-columns: 120px 1fr;
  margin-top: 26px;
  color: var(--muted);
}

.last-signal strong {
  color: #fff;
  font-weight: 400;
  letter-spacing: .08em;
}

.static-band {
  margin-top: 24px;
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.2);
  color: rgba(255,255,255,.68);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='80' filter='url(%23x)' opacity='.55'/%3E%3C/svg%3E");
  animation: staticJump .35s steps(2) infinite;
}

@keyframes slowSweep {
  to { transform: rotate(360deg); }
}

@keyframes blink {
  50% { opacity: .25; }
}

@keyframes meterPulse {
  50% { opacity: .55; transform: translateX(2px); }
}

@keyframes staticJump {
  50% { background-position: 24px -18px; }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  appearance: none;
  border: 1px solid var(--text);
  color: var(--bg);
  background: var(--text);
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.btn.ghost {
  color: var(--text);
  background: transparent;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 70px;
}

.panel,
.track-card,
.page-title,
.contact-wrap {
  padding: clamp(22px, 4vw, 38px);
}

.terminal p {
  margin: 8px 0;
  color: #fff;
}

.page-title,
.contact-wrap {
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.track-list {
  display: grid;
  gap: 18px;
  margin-bottom: 70px;
}

.track-card {
  display: grid;
  gap: 18px;
}

audio {
  width: 100%;
  filter: grayscale(1) contrast(1.15);
}

.fake-embed {
  border: 1px dashed var(--line);
  color: var(--muted);
  min-height: 160px;
  display: grid;
  place-items: center;
  margin-top: 16px;
}

.contact-form {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

label {
  color: var(--muted);
  text-transform: uppercase;
  display: grid;
  gap: 8px;
}

input,
textarea {
  width: 100%;
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  padding: 13px 14px;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,.14);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

footer {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 40px;
  color: var(--muted);
  font-size: .9rem;
}

.glitch {
  position: relative;
  text-shadow: -2px 0 var(--red), 2px 0 var(--cyan);
  animation: chroma 2.2s infinite steps(2);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
}

.glitch::before {
  color: #fff;
  transform: translate(2px, 0);
  clip-path: inset(0 0 55% 0);
  text-shadow: -3px 0 var(--red);
  animation: glitchTop 1.8s infinite steps(2);
}

.glitch::after {
  color: #fff;
  transform: translate(-2px, 0);
  clip-path: inset(52% 0 0 0);
  text-shadow: 3px 0 var(--cyan);
  animation: glitchBottom 1.4s infinite steps(2);
}

@keyframes chroma {
  0%, 100% { text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); }
  45% { text-shadow: 2px 0 var(--red), -2px 0 var(--cyan); }
  48% { transform: skewX(4deg); }
  50% { transform: skewX(0); }
}

@keyframes glitchTop {
  0%, 100% { transform: translate(2px, 0); }
  20% { transform: translate(-4px, -2px); }
  21% { transform: translate(3px, 1px); }
  55% { transform: translate(1px, -1px); }
}

@keyframes glitchBottom {
  0%, 100% { transform: translate(-2px, 0); }
  35% { transform: translate(4px, 2px); }
  36% { transform: translate(-3px, 0); }
  70% { transform: translate(-1px, 2px); }
}

@media (max-width: 760px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    justify-content: flex-start;
  }

  .grid-two {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 62vh;
  }

  .meter-row,
  .last-signal {
    grid-template-columns: 1fr;
  }
}

.release-card {
  position: relative;
  overflow: hidden;
}

.release-card::before {
  content: "001";
  position: absolute;
  right: 24px;
  top: 18px;
  color: rgba(255,255,255,.08);
  font-family: 'VT323', monospace;
  font-size: clamp(5rem, 15vw, 12rem);
  line-height: 1;
  pointer-events: none;
}

.bandcamp-player {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.35);
  padding: 12px;
  box-shadow: inset 0 0 24px rgba(255,255,255,.05);
}

.volume-note {
  position: relative;
  z-index: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
}