/* ============================================================
   HIBI — Texture overlays
   Grain, halftone, paper, fold — applied with ::before/::after
   ============================================================ */

/* Soft paper grain — apply to any container */
.tex-grain {
  position: relative;
  isolation: isolate;
}
.tex-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("grain.svg");
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}

.tex-grain-heavy::after { opacity: 0.55; background-size: 240px 240px; }

/* Halftone dot field — for color block overlays */
.tex-halftone {
  position: relative;
  isolation: isolate;
}
.tex-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle, var(--ink) 0.6px, transparent 1.2px);
  background-size: 5px 5px;
  opacity: 0.18;
}

/* Heavy printed halftone — for color blocks */
.tex-halftone-color {
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.8px);
  background-size: 6px 6px;
}

/* Aged paper edge — torn-looking horizontal divider */
.tex-tear {
  position: relative;
}
.tex-tear::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 6px;
  background-image: url("tear.svg");
  background-repeat: repeat-x;
  background-size: auto 6px;
}

/* Risograph misregistration — colored echo behind element */
.riso-echo {
  position: relative;
}
.riso-echo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--flame);
  transform: translate(3px, 3px);
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: 0.85;
}