/* ==========================================================================
   Rebombori — texture & print library
   Halftone, riso overprint, paper, tape, deckle edges.
   Densities driven by --tx (0..1) so the Tweaks panel can dial them down.
   ========================================================================== */

:root {
  --tx: 0.85;            /* texture intensity */
  --paper: #ece2cf;
  --paper-2: #e0d3ba;
  --ink: #1a1714;
  --ink-soft: #2b2620;
  --red: #d63823;
  --red-bright: #ff2e1f;
  --pink: #f0a89c;
  --pink-2: #e57f73;
  --blue: #2a2c6e;
  --cream: #f3ece1;
  --beige: #d8c9a8;
}

/* --- Halftone dot field (radial-gradient stack) ----------------------- */
.tx-halftone {
  background-image:
    radial-gradient(circle at 1px 1px, currentColor 0.9px, transparent 1.2px),
    radial-gradient(circle at 1.5px 2.5px, currentColor 0.5px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: calc(var(--tx) * 1);
}
.tx-halftone-coarse {
  background-image: radial-gradient(circle at 2px 2px, currentColor 1.4px, transparent 1.8px);
  background-size: 6px 6px;
  opacity: calc(var(--tx) * 0.95);
}
.tx-halftone-fine {
  background-image: radial-gradient(circle at 1px 1px, currentColor 0.6px, transparent 0.9px);
  background-size: 3px 3px;
  opacity: calc(var(--tx) * 1);
}

/* --- Paper / grain via SVG turbulence ---------------------------------- */
.tx-paper {
  position: relative;
}
.tx-paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: calc(var(--tx) * 0.5);
  pointer-events: none;
}
.tx-paper-soft::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.15  0 0 0 0 0.10  0 0 0 0.30 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 400px 400px;
  mix-blend-mode: multiply;
  opacity: calc(var(--tx) * 0.45);
  pointer-events: none;
}

/* --- Coffee/foxing stains (layered radial blobs) ----------------------- */
.tx-stains {
  position: relative;
}
.tx-stains::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 180px 90px at 12% 30%, rgba(120,80,40,0.10), transparent 70%),
    radial-gradient(ellipse 240px 140px at 88% 72%, rgba(120,60,40,0.09), transparent 70%),
    radial-gradient(ellipse 120px 80px at 60% 12%, rgba(160,90,40,0.07), transparent 70%),
    radial-gradient(ellipse 80px 60px at 30% 88%, rgba(120,80,40,0.08), transparent 70%);
  pointer-events: none;
  opacity: calc(var(--tx) * 0.9);
  mix-blend-mode: multiply;
}

/* --- Misregister / RGB split (apply to text or image wrappers) -------- */
.tx-misregister {
  text-shadow:
    1.2px 0 0 var(--red-bright),
    -1.2px 0 0 #00bcd4;
}
.tx-misregister-strong {
  text-shadow:
    2px 0 0 var(--red-bright),
    -2px 0 0 #1ed1ff,
    0 0 0 currentColor;
}

/* --- Tape strip (use as ::before on a positioned card) ----------------- */
.tx-tape {
  position: relative;
}
.tx-tape::before {
  content: "";
  position: absolute;
  width: 90px; height: 22px;
  background: rgba(220, 200, 130, 0.55);
  background-image: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.3) 100%);
  border-left: 1px dashed rgba(120,90,40,0.2);
  border-right: 1px dashed rgba(120,90,40,0.2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  pointer-events: none;
  z-index: 3;
}
.tx-tape-tl::before { left: -14px; top: -10px; transform: rotate(-22deg); }
.tx-tape-tr::before { left: auto; right: -14px; top: -10px; transform: rotate(22deg); }

/* --- Deckle / torn edge ------------------------------------------------ */
.tx-deckle-bottom {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'><path d='M0 0 H1200 V760 Q1180 770 1150 762 T1080 770 T1010 758 T940 770 T870 760 T800 770 T720 758 T650 768 T580 760 T500 770 T430 760 T360 770 T280 758 T210 770 T140 758 T70 770 T0 760 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' preserveAspectRatio='none'><path d='M0 0 H1200 V760 Q1180 770 1150 762 T1080 770 T1010 758 T940 770 T870 760 T800 770 T720 758 T650 768 T580 760 T500 770 T430 760 T360 770 T280 758 T210 770 T140 758 T70 770 T0 760 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* --- Riso overprint helpers ------------------------------------------- */
.riso-red    { background: var(--red); color: #fff; mix-blend-mode: multiply; }
.riso-pink   { background: var(--pink); mix-blend-mode: multiply; }
.riso-blue   { background: var(--blue); color: #fff; mix-blend-mode: multiply; }

/* --- Image placeholder w/ halftone ------------------------------------ */
.ph-image {
  position: relative;
  background: linear-gradient(135deg, #2a2620 0%, #4a3a30 50%, #2a2620 100%);
  overflow: hidden;
  isolation: isolate;
}
.ph-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,240,230,0.6) 1px, transparent 1.5px);
  background-size: 4px 4px;
  mix-blend-mode: screen;
  opacity: calc(var(--tx) * 0.9);
  pointer-events: none;
}
.ph-image[data-photo] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ph-image[data-photo]::after { display: none; }
.ph-image[data-photo] .ph-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.55) 0.9px, transparent 1.4px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: calc(var(--tx) * 0.7);
  pointer-events: none;
}
.ph-image[data-photo] .ph-tint {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  opacity: calc(var(--tx) * 0.35);
  pointer-events: none;
}
.ph-image.tinted-red[data-photo]   .ph-tint { background: var(--red); }
.ph-image.tinted-pink[data-photo]  .ph-tint { background: var(--pink); }
.ph-image.tinted-cream[data-photo] .ph-tint { background: #d8c9a8; opacity: calc(var(--tx) * 0.18); }
.ph-image.tinted-bw[as-no][data-photo] .ph-tint { display: none; }
.ph-image::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 240, 230, 0.7);
  background: rgba(0,0,0,0.5);
  padding: 3px 6px;
  border-radius: 2px;
  z-index: 2;
}

.ph-image.tinted-pink   { background: linear-gradient(135deg, #c44a3a 0%, #f0a89c 100%); }
.ph-image.tinted-red    { background: linear-gradient(135deg, #d63823 0%, #8a1a10 100%); }
.ph-image.tinted-blue   { background: linear-gradient(135deg, #2a2c6e 0%, #5a4cc4 100%); }
.ph-image.tinted-bw     { background: linear-gradient(135deg, #1a1714 0%, #3a3530 100%); }
.ph-image.tinted-cream  { background: linear-gradient(135deg, #d8c9a8 0%, #f3ece1 100%); color: #2a2620; }

/* --- Hover glitch (RGB displacement) ---------------------------------- */
.glitch-hover {
  transition: filter .25s, transform .25s;
}
.glitch-hover:hover {
  animation: tx-glitch 0.45s steps(2, end) infinite;
}
@keyframes tx-glitch {
  0%   { transform: translate(0,0); filter: hue-rotate(0deg) saturate(1.1); }
  20%  { transform: translate(-2px, 1px); filter: hue-rotate(-10deg) saturate(1.4); }
  40%  { transform: translate(2px, -1px); filter: hue-rotate(15deg) saturate(1.2); }
  60%  { transform: translate(-1px, 2px); filter: hue-rotate(-5deg); }
  80%  { transform: translate(1px, 0); filter: hue-rotate(8deg) saturate(1.3); }
  100% { transform: translate(0,0); filter: hue-rotate(0deg) saturate(1.1); }
}

/* --- Hand-drawn underline --------------------------------------------- */
.tx-underline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'><path d='M2 6 Q 30 2, 60 5 T 120 6 T 198 4' stroke='%23d63823' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 8px;
  padding-bottom: 8px;
}

/* --- Stamp (rotated, distressed) -------------------------------------- */
.tx-stamp {
  display: inline-block;
  border: 2px solid var(--red);
  color: var(--red);
  padding: 6px 14px 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  position: relative;
  background: transparent;
}
.tx-stamp::before {
  content: "";
  position: absolute; inset: -2px;
  background-image: radial-gradient(circle at 50% 50%, transparent 1px, rgba(214,56,35,0.0) 1.5px);
  background-size: 5px 5px;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- Marquee animation ------------------------------------------------- */
@keyframes tx-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tx-marquee-track {
  display: inline-flex;
  animation: tx-marquee 40s linear infinite;
  white-space: nowrap;
}