/**
 * Page transitions, phase 1: a soft cross-fade between pages, the header held
 * still. Loaded only on pages that take part (vd-page-transitions.php has the
 * list and the why); a transition runs only when both pages load this file.
 *
 * The old page fades out quickly and the new one fades in with a slight rise,
 * well under 400ms, so a slow uncached page never feels like it is waiting on
 * the animation.
 */

@view-transition {
	navigation: auto;
}

/* The header is its own layer, swapped at once rather than faded, so it does
   not flicker between two pages that share it. Only while a transition runs:
   a named element stops a blur inside it seeing the page behind, and the
   header's glass is a backdrop blur, so naming it all the time left the
   header without its glass. */
html:active-view-transition #brx-header {
	view-transition-name: vd-header;
}

::view-transition-group(vd-header),
::view-transition-old(vd-header),
::view-transition-new(vd-header) {
	animation: none;
}

::view-transition-old(vd-header) {
	display: none;
}

/* The moment a link is followed (vd-page-transitions.js): the content dims and
   drifts up while the next page loads, so the click answers at once. */
#brx-content {
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.vd-page-leaving #brx-content {
	opacity: 0.25;
	transform: translateY(-1.2rem);
}

::view-transition-old(root) {
	animation: vd-page-out 200ms ease-in both;
}

::view-transition-new(root) {
	animation: vd-page-in 450ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

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

@keyframes vd-page-in {
	from {
		opacity: 0;
		transform: translateY(2.4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	#brx-content {
		transition: none;
	}

	.vd-page-leaving #brx-content {
		opacity: 1;
		transform: none;
	}
}