/**
 * MonoView Transitions — transition CSS
 *
 * v1 presets: fade + slide. Hero-morph arrives in v1.5.
 *
 * Design rules (from ARCHITECTURE.md):
 * - `view-transition-name` on a curated, small set of elements only
 *   (entry titles + featured images on singular pages) — never the
 *   whole page.
 * - `prefers-reduced-motion` disables animation by default.
 * - Unsupported browsers ignore everything here; normal page loads
 *   remain the fallback.
 */

/* ------------------------------------------------------------------
 * 1. Curated element mapping
 *
 * view-transition-name is now assigned by assets/js/transitions.js,
 * NOT by CSS. CSS selectors cannot reliably pick "the first element
 * in the document" (`:first-of-type` is per-parent), and real themes
 * render many .wp-post-image elements per page (related-posts grids,
 * FacetWP loops, custom templates). Naming more than one element
 * with the same view-transition-name makes the browser abort the
 * whole transition with an InvalidStateError.
 *
 * This stylesheet handles only what CSS is good at: the page-level
 * (root) animation presets and the reduced-motion override. The
 * cross-fade on named elements (title/hero) is the browser's default
 * behavior and needs no rules here.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * 2. Fade preset (default)
 *
 * Old page fades out, new page fades in. The calmest option and the
 * closest match to what the browser does natively.
 * ------------------------------------------------------------------ */

[data-mono-view-preset="fade"]::view-transition-old(root) {
	animation: mono-view-fade-out var(--mono-view-duration, 250ms) ease-in both;
}

[data-mono-view-preset="fade"]::view-transition-new(root) {
	animation: mono-view-fade-in var(--mono-view-duration, 250ms) ease-out both;
}

/* ------------------------------------------------------------------
 * 3. Slide preset
 *
 * Content slides in from the right — a gentle, directional cue that
 * navigation moved forward. Named elements (title/hero) still morph
 * with a cross-fade on top.
 * ------------------------------------------------------------------ */

[data-mono-view-preset="slide"]::view-transition-old(root) {
	animation: mono-view-slide-out var(--mono-view-duration, 250ms) ease-in both;
}

[data-mono-view-preset="slide"]::view-transition-new(root) {
	animation: mono-view-slide-in var(--mono-view-duration, 250ms) ease-out both;
}

/* ------------------------------------------------------------------
 * 4. Keyframes
 * ------------------------------------------------------------------ */

@keyframes mono-view-fade-out {
	to { opacity: 0; }
}

@keyframes mono-view-fade-in {
	from { opacity: 0; }
}

@keyframes mono-view-slide-out {
	to {
		opacity: 0;
		transform: translateX(-4%);
	}
}

@keyframes mono-view-slide-in {
	from {
		opacity: 0;
		transform: translateX(4%);
	}
}

/* ------------------------------------------------------------------
 * 5. Reduced motion
 *
 * Kill all transition animations. The navigation still works — the
 * old snapshot is simply swapped for the new one instantly, which is
 * exactly a normal page load from the user's perspective.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}