/* ===========================================================================
 * Pixelz - basisstyling: reset, typografie, layout, knoppen, header, footer,
 * formulieren, kaarten, reveals en de paginatransitie. Blokspecifieke
 * styling staat in assets/css/blocks/<blok>.css.
 * ========================================================================= */

/* --- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-hoogte) + 1rem);
}

/* Lenis regelt het scrollen; native smooth zou ermee vechten. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: clip;
}

body {
	margin: 0;
	background: var(--c-wit);
	color: var(--c-inkt);
	font-family: var(--font-basis);
	font-weight: var(--fw-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skiplink {
	position: absolute;
	top: -100px;
	left: var(--ruimte-4);
	z-index: 1000;
	padding: var(--ruimte-3) var(--ruimte-4);
	background: var(--c-inkt);
	color: var(--c-wit);
	border-radius: var(--radius-s);
}

.skiplink:focus {
	top: var(--ruimte-4);
}

/* --- Typografie ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
	margin: 0 0 var(--ruimte-4);
	font-family: var(--font-kop);
	font-weight: var(--fw-kop);
	line-height: var(--lh-kop);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Qudone heeft geen vette snede: vet in een kop blijft Regular. */
:is(h1, h2, h3, h4) :is(strong, b) {
	font-weight: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); letter-spacing: 0; }

p {
	margin: 0 0 var(--ruimte-4);
}

.accent {
	color: var(--c-accent);
}

.blok--donker .accent,
.blok--accent .accent {
	color: inherit;
	opacity: 0.7;
}

.blok__label {
	margin-bottom: var(--ruimte-3);
	color: var(--c-accent);
	font-size: var(--fs-label);
	font-weight: var(--fw-vet);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.blok__intro {
	font-size: var(--fs-intro);
	color: var(--c-inkt-zacht);
}

.blok--donker .blok__intro,
.blok--accent .blok__intro {
	color: inherit;
	opacity: 0.85;
}

/* Lopende tekst uit WYSIWYG-velden. */
.wysiwyg > :last-child {
	margin-bottom: 0;
}

.wysiwyg a {
	color: var(--c-accent);
	text-underline-offset: 0.2em;
}

.blok--donker .wysiwyg a,
.blok--accent .wysiwyg a {
	color: inherit;
}

.wysiwyg ul,
.wysiwyg ol {
	margin: 0 0 var(--ruimte-4);
	padding-left: 1.25em;
}

.wysiwyg li + li {
	margin-top: var(--ruimte-1);
}

.wysiwyg h2,
.wysiwyg h3 {
	margin-top: var(--ruimte-6);
}

.wysiwyg blockquote {
	margin: var(--ruimte-5) 0;
	padding-left: var(--ruimte-5);
	border-left: 3px solid var(--c-accent);
	font-size: var(--fs-intro);
}

.wysiwyg iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius-m);
}

.tabel-schuif,
.wysiwyg .wp-block-table {
	margin: 0 0 var(--ruimte-5);
	overflow-x: auto;
}

.wysiwyg table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-klein);
}

.wysiwyg th,
.wysiwyg td {
	padding: var(--ruimte-3) var(--ruimte-4);
	border-bottom: 1px solid var(--c-lijn);
	text-align: left;
	vertical-align: top;
}

.wysiwyg th {
	background: var(--c-grijs);
}

/* --- Layout ---------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--smal {
	max-width: calc(var(--container-smal) + 2 * var(--gutter));
}

.container--vol {
	max-width: none;
	padding-inline: 0;
}

.site-main {
	display: block;
	min-height: 60vh;
}

/* --- Blokwrapper (pixelz_blok_start) ---------------------------------------- */
.blok {
	position: relative;
}

.blok--licht { background: var(--c-wit); color: var(--c-inkt); }
.blok--grijs { background: var(--c-grijs); color: var(--c-inkt); }
.blok--donker { background: var(--c-inkt); color: var(--c-wit); }
.blok--accent { background: var(--c-accent); color: var(--c-wit); }

.ruimte-boven-geen { padding-top: 0; }
.ruimte-boven-klein { padding-top: var(--sectie-klein); }
.ruimte-boven-normaal { padding-top: var(--sectie-normaal); }
.ruimte-boven-groot { padding-top: var(--sectie-groot); }
.ruimte-onder-geen { padding-bottom: 0; }
.ruimte-onder-klein { padding-bottom: var(--sectie-klein); }
.ruimte-onder-normaal { padding-bottom: var(--sectie-normaal); }
.ruimte-onder-groot { padding-bottom: var(--sectie-groot); }

/* Twee lichte blokken achter elkaar: geen dubbele witruimte. */
.blok--licht + .blok--licht.ruimte-boven-normaal,
.blok--grijs + .blok--grijs.ruimte-boven-normaal {
	padding-top: 0;
}

.blok__kopgroep {
	max-width: 46rem;
	margin-bottom: var(--ruimte-7);
}

.blok__kopgroep > :last-child {
	margin-bottom: 0;
}

.blok__knoppen-onder {
	margin-top: var(--ruimte-7);
}

/* Verborgen blok, alleen zichtbaar voor ingelogde redacteuren. */
.pixelz-verborgen-blok {
	position: relative;
	outline: 3px dashed var(--c-waarschuwing);
	outline-offset: -3px;
}

.pixelz-verborgen-blok__melding {
	position: sticky;
	top: var(--header-hoogte);
	z-index: 5;
	margin: 0;
	padding: var(--ruimte-2) var(--ruimte-4);
	background: var(--c-waarschuwing);
	color: var(--c-inkt);
	font-size: var(--fs-klein);
	font-weight: var(--fw-medium);
	text-align: center;
}

.melding {
	padding: var(--ruimte-4);
	background: var(--c-accent-licht);
	border-radius: var(--radius-s);
}

/* --- Knoppen (pixelz_link met klasse knop) ---------------------------------- */
.knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-3);
	margin-top: var(--ruimte-6);
}

.knop {
	--knop-bg: var(--c-accent);
	--knop-tekst: var(--c-wit);
	--knop-rand: var(--knop-bg);
	--knop-hover-bg: var(--c-accent-donker);
	--knop-hover-tekst: var(--knop-tekst);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 var(--ruimte-5);
	border: 1.5px solid var(--knop-rand);
	border-radius: var(--radius-rond);
	background: var(--knop-bg);
	color: var(--knop-tekst);
	font-size: 0.9375rem;
	font-weight: var(--fw-vet);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duur-kort) ease, color var(--duur-kort) ease, border-color var(--duur-kort) ease;
}

.knop:hover {
	background: var(--knop-hover-bg);
	border-color: var(--knop-hover-bg);
	color: var(--knop-hover-tekst);
}

/* Label: bij hover "scramblet" de tekst met willekeurige tekens tot hij weer
   staat (modules/scramble.js). De tweede laag (aria-hidden, uit
   pixelz_knop_lagen) blijft verborgen; hij houdt de breedte vast. */
.knop__labels {
	display: inline-grid;
	overflow: hidden;
	height: 1.2em;
	line-height: 1.2;
	white-space: nowrap;
}

.knop__label {
	grid-area: 1 / 1;
}

.knop__label + .knop__label {
	visibility: hidden;
}

.knop--secundair {
	--knop-bg: var(--c-inkt);
	--knop-hover-bg: var(--c-inkt-zacht);
}

.knop--omlijnd {
	--knop-bg: transparent;
	--knop-tekst: var(--c-inkt);
	--knop-rand: var(--c-inkt);
	--knop-hover-bg: var(--c-inkt);
	--knop-hover-tekst: var(--c-wit);
}

.knop--omlijnd-licht {
	--knop-bg: transparent;
	--knop-tekst: var(--c-wit);
	--knop-rand: rgba(255, 255, 255, 0.6);
	--knop-hover-bg: var(--c-wit);
	--knop-hover-tekst: var(--c-inkt);
}

.knop--tekst {
	--knop-bg: transparent;
	--knop-rand: transparent;
	--knop-tekst: currentcolor;
	--knop-hover-bg: transparent;
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.blok--accent .knop--primair {
	--knop-bg: var(--c-wit);
	--knop-tekst: var(--c-accent);
	--knop-hover-bg: var(--c-accent-licht);
}

/* Primaire knop op donker (hero, menu, donkere blokken): donker glas met een
   merkrand van cyaan naar oranje en gloed in de kleuren van de logopixels.
   Bij hover wordt de gloed voller. */
:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair {
	--knop-tekst: var(--c-wit);
	--knop-hover-tekst: var(--c-wit);
	position: relative;
	isolation: isolate;
	border: 1px solid transparent;
	background:
		linear-gradient(rgba(6, 16, 16, 0.92), rgba(6, 16, 16, 0.92)) padding-box,
		linear-gradient(120deg, var(--c-pd-cyaan), rgba(255, 255, 255, 0.55) 45%, var(--c-pd-licht-oranje) 58%, var(--c-pd-oranje)) border-box;
	box-shadow: -8px -6px 26px -14px var(--c-pd-cyaan), 8px 6px 26px -14px var(--c-pd-oranje);
	transition: box-shadow var(--duur) var(--ease), transform var(--duur) var(--ease);
}

/* Binnengloed: zachte vlekken cyaan linksboven en oranje rechtsonder. */
:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(90% 140% at 0% 0%, rgba(46, 238, 224, 0.28), transparent 60%),
		radial-gradient(90% 140% at 100% 100%, rgba(252, 148, 37, 0.28), transparent 60%);
	opacity: 0.45;
	transition: opacity var(--duur) var(--ease);
}

:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair:hover,
:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair:focus-visible {
	background:
		linear-gradient(rgba(6, 16, 16, 0.92), rgba(6, 16, 16, 0.92)) padding-box,
		linear-gradient(120deg, var(--c-pd-cyaan), rgba(255, 255, 255, 0.55) 45%, var(--c-pd-licht-oranje) 58%, var(--c-pd-oranje)) border-box;
	box-shadow: -10px -8px 34px -12px var(--c-pd-cyaan), 10px 8px 34px -12px var(--c-pd-oranje);
	transform: translateY(-1px);
}

:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair:hover::after,
:is(.blok-pixel-hero, .twostep-nav, .blok--donker) .knop--primair:focus-visible::after {
	opacity: 1;
}

/* --- Header: zie assets/css/header.css (two-step navigatie) ---------------- */

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
	padding-top: var(--sectie-normaal);
	background: var(--c-inkt);
	color: var(--c-wit);
	font-size: var(--fs-klein);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer__raster {
	display: grid;
	gap: var(--ruimte-7);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.site-footer__merk {
	grid-column: span 2;
	max-width: 24rem;
}

.site-footer__logo img {
	max-height: 2.25rem;
	width: auto;
	margin-bottom: var(--ruimte-4);
}

.site-footer__tekst {
	opacity: 0.75;
}

.site-footer__titel {
	margin-bottom: var(--ruimte-3);
	font-weight: var(--fw-vet);
}

.site-footer__links,
.site-footer__onderlinks,
.socials {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links li + li {
	margin-top: var(--ruimte-2);
}

.site-footer address {
	font-style: normal;
	opacity: 0.85;
}

.socials {
	display: flex;
	gap: var(--ruimte-3);
	margin-top: var(--ruimte-4);
}

.socials .icoon svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentcolor;
}

.site-footer__onder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ruimte-4);
	margin-top: var(--sectie-klein);
	padding-block: var(--ruimte-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	opacity: 0.7;
}

.site-footer__onder p {
	margin: 0;
}

.site-footer__onderlinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-5);
}

@media (max-width: 640px) {
	.site-footer__merk {
		grid-column: auto;
	}
}

/* --- Kaarten (template-parts/kaarten) --------------------------------------- */
.kaarten {
	display: grid;
	gap: var(--ruimte-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.kaarten--2,
	.kaarten--3,
	.kaarten--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kaarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--c-wit);
	border: 1px solid var(--c-lijn);
	border-radius: var(--radius-l);
	color: var(--c-inkt);
	transition: transform var(--duur) var(--ease-uit), box-shadow var(--duur) ease;
}

.kaart:hover {
	transform: translateY(-4px);
	box-shadow: var(--schaduw);
}

.kaart__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.kaart__beeld {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-grijs);
}

.kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-uit);
}

.kaart:hover .kaart__beeld img {
	transform: scale(1.04);
}

.kaart__inhoud,
.kaart--dienst .kaart__link {
	padding: var(--ruimte-5);
}

.kaart__titel {
	margin-bottom: var(--ruimte-2);
	font-size: var(--fs-h3);
}

.kaart__tekst {
	color: var(--c-inkt-zacht);
	font-size: var(--fs-klein);
}

.kaart__datum {
	display: block;
	margin-bottom: var(--ruimte-2);
	color: var(--c-gedempt);
	font-size: var(--fs-label);
}

.kaart__icoon {
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--ruimte-5);
	object-fit: contain;
}

.kaart__meer {
	margin-top: auto;
	padding-top: var(--ruimte-4);
	color: var(--c-accent);
	font-weight: var(--fw-vet);
}

.labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2);
	margin: 0 0 var(--ruimte-3);
	padding: 0;
	list-style: none;
}

.label {
	padding: 0.2rem 0.65rem;
	background: var(--c-accent-licht);
	color: var(--c-accent-donker);
	border-radius: var(--radius-rond);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
}

/* --- Archieven, filter, paginering, kruimelpad ------------------------------ */
.filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2);
	margin-bottom: var(--ruimte-6);
}

.filter__optie {
	padding: var(--ruimte-2) var(--ruimte-4);
	border: 1px solid var(--c-lijn);
	border-radius: var(--radius-rond);
	font-size: var(--fs-klein);
	text-decoration: none;
}

.filter__optie.is-actief,
.filter__optie:hover {
	background: var(--c-inkt);
	border-color: var(--c-inkt);
	color: var(--c-wit);
}

.paginering ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2);
	margin: var(--ruimte-7) 0 0;
	padding: 0;
	list-style: none;
}

.paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--ruimte-3);
	border: 1px solid var(--c-lijn);
	border-radius: var(--radius-rond);
	text-decoration: none;
}

.paginering .current {
	background: var(--c-inkt);
	border-color: var(--c-inkt);
	color: var(--c-wit);
}

.kruimelpad {
	margin-bottom: var(--ruimte-5);
	color: var(--c-gedempt);
	font-size: var(--fs-klein);
}

.kruimelpad a {
	text-decoration: none;
}

.kruimelpad a:hover {
	color: var(--c-accent);
}

.kruimelpad .separator {
	margin-inline: var(--ruimte-2);
}

/* --- Artikel (single.php) --------------------------------------------------- */
.artikel__meta {
	display: flex;
	gap: var(--ruimte-2);
	color: var(--c-gedempt);
	font-size: var(--fs-klein);
}

.artikel__beeld img {
	width: 100%;
	border-radius: var(--radius-l);
}

.artikel__inhoud {
	padding-top: var(--sectie-klein);
	font-size: 1.125rem;
}

.artikel__inhoud img {
	border-radius: var(--radius-m);
}

/* --- Gravity Forms (klassiek gravity-theme) --------------------------------- */
.gform_wrapper.gravity-theme .gfield_label {
	margin-bottom: var(--ruimte-2);
	font-size: var(--fs-klein);
	font-weight: var(--fw-medium);
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--c-lijn);
	border-radius: var(--radius-s);
	background: var(--c-wit);
	color: var(--c-inkt);
	font: inherit;
	transition: border-color var(--duur-kort) ease, box-shadow var(--duur-kort) ease;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-licht);
	outline: none;
}

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--c-fout);
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: var(--ruimte-2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-fout);
	font-size: var(--fs-klein);
}

.gform_wrapper.gravity-theme .gform_submission_error {
	color: var(--c-fout);
	font-size: var(--fs-klein);
	font-weight: var(--fw-medium);
}

.gform_wrapper.gravity-theme .gform_footer {
	margin-top: var(--ruimte-5);
	padding: 0;
}

.gform_confirmation_message {
	padding: var(--ruimte-5);
	background: var(--c-accent-licht);
	border-radius: var(--radius-m);
}

/* --- Reveals (modules/reveals.js) ------------------------------------------ */
/* Alleen verbergen als JS draait; html.is-static (blokvoorbeeld) en
   reduced motion tonen alles direct in de eindstand. */
.js:not(.is-static) [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--ease-uit), transform 0.9s var(--ease-uit);
	transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

.js:not(.is-static) [data-reveal].is-zichtbaar {
	opacity: 1;
	transform: none;
}

/* Het eerste blok staat direct in beeld (LCP): nooit verborgen laten starten. */
.js .site-main > .blok:first-child [data-reveal],
.js .site-main > .pixelz-verborgen-blok:first-child [data-reveal],
.js .artikel > .blok:first-child [data-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Paginatransitie (core/app.js) ----------------------------------------- */
.transitie {
	position: fixed;
	inset: 0;
	z-index: 1000;
	pointer-events: none;
}

/* De pixelgolf (modules/transitie.js) is een masker op de pagina zelf; dit
   canvas tekent alleen de gloeiende pixels aan de voorkant van de golf. Het
   staat direct onder <html>. Tijdens de golf vangt de laag kliks af. */
.transitie__doek {
	position: absolute;
	inset: 0;
	display: block;
}

.transitie.is-actief {
	pointer-events: auto;
}

/* Onder de pagina: wat je door de gaten ziet als een pagina in pixels
   wegvalt (taalwissel). */
html {
	background: var(--c-pd-zwart);
}

/* --- Het raster: achtergrond van de hele site (modules/raster.js) -----------
   Vast achter alle inhoud. Body en de blokken zonder eigen vlak (pixel hero,
   logowand, donker) zijn transparant, zodat het raster overal doorloopt.
   Zonder WebGL tekent CSS een nevel en een stippenraster; met WebGL
   (html.heeft-raster) ligt het canvas eroverheen. Het vignet en de korrel
   liggen over beide. Het blokvoorbeeld heeft geen .site-raster en houdt de
   gewone achtergronden. */
.site-raster {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 0.06) 0.6px, transparent 1.2px) 0 0 / 6px 6px,
		radial-gradient(40% 34% at 30% 35%, rgba(46, 238, 224, 0.08), transparent 70%),
		radial-gradient(36% 32% at 72% 66%, rgba(252, 148, 37, 0.08), transparent 70%),
		var(--c-pd-zwart);
}

.site-raster canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.site-raster::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.5'/%3E%3C/svg%3E");
	opacity: 0.22;
	mix-blend-mode: overlay;
}

body:has(> .site-raster),
body:has(> .site-raster) :is(.blok-pixel-hero, .blok-logos--wand, .blok--donker) {
	background: transparent;
}

/* Na een volledige paginalading met golf (taalwissel): onzichtbaar starten
   tot het script de pagina door de pixels laat verschijnen. Vangnet: na 3 s
   altijd zichtbaar. */
html.transitie-binnen body {
	opacity: 0;
	animation: transitie-vangnet 0s linear 3s forwards;
}

@keyframes transitie-vangnet {
	to { opacity: 1; }
}

.is-transitioning,
.is-transitioning * {
	cursor: progress;
}