@keyframes kop-in {
	from {
		opacity: 0;
		transform: translateY(24px);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes tekst-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes stempel-in {
	0% {
		opacity: 0;
		transform: scale(2.2) rotate(-14deg);
	}
	60% {
		opacity: 1;
		transform: scale(0.94) rotate(-1deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(-2deg);
	}
}

@keyframes plop {
	0% { transform: scale(1); }
	40% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

@keyframes flakker {
	0%, 100% { opacity: 1; }
	12% { opacity: 0.86; }
	24% { opacity: 0.98; }
	48% { opacity: 0.9; }
	70% { opacity: 1; }
	82% { opacity: 0.93; }
}

@keyframes zweef {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes schud {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px) rotate(-2deg); }
	40% { transform: translateX(6px) rotate(2deg); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(3px); }
}

@keyframes pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(230, 181, 98, 0.55); }
	100% { box-shadow: 0 0 0 18px rgba(230, 181, 98, 0); }
}

@keyframes band {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes scroll-punt {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

@keyframes touw-teken {
	to { stroke-dashoffset: 0; }
}

.js [data-onthul] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 800ms var(--ease-uit) var(--vertraging, 0ms), transform 900ms var(--ease-uit) var(--vertraging, 0ms);
}

.js [data-onthul="titel"] {
	opacity: 0;
	transform: translateY(0.45em) skewY(2deg);
	filter: blur(6px);
	letter-spacing: 0.06em;
	transition: opacity 900ms var(--ease-uit) var(--vertraging, 0ms), transform 1000ms var(--ease-uit) var(--vertraging, 0ms), filter 900ms var(--ease-uit) var(--vertraging, 0ms), letter-spacing 1200ms var(--ease-uit) var(--vertraging, 0ms);
}

.js [data-onthul="briefje"] {
	transform: translateY(60px) rotate(calc(var(--hoek, 0deg) * 4)) scale(0.92);
	transition: opacity 700ms var(--ease-uit) var(--vertraging, 0ms), transform 900ms var(--ease-veer) var(--vertraging, 0ms);
}

.js [data-onthul="polaroid"] {
	transform: translateY(40px) rotate(12deg) scale(0.9);
	transition: opacity 800ms var(--ease-uit), transform 1100ms var(--ease-veer);
}

.js [data-onthul].is-zichtbaar {
	opacity: 1;
	transform: none;
}

.js [data-onthul="titel"].is-zichtbaar {
	filter: none;
	letter-spacing: 0.005em;
}

.js [data-onthul="briefje"].is-zichtbaar {
	transform: rotate(var(--hoek, -1deg));
}

.js [data-onthul="polaroid"].is-zichtbaar {
	transform: rotate(3deg);
}

.js .sectie {
	--sectie-schaal: 1;
}

.paneel-wissel {
	view-transition-name: paneel;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 450ms;
	animation-timing-function: var(--ease-uit);
}

@media (prefers-reduced-motion: reduce) {
	.js [data-onthul],
	.js [data-onthul="titel"],
	.js [data-onthul="briefje"],
	.js [data-onthul="polaroid"] {
		opacity: 1;
		transform: none;
		filter: none;
	}
}