/* ============================================================
   DLVR — styles.css
   Shared styles for index.html, ep.html, links.html
   ============================================================ */

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

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── TOKENS ────────────────────────────────── */
:root {
  --bg:       #060606;
  --bg2:      #0d0d0d;
  --teal:     #00D4B8;
  --teal-dim: #008070;
  --teal-bg:  rgba(0, 212, 184, 0.06);
  --red:      #C41A1A;
  --red-dim:  #6a0e0e;
  --white:    #E8E0D0;
  --grey1:    #1c1c1c;
  --grey2:    #333;
  --grey3:    #666;
  --grey4:    #999;
  --mono: 'Share Tech Mono', monospace;
  --vt:   'VT323', monospace;
}

/* ── BASE ──────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── SCANLINES ─────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, .12) 2px, rgba(0, 0, 0, .12) 4px
  );
  pointer-events: none;
  z-index: 9000;
}

/* ── GRAIN ─────────────────────────────────── */
#grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 8999;
  animation: grain .35s steps(3) infinite;
}

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

/* ── TV GLITCH BAND ────────────────────────── */
/* Rare scan-band flash — visible but non-invasive */
#grain::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 45%,
    rgba(255,255,255,.022) 48%,
    transparent 51%,
    transparent 100%
  );
  animation: tvband 9s steps(1) infinite;
  pointer-events: none;
}

@keyframes tvband {
  0%, 79%, 81%, 83%, 100% { opacity: 0; transform: translateY(0); }
  80%   { opacity: 1; transform: translateY(-30%); }
  82%   { opacity: 1; transform: translateY(20%);  }
}

/* ── LAYOUT ────────────────────────────────── */
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* ── GLITCH KEYFRAMES ──────────────────────── */
@keyframes flicker {
  0%, 94%, 100% { opacity: 1; }
  95%            { opacity: .5; }
  97%            { opacity: 1; }
  98%            { opacity: .7; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.blink { animation: blink 1.1s step-end infinite; }

/* ── BUTTONS ───────────────────────────────── */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--teal-dim);
  color: var(--teal);
  background: var(--teal-bg);
  transition: all .2s;
  cursor: pointer;
}

.btn:hover {
  background: rgba(0, 212, 184, .12);
  border-color: var(--teal);
  box-shadow: 0 0 12px rgba(0, 212, 184, .15);
}

.btn-ghost {
  border-color: var(--grey2);
  color: var(--grey4);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--grey3);
  color: var(--white);
  background: rgba(255, 255, 255, .03);
  box-shadow: none;
}

.btn-red {
  border-color: var(--red-dim);
  color: #e04040;
  background: rgba(196, 26, 26, .06);
}

.btn-red:hover {
  border-color: var(--red);
  background: rgba(196, 26, 26, .1);
  box-shadow: 0 0 12px rgba(196, 26, 26, .12);
}