/* ===================================
   Page-to-page transitions
   Cross-document view transitions: going from one page of the site to another, the old page
   exits (lifts away and fades; an open menu leaves with it) and the new page settles in
   just behind it, while the header stays perfectly still.
   - CSS only; navigation is a normal full page load, so analytics (GTM page views), forms, the
     back button and caching behave exactly as before.
   - Both pages must opt in, so it only happens between theme pages (not PDFs, wp-admin or other
     sites). Browsers without support (Firefox for now) just navigate as usual.
   - The header is its own layer (view-transition-name) so it doesn't move with the page; it is
     the same on both pages, so it simply stays put (or eases between states, e.g. hidden/shown).
   - Kept short (about 0.5s in total): clicks are not delivered during a transition.
   - Off with prefers-reduced-motion.
=================================== */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
	.site-header {
		view-transition-name: site-header;
	}
	/* old page: lift away and fade, on ease-out so it starts leaving the instant you click */
	::view-transition-old(root) {
		animation: exc-page-out 180ms var(--ease-out) both;
	}
	/* new page: settle in from slightly below, straight away (a wait reads as a hang) */
	::view-transition-new(root) {
		animation: exc-page-in 320ms var(--ease-out) both;
	}
	::view-transition-group(site-header) {
		animation-duration: 420ms;
		animation-timing-function: var(--ease-in-out);
	}
	/* the persistent menu button is its own layer too: it stays put instead of fading
	   out with the old page and back in with the new one. */
	html.has-menu-toggle button.menu-toggle {
		view-transition-name: menu-toggle;
	}
	::view-transition-group(menu-toggle) {
		animation-duration: 420ms;
		animation-timing-function: var(--ease-in-out);
		z-index: 3; /* above everything, including the menu sheet sliding away */
	}
	/* no cross-fade: the new page's button is shown live from the first frame, starting in the old
	   page's state and morphing to its own (functions.php excentric_menu_toggle) */
	::view-transition-old(menu-toggle) {
		display: none;
	}
	::view-transition-new(menu-toggle) {
		animation: none;
	}
}
@keyframes exc-page-out {
	to {
		opacity: 0;
		transform: translate3d(0, -18px, 0);
	} /* no blur: a full-screen blur is the costliest thing to animate mid-navigation */
}
@keyframes exc-page-in {
	from {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
	}
}

/* ===================================
   Loading bar (assets/js/page-transitions.js): appears only if the next page takes longer than 250ms.
   It creeps toward 85% (it can't know the real progress of a page load) and the new page replaces
   it. Brand green, 2px, above everything.
=================================== */
html::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--darkgreen);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	pointer-events: none;
}
html.is-navigating::before {
	opacity: 1;
	animation: exc-loading-creep 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}
@keyframes exc-loading-creep {
	0% {
		transform: scaleX(0);
	}
	12% {
		transform: scaleX(0.35);
	}
	100% {
		transform: scaleX(0.85);
	}
}
@media (prefers-reduced-motion: reduce) {
	html.is-navigating::before {
		animation: none;
		transform: scaleX(0.6);
	}
}

/* Navigating from the open menu: the menu sheet closes (slides back up) as the new
   page comes in, instead of fading with the page. It is its own transition layer only while open. */
@media (prefers-reduced-motion: no-preference) {
	.full_screen_menu.open_m {
		view-transition-name: fs-menu;
	}
	::view-transition-old(fs-menu) {
		animation: exc-menu-close 480ms var(--ease-in-out) both;
	}
	::view-transition-group(fs-menu) {
		animation: none;
		z-index: 2; /* over the pages, under the persistent menu button */
	}
}
@keyframes exc-menu-close {
	to {
		transform: translate3d(0, -100%, 0);
	}
}