/* ==========================================================================
   RINGOVATE - Decorative textures
   --------------------------------------------------------------------------
   Spec 1 and 3.5 permit AI-generated imagery ONLY for purely decorative,
   non-representative elements (e.g. an abstract background texture).
   Never for portfolio, project, service or team photography.

   Every texture below is currently a pure-CSS stand-in (0 bytes, no request).
   To swap in a generated image, replace the `background-image` of the matching
   rule with `url('/assets/img/decor/<file>.jpg')` and keep the blend mode and
   opacity as they are. Nothing else in the codebase needs to change.

   Intended texture set (see README "Decoratieve texturen"):
     .tx-beton  -> fine polished concrete / lime plaster, warm grey-beige
     .tx-hout   -> warm European oak grain, honey tone
     .tx-water  -> abstract underwater light caustics, deep teal-green
     .tx-kalk   -> limestone / paper grain, warm off-white
   ========================================================================== */

/* `isolation: isolate` maakt een eigen stacking context, zodat de textuur op
   z-index -1 wel achter de inhoud valt maar nog steeds boven de achtergrond
   van de sectie zelf.

   Belangrijk: hier mag GEEN regel staan die de kinderen positioneert (zoals
   `.tx > * { position: relative }`). Die overschrijft namelijk de absolute
   positionering van bijvoorbeeld `.hero__media`, waardoor zo'n hero-afbeelding
   in de flow terechtkomt en de sectie meerdere schermen hoog wordt. */
.tx { position: relative; isolation: isolate; }

.tx::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* --- Concrete / lime plaster ---------------------------------------------
   Used on: warm-white sections that need a little surface (trust bar, steps) */
.tx-beton::before {
  opacity: 0.5;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(43,46,51,0.035) 0 1px, transparent 1px),
    radial-gradient(circle at 62% 68%, rgba(43,46,51,0.03)  0 1px, transparent 1px),
    radial-gradient(circle at 84% 34%, rgba(43,46,51,0.025) 0 1px, transparent 1px),
    linear-gradient(114deg, rgba(216,211,201,0.30) 0%, rgba(216,211,201,0) 38%),
    linear-gradient(292deg, rgba(216,211,201,0.22) 0%, rgba(216,211,201,0) 44%);
  background-size: 7px 7px, 11px 11px, 13px 13px, 100% 100%, 100% 100%;
}

/* --- Oak grain ------------------------------------------------------------
   Used on: warm accent bands (werkwijze / partner strip) */
.tx-hout::before {
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(91deg,
      rgba(201,168,118,0.00) 0px,
      rgba(201,168,118,0.16) 2px,
      rgba(201,168,118,0.00) 5px,
      rgba(181,150,105,0.10) 9px,
      rgba(201,168,118,0.00) 14px),
    repeating-linear-gradient(88deg,
      rgba(43,46,51,0.00) 0px,
      rgba(43,46,51,0.035) 1px,
      rgba(43,46,51,0.00) 6px);
}

/* --- Water caustics -------------------------------------------------------
   Used on: mosgroen CTA sections */
.tx-water::before {
  opacity: 0.45;
  background-image:
    radial-gradient(ellipse 140% 60% at 20% 30%, rgba(245,242,236,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 110% 45% at 78% 62%, rgba(245,242,236,0.08) 0%, transparent 60%),
    repeating-radial-gradient(circle at 35% 45%,
      rgba(245,242,236,0.00) 0px,
      rgba(245,242,236,0.05) 18px,
      rgba(245,242,236,0.00) 40px),
    repeating-radial-gradient(circle at 72% 28%,
      rgba(245,242,236,0.00) 0px,
      rgba(245,242,236,0.04) 26px,
      rgba(245,242,236,0.00) 55px);
}

/* --- Limestone / paper grain ---------------------------------------------
   Used on: large warm-white content areas (over-ons, dienst intro) */
.tx-kalk::before {
  opacity: 0.6;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(43,46,51,0.02) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 55%, rgba(43,46,51,0.018) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(43,46,51,0.015) 0 1px, transparent 1px);
  background-size: 9px 9px, 14px 14px, 19px 19px;
}

/* When a real texture image is dropped in, these keep it subtle and on-brand.
   Add the `tx-img` class alongside `tx-beton` / `tx-hout` / etc. */
.tx-img::before {
  background-repeat: repeat;
  background-size: 720px auto;
  mix-blend-mode: multiply;
  opacity: 0.14;
}
.section--antraciet.tx-img::before,
.section--mosgroen.tx-img::before,
.section--terracotta.tx-img::before,
.hero.tx-img::before {
  mix-blend-mode: soft-light;
  opacity: 0.22;
}