/**
 * Loading and transition states for a listing that's swapped in place over
 * AJAX: the Magazine page's edition grid (assets/js/magazine-editions.js)
 * and the Universities directory's results (assets/js/universities.js).
 * Give the listing's container the `un-ajax-region` class; the script adds
 * `is-loading` while a request is out and `is-fresh` once the new content is in.
 *
 * While loading, the current content dims and stops taking clicks and a
 * spinner sits near the top (not the middle, which can be far below the fold
 * on a long list); the new content then fades in. Visitors who ask for
 * reduced motion get the same states without the fade.
 *
 * Colours come from the theme's palette (style.min.css :root): the spinner
 * is --yellow on a faint --blue ring.
 */

.un-ajax-region {
	position: relative;
	outline: none;
}

.un-ajax-region > * {
	transition: opacity 0.2s ease;
}

.un-ajax-region.is-loading > * {
	opacity: 0.35;
	pointer-events: none;
}

.un-ajax-region.is-loading::after {
	content: "";
	position: absolute;
	top: 80px;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	border: 4px solid rgba(35, 26, 100, 0.15);
	border-top-color: var(--yellow, #ddb14d);
	border-radius: 50%;
	animation: un-ajax-region-spin 0.8s linear infinite;
}

.un-ajax-region.is-fresh > * {
	animation: un-ajax-region-in 0.35s ease both;
}

@keyframes un-ajax-region-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes un-ajax-region-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.un-ajax-region > * {
		transition: none;
	}

	.un-ajax-region.is-loading::after {
		animation-duration: 2s;
	}
}