/**
 * Instant Page Navigation - frontend styles.
 *
 * Durations/colors are driven by CSS custom properties printed inline
 * by Core\Assets::print_runtime_css_vars() from the admin settings, so
 * this file itself never needs to change when an admin adjusts timing
 * or color:
 *   --ipn-duration, --ipn-easing, --ipn-progress-height,
 *   --ipn-progress-color, --ipn-progress-duration
 */

/* ---------------------------------------------------------------------
 * Progress bar
 * ------------------------------------------------------------------- */

#ipn-progress-bar {
	position: fixed;
	left: 0;
	top: 0;
	width: 0%;
	height: var(--ipn-progress-height, 3px);
	background: var(--ipn-progress-color, #2271b1);
	background: linear-gradient(90deg, var(--ipn-progress-color, #2271b1), color-mix(in srgb, var(--ipn-progress-color, #2271b1) 60%, white));
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	will-change: width, opacity;
}

#ipn-progress-bar.ipn-position-bottom {
	top: auto;
	bottom: 0;
}

#ipn-progress-bar.ipn-active {
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------- */

.ipn-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Visible focus ring when the router programmatically focuses the
 * content container after navigation - keyboard/screen-reader users
 * need a clear landmark for "this is where the new page starts". */
[id][tabindex="-1"]:focus {
	outline: 2px solid var(--ipn-progress-color, #2271b1);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Transition effects
 *
 * Each effect is two states on the container: .ipn-anim-out (leaving)
 * and .ipn-anim-in (the reset state entered right after content swaps,
 * transitioning back to normal). transition-manager.js adds/removes
 * these classes and waits for the transition to finish.
 * ------------------------------------------------------------------- */

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

	.ipn-transition-fade {
		transition: opacity var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out);
	}
	.ipn-transition-fade.ipn-anim-out { opacity: 0; }
	.ipn-transition-fade.ipn-anim-in { opacity: 0; }

	.ipn-transition-slide-up {
		transition: opacity var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out),
			transform var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out);
	}
	.ipn-transition-slide-up.ipn-anim-out { opacity: 0; transform: translateY(-16px); }
	.ipn-transition-slide-up.ipn-anim-in { opacity: 0; transform: translateY(16px); }

	.ipn-transition-slide-left {
		transition: opacity var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out),
			transform var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out);
	}
	.ipn-transition-slide-left.ipn-anim-out { opacity: 0; transform: translateX(-24px); }
	.ipn-transition-slide-left.ipn-anim-in { opacity: 0; transform: translateX(24px); }

	.ipn-transition-scale {
		transition: opacity var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out),
			transform var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out);
		transform-origin: center top;
	}
	.ipn-transition-scale.ipn-anim-out { opacity: 0; transform: scale(0.98); }
	.ipn-transition-scale.ipn-anim-in { opacity: 0; transform: scale(1.02); }

	.ipn-transition-blur-fade {
		transition: opacity var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out),
			filter var(--ipn-duration, 300ms) var(--ipn-easing, ease-in-out);
	}
	.ipn-transition-blur-fade.ipn-anim-out { opacity: 0; filter: blur(6px); }
	.ipn-transition-blur-fade.ipn-anim-in { opacity: 0; filter: blur(6px); }
}

/* Respect the OS-level reduce-motion preference regardless of the
 * admin's chosen effect - transition-manager.js also skips the JS-side
 * animation wait in this case, but this is a CSS-only safety net too. */
@media (prefers-reduced-motion: reduce) {
	[class*="ipn-transition-"] {
		transition: none !important;
		animation: none !important;
	}
}