/* Smooth Page Transitions
 * Cross-fade in/out. Uses opacity only (GPU-friendly, no layout shift).
 * Duration is exposed as a CSS variable so it's easy to tweak.
 */

:root {
	--spt-duration: 320ms;
	--spt-easing: ease;
}

/* Start hidden only when JS-enabled flag is present. If JS or CSS fail,
 * the page stays fully visible. */
html.spt-enabled body {
	opacity: 0;
}

/* Faded in (set by JS on load). */
html.spt-enabled.spt-ready body {
	opacity: 1;
	transition: opacity var(--spt-duration) var(--spt-easing);
}

/* Faded out (set by JS just before navigating away). */
html.spt-enabled.spt-leaving body {
	opacity: 0;
	transition: opacity var(--spt-duration) var(--spt-easing);
}

/* Accessibility: honour reduced-motion. No fade, always visible. */
@media (prefers-reduced-motion: reduce) {
	html.spt-enabled body,
	html.spt-enabled.spt-ready body,
	html.spt-enabled.spt-leaving body {
		opacity: 1 !important;
		transition: none !important;
	}
}