/* ---------------------------------------------------------------------------
 * Paginatransitie (zie assets/js/transitions.js): gebogen wipe die van
 * onder naar boven over het scherm schuift, in MobileXL-blauw met het witte
 * logo in het midden. De boven- en onderrand zijn halve ellipsen die met
 * scaleY het gebogen effect maken (Osmo-patroon).
 * ------------------------------------------------------------------------- */

.transitie {
	position: fixed;
	inset: 0;
	z-index: 400;
	overflow: clip;
	pointer-events: none;
}

.transitie__paneel {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--c-blauw);
	background-color: currentColor;
	visibility: hidden; /* gsap zet autoAlpha bij de eerste wipe */
}

.transitie__rand {
	position: absolute;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 0%;
	overflow: hidden;
	color: var(--c-blauw);
}

.transitie__rand--boven {
	bottom: calc(100% - 1px);
	transform-origin: bottom;
}

.transitie__rand--onder {
	top: calc(100% - 1px);
	justify-content: flex-end;
	transform-origin: top;
}

.transitie__cirkel {
	position: absolute;
	width: 125%;
	height: 500%;
	border-radius: 50%;
	background-color: currentColor;
}

.transitie__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130px;
	transform: translate(-50%, -50%);
	overflow: hidden;
	opacity: 0; /* gsap zet autoAlpha */
}

.transitie__logo img {
	display: block;
	width: 100%;
	height: auto;
}