/* ============================================================
   uniqueness-kit — textures.css
   Generatieve, self-hosted achtergronden & texturen. Puur CSS +
   inline-SVG data-URI's (geen externe requests, enkele KB).
   Tint alles via de --tx-* custom properties.
   ============================================================ */

:root {
  --tx-ink: #111111;      /* patroonkleur */
  --tx-accent: #ff6436;   /* accent voor mesh/spots */
  --tx-soft: #6b6b6b;
}

/* ---- Custom cursor (bij body[data-fx-cursor]) ---- */
.fx-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tx-accent);
  pointer-events: none; mix-blend-mode: difference;
  transition: width .25s ease, height .25s ease, background .25s ease;
}
.fx-cursor.is-grow { width: 42px; height: 42px; background: #fff; }
@media (pointer: coarse) { .fx-cursor { display: none; } }

/* ---- 1. Grain / ruis-overlay: .tx-grain (op een positioned parent) ----
   Superlichte feTurbulence als data-URI. Leg over secties voor filmische korrel. */
.tx-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tx-grain > * { position: relative; z-index: 2; }

/* ---- 2. Mesh-gradient achtergronden ---- */
.tx-mesh {
  background-color: var(--tx-ink);
  background-image:
    radial-gradient(40% 55% at 15% 20%, color-mix(in srgb, var(--tx-accent) 55%, transparent), transparent 70%),
    radial-gradient(35% 45% at 85% 15%, color-mix(in srgb, var(--tx-soft) 45%, transparent), transparent 65%),
    radial-gradient(45% 60% at 75% 90%, color-mix(in srgb, var(--tx-accent) 35%, transparent), transparent 70%);
}
.tx-mesh--soft {
  background-color: #f6f5f2;
  background-image:
    radial-gradient(50% 60% at 10% 10%, color-mix(in srgb, var(--tx-accent) 22%, transparent), transparent 70%),
    radial-gradient(45% 55% at 90% 30%, color-mix(in srgb, var(--tx-soft) 18%, transparent), transparent 65%);
}

/* ---- 3. Herhalende patronen (inline-SVG, tint via currentColor-truc) ---- */
/* Stippenraster */
.tx-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--tx-ink) 22%, transparent) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
/* Fijn technisch raster */
.tx-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--tx-ink) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tx-ink) 10%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* Diagonale signalisatie-strepen (garage-sfeer) */
.tx-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--tx-accent) 90%, transparent) 0 14px,
    transparent 14px 34px
  );
}

/* ---- 4. Organische golf-scheiding (SVG data-URI, plak boven/onder secties) ---- */
.tx-wave-top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C300,90 900,-10 1200,40 L1200,80 L0,80 Z' fill='%23111111'/%3E%3C/svg%3E");
  background-size: 100% 80px; background-repeat: no-repeat; background-position: top;
  height: 80px;
}

/* respecteer reduced-motion voor alles wat elders beweegt (grain blijft statisch, prima) */
@media (prefers-reduced-motion: reduce) {
  .fx-cursor { transition: none; }
}