/* ============================================================
   DEVILS OF DIRT HAWKING — EFFECTS
   Hard edges, heavy outlines, blocky offset shadows.
   This brand is stickers, patches & screen prints — NOT soft SaaS.
   ============================================================ */

:root {
  /* --- Radii: mostly sharp. Stickers & patches have hard or
     slightly-cut corners, never pill-soft. ------------------ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;   /* default for inputs/cards */
  --radius-md: 6px;
  --radius-full: 999px; /* only for round badges/avatars */

  /* --- Border widths: thick die-cut outlines -------------- */
  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px;   /* sticker outline */
  --border-stamp: 4px;

  /* --- Shadows: hard, offset, no soft glow ---------------- */
  --shadow-none: none;
  /* blocky offset "sticker" drop */
  --shadow-hard-sm: 3px 3px 0 var(--ink-950);
  --shadow-hard-md: 5px 5px 0 var(--ink-950);
  --shadow-hard-gold: 4px 4px 0 var(--gold-700);
  /* subtle lift for cards on dark (used sparingly) */
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.45);
  /* inset press */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);

  /* --- Motion --------------------------------------------- */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 90ms; /* @kind other */
  --dur-med: 160ms; /* @kind other */

  /* --- Grain / grit overlay --------------------------------
     A reusable feTurbulence noise data-URI. Layer over surfaces
     with low opacity for the distressed print texture. -------- */
  --grit-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */
}

/* Utility: drop this class on a positioned element to add grit. */
.dodh-grit::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grit-noise);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
}

/* ============================================================
   PHOTO-HALFTONE TEXTURE OVERLAYS
   Two real screen-printed halftone scans (riveted plank + stone wall)
   live in assets/, processed into single-ink overlays:

     *-light.png → bone grit, for DARK fields (ink)
     *-dark.png  → ink grit,  for LIGHT fields (gold/bone)

   USAGE — drop an empty layer element inside a position:relative box:
     <div class="panel" style="position:relative;overflow:hidden">
       <div class="dodh-tex dodh-tex--rivet"></div>   // dark panel
       …content (give it position:relative to sit above)…
     </div>
   On gold/bone panels use the *-on-light variants (ink grit, multiply).
   Tune intensity with --tex-opacity. URLs are in the rules so they
   resolve relative to THIS file at any consumer depth.
   ============================================================ */
:root {
  --tex-opacity: 0.3; /* @kind other */
}

.dodh-tex {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: var(--tex-opacity);
}
/* DARK panels — pale bone grit */
.dodh-tex--rivet { background-image: url("../assets/texture-rivet-light.png"); }
.dodh-tex--brick { background-image: url("../assets/texture-brick-light.png"); }
/* LIGHT panels — ink grit, multiplied into the field */
.dodh-tex--rivet-on-light {
  background-image: url("../assets/texture-rivet-dark.png");
  mix-blend-mode: multiply;
  opacity: var(--tex-opacity, 0.5);
}
.dodh-tex--brick-on-light {
  background-image: url("../assets/texture-brick-dark.png");
  mix-blend-mode: multiply;
  opacity: var(--tex-opacity, 0.5);
}