/* ==========================================================
Three.js-achtergrond voor de pagina Website op maat.
Alleen voor de achtergrond. De rest staat in website-custom.css.
========================================================== */
/* Voorkomt een horizontale scrollbalk door de volle breedte van de canvas. */
body:has(.website-bg) {
overflow-x: clip;
}
/* Het tekenvlak blijft in beeld staan terwijl de inhoud eroverheen scrolt,
en loopt over de volle breedte van het scherm, ook buiten de container. */
.website-bg {
position: sticky;
top: 0;
display: block;
width: 100vw;
height: 100vh;
margin-bottom: -100vh;
margin-left: calc(50% - 50vw);
pointer-events: none;
/* Zachte overgang aan de bovenkant, zodat er geen harde rand ontstaat. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
}
/* Zorgt dat alle inhoud boven de achtergrond ligt. */
.website-page > :not(.website-bg) {
position: relative;
}
/* Kop boven de stappen van de werkwijze. */
.website-process-title {
margin-top: 64px;
}
/* Geen WebGL beschikbaar: het script verbergt de canvas. (Bij "minder beweging" tekent het script één stilstaand beeld.) */ .website-bg[hidden] { display: none; }