@font-face {
  font-family: 'VT323';
  src: url('VT323-Regular.ttf') format('truetype');
}

:root {
  --bg: #050404;
  --panel: #0c0a0a;
  --border: #2a0808;
  --border-lit: #7a0f0f;
  --red: #c81414;
  --red-glow: #ff2b2b;
  --text: #cfc9c4;
  --text-dim: #6b6560;

  /* constants: text sitting on the dark poster cards / hero video */
  --ink: #ece5db;
  --ink-dim: #a89f95;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'VT323', 'Courier New', monospace;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* film grain, fixed over everything */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.4s steps(4) infinite;
}

/* slow red heartbeat vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(120,10,10,0.16) 0%, transparent 55%),
              radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 60%),
              linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35));
  box-shadow: inset 0 0 180px rgba(0,0,0,0.9);
  animation: pulse 4.5s ease-in-out infinite;
}

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

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

a { color: inherit; text-decoration: none; }

/* --- glitch title --- */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--ink);
  letter-spacing: 8px;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  overflow: hidden;
}
.glitch::before {
  color: var(--red-glow);
  left: 3px;
  text-shadow: -1px 0 rgba(255,43,43,0.6);
  animation: glitchTop 4.5s infinite linear alternate-reverse;
}
.glitch::after {
  color: #2a3d3d;
  left: -3px;
  text-shadow: 1px 0 rgba(40,60,60,0.6);
  animation: glitchBottom 3.7s infinite linear alternate-reverse;
}
@keyframes glitchTop {
  0%, 88%, 100% { clip-path: inset(0 0 92% 0); transform: translate(0,0); opacity: 0; }
  89% { clip-path: inset(10% 0 60% 0); transform: translate(-3px,0); opacity: 1; }
  91% { clip-path: inset(40% 0 20% 0); transform: translate(3px,0); opacity: 1; }
  93% { clip-path: inset(5% 0 80% 0); transform: translate(-2px,0); opacity: 1; }
  95% { opacity: 0; }
}
@keyframes glitchBottom {
  0%, 92%, 100% { clip-path: inset(85% 0 0 0); transform: translate(0,0); opacity: 0; }
  93% { clip-path: inset(60% 0 5% 0); transform: translate(3px,0); opacity: 1; }
  95% { clip-path: inset(20% 0 45% 0); transform: translate(-3px,0); opacity: 1; }
  97% { opacity: 0; }
}

/* --- static / TV noise for locked cards --- */
.static-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  opacity: 0.35;
  filter: grayscale(1) contrast(1.4);
  animation: staticShift 0.3s steps(3) infinite;
}
@keyframes staticShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(-3%,2%); }
  66% { transform: translate(2%,-3%); }
  100% { transform: translate(0,0); }
}