/*
 * Page transitions (cross-document View Transitions, no library): the new
 * page slides up from the bottom over the old one, which stays still, and
 * the header keeps its place on top (page-transition.js names it
 * "site-header" during a transition only: a named element is a backdrop
 * root, which would switch its blur off). Back (type "back", added by
 * page-transition.js) slides the current page down and shows the previous
 * one underneath. Only page navigations get the type "page", so the
 * Experiences card swap (a same-document transition) is not touched. The
 * first page of a visit has no transition; browsers without cross-document
 * View Transitions load the page as usual.
 */

@view-transition {
	navigation: auto;
	types: page;
}

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

:root {
	--page-slide-duration: 0.75s;
	--page-slide-ease: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out: slows down as it reaches the top */
}

:root:active-view-transition-type(page)::view-transition-group(*) {
	animation-duration: var(--page-slide-duration);
}

:root:active-view-transition-type(page)::view-transition-old(root) {
	animation: none;
}

:root:active-view-transition-type(page)::view-transition-new(root) {
	animation: cliff-page-in var(--page-slide-duration) var(--page-slide-ease) both;
}

:root:active-view-transition-type(back)::view-transition-old(root) {
	z-index: 1;
	animation: cliff-page-out var(--page-slide-duration) var(--page-slide-ease) both;
}

:root:active-view-transition-type(back)::view-transition-new(root) {
	animation: none;
}

@keyframes cliff-page-in {
	from {
		transform: translateY(100%);
	}
}

@keyframes cliff-page-out {
	to {
		transform: translateY(100%);
	}
}

/*
 * The header's blur during a page transition. The named header is a backdrop
 * root and cannot blur, so page-transition.js names its four blur layers too
 * (site-header-blur-1 to -4). Their groups sit between the moving pages and
 * the header and blur the pages under them, with the same strengths and fades
 * as the layers in the page (header.css).
 */
::view-transition-group(site-header) {
	z-index: 2;
}

::view-transition-group(site-header-blur-1),
::view-transition-group(site-header-blur-2),
::view-transition-group(site-header-blur-3),
::view-transition-group(site-header-blur-4) {
	z-index: 1;
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	-webkit-mask-image: var(--fade);
	mask-image: var(--fade);
}

::view-transition-group(site-header-blur-1) {
	--blur: var(--header-blur-1);
	--fade: var(--header-fade-1);
}

::view-transition-group(site-header-blur-2) {
	--blur: var(--header-blur-2);
	--fade: var(--header-fade-2);
}

::view-transition-group(site-header-blur-3) {
	--blur: var(--header-blur-3);
	--fade: var(--header-fade-3);
}

::view-transition-group(site-header-blur-4) {
	--blur: var(--header-blur-4);
	--fade: var(--header-fade-4);
}