/* Globale basis die theme.json niet kan uitdrukken. */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp--custom--header-hoogte) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

::selection {
	background: var(--wp--preset--color--lime-wash-2);
	color: var(--wp--preset--color--ink);
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--lime);
	outline-offset: 3px;
	border-radius: 6px;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
	letter-spacing: -0.015em;
}

h1.wp-block-heading,
.wp-block-post-title:where(h1) {
	letter-spacing: -0.03em;
}

/* Header, main en footer sluiten naadloos op elkaar aan. */
.wp-site-blocks > * {
	margin-block: 0;
}

.sc-main {
	margin-block: 0;
}

.sc-main > .alignfull {
	margin-block: 0;
}

/* Markeerstreep: het potlood uit het logo onder een kernwoord. */
mark.sc-mark {
	position: relative;
	z-index: 0;
	background: none;
	color: inherit;
	white-space: nowrap;
}

mark.sc-mark::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -3%;
	right: -3%;
	bottom: -0.1em;
	height: 0.4em;
	background: var(--wp--preset--color--lime);
	opacity: 0.75;
	-webkit-mask: url("../images/streep.svg") no-repeat center / 100% 100%;
	mask: url("../images/streep.svg") no-repeat center / 100% 100%;
	animation: sc-streep 1.1s 0.35s cubic-bezier(.6, 0, .2, 1) backwards;
}

@keyframes sc-streep {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Beweging bij het laden ----------
   Alleen met JavaScript (html.sc-js) en zonder "beweging beperken": blokken buiten beeld
   krijgen .sc-in-wacht en komen zacht binnen zodra ze in beeld scrollen (.is-in).
   Zonder JavaScript is alles meteen zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
	.sc-js .sc-in-wacht {
		opacity: 0;
		transform: translateY(2.5rem) scale(0.98);
	}

	.sc-js .sc-in-wacht.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.6s ease var(--sc-vertraging, 0s),
			transform 0.8s var(--wp--custom--motion--veer) var(--sc-vertraging, 0s);
	}

	/* Hero: tekst na elkaar, scherm schuift in, melding springt erbij. */
	.sc-js .sc-hero__tekst > * {
		animation: sc-hero-in 0.7s cubic-bezier(.2, .8, .2, 1) backwards;
	}

	.sc-js .sc-hero__tekst > :nth-child(2) { animation-delay: 0.08s; }
	.sc-js .sc-hero__tekst > :nth-child(3) { animation-delay: 0.16s; }
	.sc-js .sc-hero__tekst > :nth-child(4) { animation-delay: 0.24s; }
	.sc-js .sc-hero__tekst > :nth-child(5) { animation-delay: 0.32s; }

	.sc-js .sc-hero__beeld .sc-mockup {
		animation: sc-scherm-in 0.9s 0.2s cubic-bezier(.2, .8, .2, 1) backwards;
	}

	.sc-js .sc-hero__beeld .sc-float {
		animation: sc-pop 0.5s 0.9s var(--wp--custom--motion--veer) backwards, sc-dobber 6s 1.4s ease-in-out infinite;
	}
}

@keyframes sc-hero-in {
	from { opacity: 0; transform: translateY(1.5rem); }
}

@keyframes sc-scherm-in {
	from { opacity: 0; transform: translateX(3rem) rotate(1.5deg); }
}

@keyframes sc-pop {
	from { opacity: 0; transform: scale(0.8) translateY(0.75rem); }
}

/* Animaties in blokken die nog moeten binnenkomen, starten pas als ze in beeld zijn:
   de markeerstreep onder een kop en de staafjes en balken in de productschermen. */
@media (prefers-reduced-motion: no-preference) {
	.sc-js .sc-in-wacht:not(.is-in) mark.sc-mark::after,
	.sc-js .sc-in-wacht:not(.is-in) .sc-mockup *,
	.sc-js .sc-in-wacht:not(.is-in) .sc-mockup *::before,
	.sc-js .sc-in-wacht:not(.is-in) .sc-mockup *::after {
		animation-play-state: paused;
	}

	.sc-js .sc-in-wacht.is-in mark.sc-mark::after {
		animation-delay: calc(var(--sc-vertraging, 0s) + 0.35s);
	}
}