/*
 * FPS Transition Sync — base styles.
 * Public hooks: see README.md ("Header integration").
 *
 * Root custom properties (set on <html>):
 *   --fps-transition-progress  eased progress 0..1 (0 at rest)
 *   --fps-current-bg / --fps-next-bg
 *   --fps-current-accent / --fps-next-accent
 *   --fps-bg / --fps-accent    interpolated values (equal to current at rest)
 *   --fps-dir                  1 (forward) or -1 (backward), only while transitioning
 */

:root {
	--fps-transition-progress: 0;
}

[data-fps-section] {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	will-change: auto;
}

[data-fps-section].is-active {
	visibility: visible;
	pointer-events: auto;
}

/* Both sections are visible and animated while a transition runs. */
body.is-transitioning [data-fps-section].is-leaving,
body.is-transitioning [data-fps-section].is-entering {
	visibility: visible;
	will-change: transform;
}

body.is-transitioning [data-fps-section] {
	pointer-events: none;
}

/* Outgoing slides away, incoming slides in; direction via --fps-dir. */
[data-fps-section].is-leaving {
	z-index: 1;
	transform: translate3d(0, calc(var(--fps-transition-progress) * var(--fps-dir, 1) * -100%), 0);
}

[data-fps-section].is-entering {
	z-index: 2;
	transform: translate3d(0, calc((1 - var(--fps-transition-progress)) * var(--fps-dir, 1) * 100%), 0);
}

/* Optional: sections that want the interpolated colour instead of their own. */
.fps-use-interpolated-bg {
	background-color: var(--fps-bg);
}

@media (prefers-reduced-motion: reduce) {
	[data-fps-section].is-leaving,
	[data-fps-section].is-entering {
		transform: none;
	}
}