/* ============================================================
   EFFECTS & TEXTURES — the destructive/organic layer.
   Halftone, photocopy grain, scanlines, blueprint grids,
   crosshairs, and shadow system. All CSS-generated so they
   ship with the system (no image binaries required).
   ============================================================ */

:root {
  /* ---- Shadow system — brutalist HARD offset, no blur ---- */
  --shadow-none: none;
  --shadow-hard: 4px 4px 0 0 var(--void-black);
  --shadow-hard-accent: 4px 4px 0 0 var(--hot-coral);
  --shadow-inset: inset 0 0 0 1px var(--wire-faint);
  /* soft glow reserved for accent focus / cathode bloom only */
  --glow-coral: 0 0 0 1px rgba(255,69,0,0.5), 0 0 18px -4px rgba(255,69,0,0.6);

  /* ---- Reusable texture backgrounds ---- */
  --tex-grid: linear-gradient(var(--grid-line) 1px, transparent 1px),
              linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --tex-grid-size: 32px 32px;
}

/* ---- Photocopy grain (SVG fractal noise, tiled) ---- */
.tex-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  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' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Blueprint grid backdrop ---- */
.tex-grid {
  background-image: var(--tex-grid);
  background-size: var(--tex-grid-size);
}

/* ---- Halftone dot field (radial-gradient screen) ---- */
.tex-halftone {
  background-image: radial-gradient(var(--text-body) 0.9px, transparent 1.1px);
  background-size: 5px 5px;
}

/* ---- Cathode scanlines ---- */
.tex-scanline {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.22) 3px
  );
}

/* ---- Halftone image treatment: forces any <img> toward
   high-contrast monochrome, ready to be tinted by parent ---- */
.img-threshold {
  filter: grayscale(1) contrast(2.4) brightness(1.05);
  mix-blend-mode: luminosity;
}
.img-dither {
  filter: grayscale(1) contrast(1.6);
  image-rendering: pixelated;
}

/* ---- Crosshair alignment marker [ + ] ---- */
.crosshair {
  position: relative;
  width: var(--crosshair);
  height: var(--crosshair);
  flex: 0 0 auto;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-0.5px); }
.crosshair::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-0.5px); }