/**
 * Same-origin page crossfades via the CSS View Transitions API.
 * Unsupported browsers keep normal instant navigations.
 */

@view-transition {
	navigation: auto;
}

@keyframes airnexis-page-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes airnexis-page-fade-in {
	from {
		opacity: 0;
	}
}

/*
 * UA stylesheet morphs the root group's box between pages. Different
 * document heights then nudge the header/hello bar a few pixels even
 * while old/new only fade. Keep the group still; fade the snapshots.
 */
::view-transition-group(root) {
	animation: none;
}

::view-transition-old(root) {
	animation: 0.25s ease both airnexis-page-fade-out;
}

::view-transition-new(root) {
	animation: 0.25s ease both airnexis-page-fade-in;
}

/*
 * Header and hello bar use unique view-transition names so they
 * stay still while root crossfades. Duplicate names abort the transition.
 */
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-group(hello-bar),
::view-transition-old(hello-bar),
::view-transition-new(hello-bar) {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}