/**
 * Magenta AI — page transitions
 */

.magenta-page-transition {
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
}

.magenta-page-transition.is-navigating {
	pointer-events: auto;
}

.magenta-page-transition__panel {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--magenta-accent-alt, #e6007e);
	will-change: transform;
}

.magenta-page-transition__panel--top {
	top: 0;
	transform: translate3d(0, -100%, 0);
}

.magenta-page-transition__panel--bottom {
	bottom: 0;
	transform: translate3d(0, 100%, 0);
}

html.magenta-page-transition-pending .magenta-page-transition__panel--top,
html.magenta-page-transition-pending .magenta-page-transition__panel--bottom,
html.magenta-page-transition-active .magenta-page-transition__panel--top,
html.magenta-page-transition-active .magenta-page-transition__panel--bottom {
	transform: translate3d(0, 0, 0);
}

html.magenta-page-transition-pending,
html.magenta-page-transition-active {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.magenta-page-transition {
		display: none;
	}
}