/**
 * Loading state for pages browsed without a full reload by
 * assets/js/archive-browse.js (stock archives and the Happy Customers page),
 * keyed on the script's own data-archive* hooks.
 */

/* Current results stay in place, dimmed, while the next page loads; the delay
   keeps fast responses from flickering. Clicks wait until the update lands. */
[data-archive-results] {
	transition: opacity var(--nscb-duration-fast) var(--nscb-ease-standard);
}

[data-archive].is-loading [data-archive-results] {
	opacity: 0.5;
	pointer-events: none;
	transition-delay: 120ms;
}

/* A thin highlight line under the header, visible wherever the visitor clicked. */
[data-archive].is-loading::before {
	content: "";
	position: fixed;
	top: var(--nscb-header-height);
	left: 0;
	z-index: var(--nscb-z-header);
	width: 35%;
	height: 3px;
	border-radius: 0 3px 3px 0;
	background-color: var(--nscb-color-highlight);
	box-shadow: 0 0 12px var(--nscb-highlight-glow);
	animation: nscb-archive-progress 1.1s var(--nscb-ease-in-out) infinite;
}

.admin-bar [data-archive].is-loading::before {
	top: calc(var(--nscb-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

/* Focus target after a page change; the summary itself is not interactive. */
[data-archive-summary]:focus {
	outline: none;
}

[data-archive-summary]:focus-visible {
	outline: 2px solid var(--nscb-color-highlight);
	outline-offset: 4px;
}

@keyframes nscb-archive-progress {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(300%);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Loading line: a static full-width bar instead of a moving one. */
	[data-archive].is-loading::before {
		width: 100%;
		opacity: 0.8;
		animation: none;
	}
}