/**
 * Component — Loading State
 *
 * Expected HTML:
 *   Skeleton: <div class="ec-skeleton" style="width: 100%; height: 1rem;"></div>
 *   Spinner:  <span class="ec-spinner" role="status" aria-label="Loading"></span>
 *
 * Skeleton (Water) for predictable layouts, spinner for short
 * indeterminate waits (EC-DESIGN-SYSTEM.md). The "only show past
 * ~200ms" rule is a usage pattern for whatever triggers this, not
 * something this file enforces — it only styles the two visual forms.
 *
 * The spinner keeps spinning under prefers-reduced-motion — rotation
 * indicating active progress is essential/status motion, not
 * decorative, so it's not disabled. The skeleton's shimmer is
 * decorative (the shape alone already conveys the loading state) and
 * is disabled.
 */

:root {
	--ec-skeleton-loop-duration: 1.6s;
	--ec-spinner-size: 1.5rem;
	--ec-spinner-loop-duration: 0.8s;
}

.ec-skeleton {
	display: block;
	border-radius: var(--ec-radius-sm);
	background-color: var(--ec-color-surface-elevated);
	background-image: linear-gradient(90deg, transparent, var(--ec-material-surface), transparent);
	background-size: 200% 100%;
	animation: ec-skeleton-shimmer var(--ec-skeleton-loop-duration) var(--ec-ease-water) infinite;
}

@keyframes ec-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-skeleton {
		animation: none;
		background-image: none;
	}
}

.ec-spinner {
	display: inline-block;
	width: var(--ec-spinner-size);
	height: var(--ec-spinner-size);
	border: 2px solid var(--ec-color-surface-elevated);
	border-top-color: var(--ec-material-color);
	border-radius: var(--ec-radius-full);
	animation: ec-spinner-spin var(--ec-spinner-loop-duration) linear infinite;
}

@keyframes ec-spinner-spin {
	to {
		transform: rotate(360deg);
	}
}