:root {
	--as-pt-out-duration: 350ms;
	--as-pt-in-duration: 300ms;
	--as-pt-distance: 16px;
	--as-pt-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Fade-out: dezelfde beweging als de bestaande reveals, maar omhoog weg. */
.as-pt-container.as-pt-leaving {
	opacity: 0;
	transform: translate3d(0, calc(var(--as-pt-distance) * -1), 0);
	transition:
		opacity var(--as-pt-out-duration) var(--as-pt-ease),
		transform var(--as-pt-out-duration) var(--as-pt-ease);
	pointer-events: none;
}

.as-pt-container.as-pt-entering {
	opacity: 0;
	transition: none;
}

.as-pt-container.as-pt-entered {
	opacity: 1;
	transition: opacity var(--as-pt-in-duration) var(--as-pt-ease);
}

html.as-pt-busy,
html.as-pt-busy * { cursor: progress; }

.as-pt-announcer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

[data-as-pt-focus]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.as-pt-container.as-pt-leaving,
	.as-pt-container.as-pt-entering,
	.as-pt-container.as-pt-entered {
		opacity: 1;
		transform: none;
		transition: none;
	}
}