/* ==========================================================================
   print.css — the "cheap offset print" layer
   Halftone overlays, paper grain, CMYK misregistration, keylines, SFX type.
   Apply these as utility classes on any element.
   ========================================================================== */

/* Paper grain on the whole page (SVG turbulence, very subtle) */
body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Flat halftone dot overlay. Put class="halftone" on any positioned box. */
.halftone { position: relative; }
.halftone::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(20,20,20,var(--dot-alpha)) 1px, transparent 1.3px);
  background-size: var(--dot-size) var(--dot-size);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Halftone *gradient*: dots that fade out across the box (good for panel corners) */
.halftone-fade::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(20,20,20,0.35) 1.2px, transparent 1.5px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
          mask-image: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* CMYK misregistration: cyan and magenta plates slipped off the black plate */
.misreg {
  color: var(--ink);
  text-shadow:
    calc(-1 * var(--misreg-x)) var(--misreg-y) 0 var(--cyan),
    var(--misreg-x) calc(-1 * var(--misreg-y)) 0 var(--magenta);
}
.misreg-strong {
  color: var(--ink);
  text-shadow:
    calc(-2 * var(--misreg-x)) calc(1.5 * var(--misreg-y)) 0 var(--cyan),
    calc(2 * var(--misreg-x)) calc(-1.5 * var(--misreg-y)) 0 var(--magenta);
}

/* Heavy keyline box with hard shadow */
.keyline {
  border: var(--line) solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
}
.keyline-heavy { border-width: var(--line-heavy); }
.keyline-flat  { box-shadow: none; }

/* Flat process-color fills */
.fill-yellow  { background: var(--yellow);  color: var(--ink); }
.fill-cyan    { background: var(--cyan);    color: var(--ink); }
.fill-magenta { background: var(--magenta); color: var(--white); }
.fill-ink     { background: var(--ink);     color: var(--paper); }
.fill-paper2  { background: var(--paper-2); color: var(--ink); }

/* SFX lettering: "KA-CHUNK!" */
.sfx {
  font-family: var(--font-sfx);
  letter-spacing: 0.02em;
  line-height: 0.9;
  transform: skew(-8deg) rotate(-3deg);
  display: inline-block;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}
.sfx-cyan    { color: var(--cyan); }
.sfx-magenta { color: var(--magenta); }

/* Outlined (stroke-only) display text */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}