/* ═══════════════════════════════════════════════════════════
   CUD ALT-2 — visual effects for the home page hero.
   A class `fx-<id>` on a media container (position:relative,
   holding img / canvas / .ph) filters the media and, for some
   effects, lays a pattern overlay on ::before.
   Used by index.html and by the Admin Effects tab previews.
   ═══════════════════════════════════════════════════════════ */

[class*="fx-"] { position: relative; }
[class*="fx-"]::before {
  content: none;
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}

/* ── Pure filter treatments ── */
.fx-mono      img, .fx-mono      canvas, .fx-mono      .ph { filter: grayscale(1) contrast(1.06); }
.fx-noir      img, .fx-noir      canvas, .fx-noir      .ph { filter: grayscale(1) contrast(1.45) brightness(0.92); }
.fx-archive   img, .fx-archive   canvas, .fx-archive   .ph { filter: sepia(0.5) saturate(0.7) contrast(0.9) brightness(1.03); }
.fx-blueprint img, .fx-blueprint canvas, .fx-blueprint .ph { filter: invert(0.92) hue-rotate(180deg) contrast(1.05); }
.fx-frost     img, .fx-frost     canvas, .fx-frost     .ph { filter: blur(5px) saturate(0.75) brightness(1.05); }
.fx-negative  img, .fx-negative  canvas, .fx-negative  .ph { filter: invert(1); }
.fx-crush     img, .fx-crush     canvas, .fx-crush     .ph { filter: grayscale(1) contrast(1.7) brightness(1.05); }

/* ── Filter + pattern overlays ── */
.fx-perforated img, .fx-perforated canvas, .fx-perforated .ph { filter: grayscale(0.9) contrast(1.1); }
.fx-perforated::before {
  content: '';
  /* a bone sheet punched with holes — the image reads through the dots */
  background-image: radial-gradient(circle at center, transparent 0 2.6px, #F4F2ED 3.4px);
  background-size: 11px 11px;
}

.fx-halftone img, .fx-halftone canvas, .fx-halftone .ph { filter: grayscale(1) contrast(1.25); }
.fx-halftone::before {
  content: '';
  background-image: radial-gradient(circle at center, #141412 0 1.6px, transparent 2.2px);
  background-size: 7px 7px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.fx-scanlines img, .fx-scanlines canvas, .fx-scanlines .ph { filter: contrast(1.05) saturate(0.85); }
.fx-scanlines::before {
  content: '';
  background-image: repeating-linear-gradient(0deg, rgba(20, 20, 18, 0.16) 0 1px, transparent 1px 4px);
}

.fx-grain img, .fx-grain canvas, .fx-grain .ph { filter: contrast(1.04) saturate(0.9); }
.fx-grain::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.3;
  mix-blend-mode: multiply;
}