/**
 * Same-origin cross-document view transitions (MPA).
 * CSS-only — no JS library.
 *
 * Strategy: keep header/footer visually pinned; crossfade #main only.
 * Root-only fades feel choppy because chrome fades with the page.
 */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

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

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

	#main {
		view-transition-name: main-content;
	}

	/* Chrome stays put — no morph / no fade */
	::view-transition-group(site-header),
	::view-transition-group(site-footer) {
		animation: none;
	}

	::view-transition-old(site-header),
	::view-transition-new(site-header),
	::view-transition-old(site-footer),
	::view-transition-new(site-footer) {
		animation: none;
	}

	/* Soften / kill the default full-page root flash */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
		mix-blend-mode: normal;
	}

	/* Only the page body crossfades */
	::view-transition-old(main-content),
	::view-transition-new(main-content) {
		animation-duration: 0.32s;
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	::view-transition-old(main-content) {
		animation-name: wbj-vt-fade-out;
	}

	::view-transition-new(main-content) {
		animation-name: wbj-vt-fade-in;
	}
}

@keyframes wbj-vt-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes wbj-vt-fade-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-footer,
	#main {
		view-transition-name: none;
	}
}