/**
 * Cross-document (multi-page) View Transitions — a subtle page-to-page cross-fade.
 *
 * Enabled via Global Settings → Advanced → "Smooth page transitions". Loaded as a
 * standalone stylesheet (not part of the compiled bundle) so it can be toggled on
 * and off without a rebuild — functions.php enqueues it only when the option is on.
 *
 * Progressive enhancement: only same-origin navigations transition, and only in
 * browsers that support the API (Chromium + Safari 18.2+). Everything else — e.g.
 * Firefox today — simply navigates the normal way. Nothing breaks either way.
 */

/* Opt this multi-page site in. Both the page you leave and the page you arrive on
   carry this rule (it's enqueued site-wide), which is what a cross-document
   transition requires. */
@view-transition {
	navigation: auto;
}

/* Keep it understated and on-brand: a short cross-fade of the page as a whole. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.28s;
	animation-timing-function: ease;
}

/* Hold the fixed header rock-steady during the transition. It's identical from page
   to page, so cross-fading it would only read as a flicker; naming it gives it its
   own transition group, and disabling that group's animation keeps it in place. */
.main-header {
	view-transition-name: mh-header;
}

::view-transition-group(mh-header) {
	animation: none;
}

/* Accessibility — honour a reduced-motion preference: cut straight to the new page
   with no animation (the navigation still works, it just doesn't move). */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}