@media (prefers-reduced-motion: no-preference) {
	html:not(.pt-ready):not(.pt-leaving) body {
		opacity: 0;
	}

	html.pt-ready body {
		animation: pt-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	html.pt-leaving body {
		animation: pt-leave 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
		pointer-events: none;
	}

	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: pt-leave 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	::view-transition-new(root) {
		animation: pt-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes pt-enter {
	from {
		opacity: 0;
		transform: translateX(1.75rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pt-leave {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(-1.75rem);
	}
}