/**
 * Drill-down page transitions (PLAN.md §4a, Phase 2b).
 *
 * Every layer is a real page with its own URL. This file only animates the
 * navigation between them, using cross-document View Transitions:
 *
 *   drilling in   (deeper URL)    the old page swells and fades past you,
 *                                 the new one rises into place
 *   drilling out  (shallower URL) the reverse
 *   sideways      (same depth)    a plain cross-fade
 *
 * A card's title on the parent page and the heading on the page it leads to
 * share a view-transition-name, so the title travels into position.
 *
 * Support: Chrome/Edge 126+, Safari 18.2+. Firefox has no cross-document
 * support and simply navigates normally. Nothing here is required for the
 * site to work.
 *
 * Accessibility: everything sits inside prefers-reduced-motion:
 * no-preference, so anyone who asks for less motion gets none, and ordinary
 * navigation is untouched (WCAG 2.3.3).
 *
 * TIMING IS A DESIGN DECISION (D13). Canada Create: tune the three custom
 * properties below; nothing else needs to change.
 */

:root {
	--oneworld-vt-duration: 320ms;
	--oneworld-vt-easing: cubic-bezier(0.2, 0, 0, 1);
	--oneworld-vt-zoom: 0.04; /* how far the page scales while drilling */
}

@media (prefers-reduced-motion: no-preference) {

	@view-transition {
		navigation: auto;
	}

	/* The header stays put while the content beneath it changes. */
	header.wp-block-template-part {
		view-transition-name: oneworld-header;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: var(--oneworld-vt-duration);
		animation-timing-function: var(--oneworld-vt-easing);
	}

	/* Drilling in: past the old layer, into the new one. */
	:root:active-view-transition-type(drill-in)::view-transition-old(root) {
		animation-name: oneworld-swell-out;
	}
	:root:active-view-transition-type(drill-in)::view-transition-new(root) {
		animation-name: oneworld-rise-in;
	}

	/* Drilling out: the reverse. */
	:root:active-view-transition-type(drill-out)::view-transition-old(root) {
		animation-name: oneworld-sink-out;
	}
	:root:active-view-transition-type(drill-out)::view-transition-new(root) {
		animation-name: oneworld-settle-in;
	}
}

@keyframes oneworld-swell-out {
	to { opacity: 0; transform: scale(calc(1 + var(--oneworld-vt-zoom))); }
}
@keyframes oneworld-rise-in {
	from { opacity: 0; transform: scale(calc(1 - var(--oneworld-vt-zoom))); }
}
@keyframes oneworld-sink-out {
	to { opacity: 0; transform: scale(calc(1 - var(--oneworld-vt-zoom))); }
}
@keyframes oneworld-settle-in {
	from { opacity: 0; transform: scale(calc(1 + var(--oneworld-vt-zoom))); }
}