/* ============================================================
   Imperfect Multiples — shared motifs
   Halftone dots, scanlines, paper grain, glow, braille signature
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --paper: #e8e3d6;
  --paper-stained: #d9d2bd;
  --phosphor: #4fff7a;
  --phosphor-dim: #2ba84a;
  --phosphor-deep: #073412;
  --blood: #b2150f;
  --caution: #f2c400;
  --bruise: #2a1f3d;
  --crt-bg: #020604;
  --cree-green: #bfff2e;
}

/* paper grain — layered noise + warm tint */
.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120,60,0,.06) 0, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.55'/></svg>");
}

/* halftone dot field — the Donwood/Consume signature */
.halftone {
  background-image: radial-gradient(circle, #000 1.2px, transparent 1.5px);
  background-size: 6px 6px;
}
.halftone-coarse { background-size: 10px 10px; background-image: radial-gradient(circle, #000 2px, transparent 2.4px); }
.halftone-fine   { background-size: 4px 4px;  background-image: radial-gradient(circle, #000 0.7px, transparent 1px); }

/* scanlines for CRT */
.scanlines::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  z-index: 10;
}
.scanlines-glow::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(79,255,122,.08) 0 1px,
    transparent 1px 3px
  );
  z-index: 10;
}

.crt {
  background: radial-gradient(ellipse at center, #051a0a 0%, #020604 70%, #000 100%);
  color: var(--phosphor);
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  text-shadow: 0 0 4px rgba(79,255,122,.55), 0 0 12px rgba(79,255,122,.25);
}

/* vignette */
.vignette::before {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
  z-index: 9;
}

/* subtle CHAOS braille watermark — tileable */
.chaos-watermark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'><g fill='currentColor' opacity='.10'><!-- C: 1,4 --><circle cx='10' cy='15' r='2'/><circle cx='10' cy='45' r='2'/><!-- H: 1,2,5 --><circle cx='50' cy='15' r='2'/><circle cx='50' cy='30' r='2'/><circle cx='65' cy='30' r='2'/><!-- A: 1 --><circle cx='100' cy='15' r='2'/><!-- O: 1,3,5 --><circle cx='140' cy='15' r='2'/><circle cx='140' cy='45' r='2'/><circle cx='155' cy='30' r='2'/><!-- S: 2,3,4 --><circle cx='195' cy='30' r='2'/><circle cx='195' cy='45' r='2'/><circle cx='210' cy='15' r='2'/></g></svg>");
  background-repeat: repeat;
}

/* registration marks — printer's crosshairs */
.reg-mark {
  width: 24px; height: 24px;
  position: relative;
}
.reg-mark::before, .reg-mark::after {
  content:""; position:absolute; background: currentColor;
}
.reg-mark::before { left: 50%; top:0; bottom:0; width: 1px; transform: translateX(-50%); }
.reg-mark::after  { top: 50%; left:0; right:0; height: 1px; transform: translateY(-50%); }
.reg-mark > .ring {
  position:absolute; inset: 6px;
  border: 1px solid currentColor; border-radius: 50%;
}

/* cut-out / ransom frame for Jamie Reid */
.ransom {
  display:inline-block;
  padding: 2px 8px;
  background: #fff;
  color: #000;
  font-weight: 900;
  transform: rotate(var(--r, -2deg));
  box-shadow: 2px 2px 0 #000;
}

/* ticker marquee */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker {
  display:flex; white-space:nowrap;
  animation: ticker 60s linear infinite;
}

/* flicker */
@keyframes flicker {
  0%,99%,100% { opacity: 1; }
  97% { opacity: .4; }
  98% { opacity: .85; }
}
.flicker { animation: flicker 4s infinite; }

/* blink cursor */
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1s steps(1) infinite; }