/**
 * Page to page transitions, drawn by the View Transitions plugin.
 *
 * The plugin crossfades the page. Named elements are matched across the two
 * pages and animated on their own, so the header and the footer, with its
 * Warli band, hold still while the content between them fades.
 *
 * The plugin names the header and main itself, but only on some page types
 * and only for the length of a transition. The header takes the same name
 * here, on the element the plugin's header selector points at, so the two
 * never clash.
 */
.site-header {
	view-transition-name: header;
}

.site-footer {
	view-transition-name: footer;
}

/* Main and the parts of a post stay in the page's crossfade. The plugin's
   script names them on posts, the front page and archives, and a named main or
   post body is as tall as the page, so it slid in from wherever the old page
   was scrolled to: a sweep of thousands of pixels in a third of a second.
   The important flag outranks the inline name that script sets. */
main,
.wp-block-post-title,
.wp-post-image,
.wp-block-post-content {
	view-transition-name: none !important;
}

/* Under reduced motion the page changes at once. The plugin already drops its
   own animation there, but the browser's default crossfade and the moves of
   named elements would still run, so transitions are switched off entirely.
   This file loads after the plugin's styles, so this rule wins. */
@media ( prefers-reduced-motion: reduce ) {
	@view-transition {
		navigation: none;
	}
}