/* ===========================================================================
   HET VELD — de levende achtergrond onder alle drie de demo's.

   Wat er mis was aan de vorige ronde: vlakke achtergronden met harde randen
   tussen secties. Een lijn zegt "hier houdt iets op". Dat leest als een
   formulier, niet als een film.

   Hier is de achtergrond één doorlopend vlak over de hele pagina, met vier
   grote wolken licht die traag bewegen. Secties hebben geen eigen kleur en
   geen rand; ze liggen op het veld. De kleur van het veld verandert met de
   sectie waar je in zit, over anderhalve seconde, zodat je de overgang voelt
   maar hem niet kunt aanwijzen.

   Eén palet: papier, richting 04, warm papier met blauwe en zandkleurige
   wolken. De donkere trap is eruit, dus de kleuren staan op :root zelf en
   niet meer achter een attribuut.
   =========================================================================== */

:root{
  --grond:#F7F4EF;
  --inkt:#17152A;
  --inkt-zacht:rgba(23,21,42,.60);
  --inkt-zwak:rgba(23,21,42,.52);
  --glas:rgba(255,255,255,.55);
  --glas-rand:rgba(23,21,42,.10);
  --accent:#B4DFEB;
  --accent-letter:#3F7489;
  --op-accent:#17152A;
  --diep:#17152A;          /* voor de enkele donkere passage */
  --op-diep:#F7F4EF;
  /* De wolken. Elke sectie vraagt om een sfeer bij naam, en elk palet bepaalt
     zelf wat die naam betekent. Anders schildert een sectie die om navy vraagt
     ook navy op het papier, en dan is de tekst weg. */
  --s-koel-1:#CFE7EF; --s-koel-2:#EDE5D6; --s-koel-3:#DCEBF1; --s-koel-4:#F7F4EF;
  --s-warm-1:#EFE2CC; --s-warm-2:#DCEBF1; --s-warm-3:#F2E7D4; --s-warm-4:#F7F4EF;
  --s-diep-1:#BFD9E4; --s-diep-2:#E4D9C6; --s-diep-3:#CFE2EA; --s-diep-4:#F7F4EF;
  --w1:var(--s-koel-1); --w2:var(--s-koel-2); --w3:var(--s-koel-3); --w4:var(--s-koel-4);
  --wolk-kracht:.52;
  --schaduw:0 40px 80px -48px rgba(23,21,42,.42);
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--grond);color:var(--inkt);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background 1.4s ease,color 1.4s ease;
}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- het veld ----------
   Vast aan het venster, dus hij schuift niet mee en de wolken blijven staan
   terwijl de inhoud erlangs trekt. Dat is wat het gevoel van diepte geeft. */
.veld{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transition:opacity 1.2s ease}
.veld span{position:absolute;border-radius:50%;filter:blur(70px);
  opacity:var(--wolk-kracht);
  transition:background 1.6s ease,transform 1.6s cubic-bezier(.2,1,.3,1),opacity 1.6s ease;
  will-change:transform}
.veld span:nth-child(1){width:70vw;height:70vw;left:-18vw;top:-16vw;background:var(--w1);
  animation:drift1 34s ease-in-out infinite alternate}
.veld span:nth-child(2){width:62vw;height:62vw;right:-16vw;top:6vh;background:var(--w2);
  animation:drift2 44s ease-in-out infinite alternate}
.veld span:nth-child(3){width:80vw;height:80vw;left:6vw;bottom:-34vw;background:var(--w3);
  animation:drift3 52s ease-in-out infinite alternate}
.veld span:nth-child(4){width:46vw;height:46vw;right:4vw;bottom:-8vw;background:var(--w4);
  animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-11vw,10vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(7vw,-9vh,0) scale(1.12)}}

/* De korrel bovenop. Zonder dit zien grote verlopen er digitaal uit; met
   korrel zien ze eruit als licht op materiaal. */
.korrel{position:fixed;inset:-50%;z-index:9997;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korrelen 1s steps(3) infinite}
@keyframes korrelen{0%{transform:translate(0,0)}33%{transform:translate(-2%,1.5%)}66%{transform:translate(1.5%,-2%)}100%{transform:translate(0,0)}}

/* ---------- inhoud ligt op het veld ---------- */
.laag{position:relative;z-index:1}

/* Secties hebben geen rand en geen eigen kleur. Waar toch een scheiding
   nodig is, is het een verloop dat naar niets gaat in plaats van een lijn. */
.zacht{position:relative}
.zacht::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--grond) 70%,transparent));
  pointer-events:none}

/* glas: een vlak dat het veld doorlaat in plaats van het af te dekken */
.glas{background:var(--glas);border:1px solid var(--glas-rand);backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2)}

/* ---------- pagina's ---------- */
[data-pagina]{display:none}
[data-pagina].actief{display:block}

/* ---------- opkomen ---------- */
/* Geen blur meer in de opkomst. Een filter op een groot vlak dwingt de browser
   het elk beeldje opnieuw te tekenen, en dat is precies waar het schokkerig
   van wordt. Opkomen en opschuiven doet hetzelfde werk voor niets. */
.op{opacity:0;transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.2,1,.3,1),transform 1s cubic-bezier(.2,1,.3,1)}
.op.in{opacity:1;transform:none}

/* ---------- schakelaars ---------- */

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .op{opacity:1;transform:none;filter:none}
}