/* ============================================================
   texture.css — depth + tactility. Flat is a cheap tell.
   Opt in per element/section; don't blanket the whole page.
   ============================================================ */

/* Film grain overlay — add .grain to a positioned element/section.
   SVG noise as a data-uri (no asset, no request). Tune opacity. */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }

/* Vignette — subtle edge darkening for cinematic hero imagery. */
.vignette { position: relative; }
.vignette::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* Layered elevation — use instead of one flat box-shadow. */
.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-3); }

/* Hairline — 1px brand-tinted rules read more considered than #ccc. */
.hairline { border: 0; height: 1px; background: var(--c-line); }

/* Glass — ONLY over imagery/colour where it earns its keep. */
.glass {
  background: color-mix(in srgb, var(--c-surface) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, #fff 40%, transparent);
}

/* Duotone an image to brand colours — apply to <img>. */
.duotone { filter: grayscale(1) contrast(1.05); }
.duotone-wrap { position: relative; isolation: isolate; }
.duotone-wrap::after {
  content:""; position:absolute; inset:0; mix-blend-mode: color;
  background: var(--c-accent); opacity:.5; pointer-events:none;
}