/**
 * VATax BD — page transitions.
 *
 * Cross-document View Transitions where the browser supports them, with
 * a veil fallback everywhere else. Both are disabled under reduced
 * motion, where an instant page swap is the correct behaviour.
 *
 * @package VATax_BD
 */

/* ------------------------------------------------------------------ *
 * 1. Cross-document View Transitions
 * ------------------------------------------------------------------ */

@view-transition {
	navigation: auto;
}

/* The chrome is the same object on both pages, so it should not
   cross-fade with the content — it stays put while the page changes
   underneath it. */
.vx-header,
.vx-bar,
.vx-atmosphere,
.vx-progress {
	view-transition-name: none;
}

::view-transition-old(root) {
	animation: vx-vt-out 260ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: vx-vt-in 420ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes vx-vt-out {
	to {
		opacity: 0;
		transform: translateY(-14px);
	}
}

@keyframes vx-vt-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

/* ------------------------------------------------------------------ *
 * 2. Veil fallback
 * ------------------------------------------------------------------ */

.vx-veil {
	position: fixed;
	inset: 0;
	z-index: 95;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 46%, #fff 0%, rgba(255, 255, 255, 0.94) 45%, rgba(255, 255, 255, 0) 78%),
		var(--vx-lilac, #ece8f2);
	transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}

html.vx-leaving .vx-veil {
	opacity: 1;
}

/* Content lifts slightly as it leaves, matching the View Transition path. */
html.vx-leaving .vx-main,
html.vx-leaving .vx-pagehero {
	transition: opacity 260ms ease, transform 260ms ease;
	opacity: 0.35;
	transform: translateY(-10px);
}

/* Browsers that do the real thing do not need the veil at all. */
@supports (view-transition-name: none) {
	.vx-veil {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:not(.vx-force-motion) .vx-veil {
		display: none;
	}

	html:not(.vx-force-motion) ::view-transition-old(root),
	html:not(.vx-force-motion) ::view-transition-new(root) {
		animation: none;
	}
}