/*
 * Page transitions: cross-document View Transitions. Reusable, no site selectors.
 *   - New page wipes in from the right (back navigation: from the left); old page drifts and dims.
 *   - Mark chrome that must not animate with  data-vt="persist"  (e.g. the site header).
 *   - Tune with --vt-dur, --vt-ease, --vt-dim, --vt-shift (tokens.css).
 * Browsers without support navigate normally. Reduced motion: no transition.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	[data-vt="persist"] { view-transition-name: vt-persist; }
	::view-transition-group(vt-persist) { animation-duration: 0s; }

	::view-transition-old(root) { animation: vt-out var(--vt-dur) var(--vt-ease) both; }
	::view-transition-new(root) { animation: vt-in var(--vt-dur) var(--vt-ease) both; }
	@keyframes vt-out { to { transform: translateX(calc(var(--vt-shift) * -1)); opacity: var(--vt-dim); } }
	@keyframes vt-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }

	/* browser back button: the same wipe, mirrored */
	html[data-vt-dir="back"]::view-transition-old(root) { animation-name: vt-out-back; }
	html[data-vt-dir="back"]::view-transition-new(root) { animation-name: vt-in-back; }
	@keyframes vt-out-back { to { transform: translateX(var(--vt-shift)); opacity: var(--vt-dim); } }
	@keyframes vt-in-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
}