/*
 * OLEA cross-document page transitions.
 *
 * Uses the browser's native cross-document View Transitions API.
 * The old document moves to the left while the new document enters
 * from the right. Browsers without support keep normal navigation.
 */

@view-transition {
	navigation: auto;
}

@keyframes olea-page-transition-old-to-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-100vw, 0, 0);
	}
}

@keyframes olea-page-transition-new-from-right {
	from {
		transform: translate3d(100vw, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

::view-transition-group(root) {
	animation-duration: 480ms;
	animation-timing-function:
		cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
	mix-blend-mode: normal;
	backface-visibility: hidden;
}

::view-transition-old(root) {
	animation-name:
		olea-page-transition-old-to-left;
}

::view-transition-new(root) {
	animation-name:
		olea-page-transition-new-from-right;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(root) {
		animation-duration: 1ms;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-name: none;
	}
}