/**
 * Navigation loading overlay.
 *
 * A full-page, on-brand loader (logo + spinner) for the SLOW path only: it is
 * held back half a second (REVEAL_MS in assets/js/nav-progress.js) so a cached
 * page, which typically returns well inside that, never shows it. What every tap
 * gets immediately is the pressed state further down this file.
 *
 * The two are one design, not two: the dimmed link says "registered", and the
 * overlay says "this is taking a while".
 */

#km-nav-loader {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the sticky header + off-canvas panels */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.88 ); /* fallback for no color-mix support */
	background: color-mix( in srgb, var(--wp--preset--color--surface, #ffffff) 88%, transparent );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

/*
 * The fade-IN is deliberately slow, and that is the point: it scales how loud the
 * overlay gets to how long the wait actually turns out to be. A navigation that
 * commits shortly after the reveal never gets past a fraction of full opacity and
 * reads as a gentle dim; a genuinely slow one arrives at full strength. The
 * fade-OUT stays quick (see the base rule) — by then the next document is painting.
 *
 * No backdrop-filter here on purpose. Blurring a full-screen layer forces a
 * compositing pass at the exact moment the main thread is starting a navigation,
 * which on mid-range Android is jank spent on decoration.
 */
#km-nav-loader.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease-out;
}

/*
 * Instant tap acknowledgement, applied by assets/js/nav-progress.js to the link
 * that was clicked. This carries the "your tap registered" job on its own for
 * every fast navigation, which is what lets the overlay above wait 500ms instead
 * of flashing on cached pages. Removed on abort and on bfcache restore.
 */
a.km-nav-pressed {
	opacity: 0.55;
	transition: opacity 80ms ease-out;
}

.km-nav-loader__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/*
 * Scoped under #km-nav-loader on purpose. WooCommerce ships
 * `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }`,
 * which at 0-1-1 beats a bare `.km-nav-loader__logo` (0-1-0) — on every shop,
 * product, cart, checkout and brand/category page the logo would fall back to
 * its natural 269x130. The ID prefix (1-1-0) settles it without !important.
 */
#km-nav-loader .km-nav-loader__logo {
	width: auto;
	height: 44px;
	max-width: 60vw;
	object-fit: contain;
	animation: km-nav-loader-pulse 1.4s ease-in-out infinite;
}

.km-nav-loader__spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid color-mix( in srgb, var(--wp--preset--color--primary, #c1382d) 22%, transparent );
	border-top-color: var(--wp--preset--color--primary, #c1382d);
	animation: km-nav-loader-spin 0.7s linear infinite;
}

@keyframes km-nav-loader-spin {
	to { transform: rotate( 360deg ); }
}

@keyframes km-nav-loader-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

/* Reduced motion: drop the spin/pulse, keep a static indicator. */
@media (prefers-reduced-motion: reduce) {
	/* Same #km-nav-loader prefix as the rules above, otherwise these overrides
	   lose on specificity and the animations keep running. */
	#km-nav-loader .km-nav-loader__logo { animation: none; }
	#km-nav-loader .km-nav-loader__spinner {
		animation: none;
		border-top-color: var(--wp--preset--color--primary, #c1382d);
		opacity: 0.85;
	}
}