/* ============================================================
   RIET QUADEN MAKELAARS — het fond (V2, derde ronde)

   Wijziging 03-08-2026, op verzoek van Alexander: de achtergrond snijdt niet
   langer per sectie af. Er is nu één laag achter de héle pagina, opgebouwd
   volgens het recept van de portfoliosectie op rivoweb.nl:

     1. een lange verticale wassing tussen twee lichte tinten, zonder harde
        stops, zodat je nergens een sectiegrens ziet
     2. grote, heel zachte gloedvlekken die traag ademen
     3. sinds 04-08-2026 de papierlagen erachter (lagen.css): diagonale banen
        en gestapelde vlakken. De haarlijnen die hier stonden zijn daarvoor
        geweken; die banen hebben hun eigen lijnen

   Sinds 06-08 is de pagina overál licht (ook #contact) en is de ondergrond
   hard wit met schuine strepen (lagen.css). De gevelrij van Munstergeleen
   staat nog uitsluitend in de hero. De .toon-nacht-regels hieronder blijven
   staan voor het geval er ooit weer een donker blok komt; op de homepagina
   wordt de klasse niet meer gebruikt.
   ============================================================ */

/* ---------- 1. de ondergrond: hard wit (keuze Alexander 06-08) ----------
   Terug naar het frisse wit van V1. De beige wassing is vervallen; het
   leven komt nu uit de schuine strepen (Lagen.tsx/lagen.css) die dwars
   over de secties lopen. */
body {
  background-color: var(--wit);
  position: relative;
}

/* De secties zelf hebben geen eigen vlak meer; ze laten de wassing door. */
.toon-papier,
.toon-papier-diep { background-color: transparent; color: var(--zwart); }
.toon-nacht       { background-color: var(--nacht); color: #F2EFEA; }

.toon-papier,
.toon-papier-diep,
.toon-nacht { position: relative; }

/* Inhoud altijd boven het fond. */
.toon-papier > *,
.toon-papier-diep > *,
.toon-nacht > * { position: relative; z-index: 1; }

/* ---------- 2. de laag met de gloedvlekken ----------
   Ligt over de volle hoogte van het document, achter alles. */
.fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fond i {
  position: absolute;
  display: block;
  will-change: transform;
}

/* de gloedvlekken: warm, groot en heel zacht */
.fond i {
  border-radius: 50%;
}
.fond .gloed-rood {
  background: radial-gradient(closest-side, rgba(230, 68, 73, .10), transparent 72%);
}
.fond .gloed-inkt {
  background: radial-gradient(closest-side, rgba(24, 22, 23, .055), transparent 72%);
}
.fond .gloed-warm {
  background: radial-gradient(closest-side, rgba(214, 176, 130, .16), transparent 74%);
}

/* Zonder JS (of bij reduced motion) staat alles gewoon stil op zijn plek:
   de posities komen uit de inline stijlen die de markup meegeeft. */

/* ---------- de gevelrij: verwijderd op 06-08-2026 ----------
   De twee rijen huisjes met rode schoorstenen stonden hier als hero-vulling.
   Op verzoek van Alexander eruit: ze werden te nadrukkelijk op het witte
   fond. De hero leunt nu op de schuine strepen van lagen.css, net als de
   rest van de pagina. De straatlijn onderaan is meegegaan. */

/* ---------- de donkere contactsectie ----------
   Losse biljetten in het veld, met één rode kantlijn. Dit is het enige
   donkere blok van de pagina, en het is ook waar de telefoonlijn eindigt. */
.toon-nacht::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='230' viewBox='0 0 360 230'%3E%3Cg fill='%23ffffff' fill-opacity='0.026'%3E%3Crect x='14' y='22' width='102' height='20'/%3E%3Crect x='214' y='128' width='102' height='20'/%3E%3C/g%3E%3Cg fill='%23E64449' fill-opacity='0.085'%3E%3Crect x='14' y='46' width='102' height='6'/%3E%3Crect x='214' y='152' width='102' height='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--tegel, 400px) auto;
  -webkit-mask-image: radial-gradient(110% 90% at 30% 30%, #000 35%, transparent 100%);
          mask-image: radial-gradient(110% 90% at 30% 30%, #000 35%, transparent 100%);
  animation: fond-drift 120s linear infinite;
}
@keyframes fond-drift {
  from { background-position: 0 0; }
  to   { background-position: var(--tegel, 400px) 0; }
}

.toon-nacht::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kantlijn, 44%);
  width: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(230, 68, 73, .45) 12%,
    rgba(230, 68, 73, .45) 88%,
    transparent
  );
}

@media (max-width: 900px) {
  .toon-nacht::after { left: 6%; opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .toon-nacht::before { animation: none; }
}

/* ---------- tekstkleuren binnen de donkere sectie ---------- */
.toon-nacht .tekst-steun,
.toon-nacht .tekst-klein.tekst-steun { color: var(--steun-licht); }
.toon-nacht h1,
.toon-nacht h2,
.toon-nacht h3 { color: #FBF9F6; }