/* ============================================================
   RIET QUADEN MAKELAARS — de schuine strepen (06-08-2026)

   Hard wit als ondergrond, met schuine strepen dwars over de secties.
   Markup in components/Lagen.tsx, beweging in assets/js/secties/fond.js.

   Op wit mogen de tinten duidelijk zichtbaar zijn: de 3%-tinten van de
   oude papierlagen verdwenen juist in het beige, en dat vond Riet saai.
   Waar twee strepen elkaar kruisen wordt het vanzelf een tint dieper; dat
   is de diepte, geen schaduwen.
   ============================================================ */

.lagen {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lagen .baan {
  position: absolute;
  display: block;
  will-change: transform;
  /* Alles kantelt om zijn eigen midden; anders schuiven de strepen bij het
     draaien de pagina uit en klopt de top-positie niet meer. */
  transform-origin: center;
  /* Breder dan het scherm en aan beide kanten eruit, zodat je nooit een
     uiteinde ziet. 160% met -30% marge houdt ze ook bij 12° voorbij de rand. */
  left: -30%;
  width: 160%;
  height: calc(var(--baan-hoogte, 320px) * var(--baan-schaal, 1));
}

/* Op een telefoon is een baan van 480 px bijna een heel scherm. Iets lager,
   dan blijft de verhouding tussen streep en lucht gelijk aan desktop. */
@media (max-width: 700px) {
  .lagen { --baan-schaal: 0.72; }
}

/* ---------- de drie tinten, gemeten op wit ---------- */
.lagen .baan--grijs { background: rgba(24, 22, 23, 0.045); }
.lagen .baan--warm  { background: rgba(214, 150, 96, 0.10); }
.lagen .baan--rood  { background: rgba(230, 68, 73, 0.055); }

/* ---------- de rode haarlijnen ----------
   Niet elke streep krijgt er een: een lijn om álles wordt een rasterwerk.
   Ze doven aan de uiteinden uit, zodat er nergens een hoek begint. */
.lagen .baan--lijn::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 68, 73, 0.30), transparent);
}

/* ============================================================
   HET DIEPTEVLAK ACHTER EEN TEKSTBLOK

   Eén rechthoek een halve tint dieper, iets groter dan de tekst en een klein
   stukje verschoven, zodat hij als een los vel áchter de tekst ligt en niet
   als een kader eromheen. Eén haarlijn langs de bovenrand; de rest van de
   randen blijft open, anders wordt het een kaartje.

   Gebruik dit spaarzaam — vier of vijf plekken op de pagina. Zet je het overal,
   dan is het geen accent meer maar een tweede achtergrond.
   ============================================================ */
.diepte {
  position: relative;
}

.diepte::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -34px -40px -30px -44px;
  transform: translate(-10px, -8px) rotate(var(--diepte-hoek, -1deg));
  background: rgba(24, 22, 23, 0.038);
  border-radius: 3px;
  pointer-events: none;
}

.diepte::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -44px;
  right: -40px;
  top: -34px;
  height: 1px;
  transform: translate(-10px, -8px) rotate(var(--diepte-hoek, -1deg));
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(24, 22, 23, .12), transparent);
  pointer-events: none;
}

/* Het brede vlak steekt 40 px naast de tekst uit. Daar is pas plaats voor
   zodra de container (max 1180 px) echte marge naast zich heeft, en dat is
   vanaf ongeveer 1260 px. Daaronder liep het vlak buiten beeld: op 768 px
   kon de pagina daardoor 9 px opzij scrollen. Krapper en recht dus, tot
   die breedte. (Gemeten 22-08-2026 op 360, 390, 768, 1024, 1440 en 1920.) */
@media (max-width: 1259px) {
  .diepte::before,
  .diepte::after {
    inset: -18px -18px -16px -18px;
    transform: none;
  }
  .diepte::after { left: -18px; right: -18px; top: -18px; bottom: auto; }
}