html[data-pending-transition]::before {
	content: '';
	position: fixed;
	inset: 0;
	background: black url(loading.gif) no-repeat center center / 2em 2em;
	z-index: Infinity;
}

@keyframes fade-out {
	to { opacity: 0; }
}
@keyframes fade-in {
	from { opacity: 0; }
}
@keyframes slide-up {
	from { translate: 0 100vh; }
}
@keyframes slide-down {
	to { translate: 0 100vh; }
}

::view-transition {
	background: black url(loading.gif) no-repeat center center / 2em 2em;
}

:active-view-transition-type(outgoing) {
	&::view-transition-old(root) {
		animation: none;
	}
	&::view-transition-new(root) {
		display: none;
	}
}
:active-view-transition-type(slide-down) {
	&::view-transition-group(root) {
		animation: slide-down 0.5s forwards;
	}
}
:active-view-transition-type(fade-out) {
	&::view-transition-group(root) {
		animation: fade-out 0.5s forwards;
	}
}

:active-view-transition-type(incoming) {
	&::view-transition-old(root) {
		display: none;
	}
	&::view-transition-new(root) {
		animation: none;
	}
}
:active-view-transition-type(slide-up) {
	&::view-transition-group(root) {
		animation: slide-up 0.5s forwards;
	}
}
:active-view-transition-type(fade-in) {
	&::view-transition-group(root) {
		animation: fade-in 0.5s forwards;
	}
}


/* Warnings and Preferences */
@layer warnings {
	@media (prefers-reduced-motion: reduce) {
		::view-transition-group(page) {
			animation-duration: 0s;
		}

		.warning[data-reason="prefers-reduced-motion"] {
			display: block;
		}
	}

	.warning[data-reason="cross-document-view-transitions"] {
		/* JS will show this warning when needed */
	}

	.warning[data-reason="navigation-api"] {
		/* JS will show this warning when needed */
	}

	@supports not (view-transition-name: works) {
		.warning[data-reason="same-document-view-transitions"] {
			display: block;
		}
	}

	.warnings {
		position: fixed;
		bottom: 1em;
		left: 1em;
		right: 1em;
		view-transition-name: warning; /* Don’t transition this with the rest of the stuff */
	}
}

@layer warning {
	.warning {
		box-sizing: border-box;
		padding: 1em;
		margin: 1em 0;
		border: 1px solid #ccc;
		background: rgba(255 255 205 / 0.8);
		display: none;
	}

	.warning > :first-child {
		margin-top: 0;
	}

	.warning > :last-child {
		margin-bottom: 0;
	}

	.warning a {
		color: blue;
	}
	.warning--info {
		border: 1px solid #123456;
		background: rgb(205 230 255 / 0.8);
	}
	.warning--alarm {
		border: 1px solid red;
		background: #ff000010;
	}
}