/**
 * Intro Loader (includes/loader.php).
 *
 * Size via --intro-loader-size on the loader or any ancestor.
 * Colour: the ring uses currentColor; custom SVGs keep their own fills
 * unless they use currentColor themselves.
 */

.intro-loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.intro-loader__icon {
	display: inline-block;
	inline-size: var(--intro-loader-size, 3rem);
	block-size: var(--intro-loader-size, 3rem);
}

/* Default: ring spinner. */
.intro-loader--ring .intro-loader__icon {
	border-radius: 50%;
	border: 0.1875rem solid color-mix(in srgb, currentColor 25%, transparent);
	border-block-start-color: currentColor;
	animation: intro-loader-spin 0.8s linear infinite;
}

/* Custom icon (uploads/intro-customizations/icons/loader.svg): pulse. */
.intro-loader--custom .intro-loader__icon {
	animation: intro-loader-pulse 1.4s ease-in-out infinite;
}

.intro-loader--custom .intro-loader__icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Opt-in rotation for custom icons. */
.intro-loader--spin .intro-loader__icon {
	animation: intro-loader-spin 0.9s linear infinite;
}

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

@keyframes intro-loader-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.35;
		transform: scale(0.92);
	}
}

@media (prefers-reduced-motion: reduce) {
	.intro-loader .intro-loader__icon {
		animation: none;
	}
}