/*
Ability Esports — Skeleton system.
/docs/UI-PATTERN-LIBRARY.md §32, /docs/ASSET-ART-DIRECTION.md §23's "loading
state" fallback row. One shimmer treatment (--ae-duration-shimmer, already
used identically by the loading-spinner in states.css), applied via shape
modifiers that match each real component's final dimensions — the direct
lever against layout shift. No live async data-fetch exists yet to trigger
these client-side; this is the shared shimmer primitive + shape set, ready
for Stage 9+ once a component genuinely loads data after first paint.
*/

.ae-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--ae-color-surface-2);
	border-radius: var(--ae-radius-sm);
}

.ae-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(243, 239, 230, 0.06),
		transparent
	);
	animation: ae-shimmer var(--ae-duration-shimmer) var(--ae-ease-linear) infinite;
}

@keyframes ae-shimmer {
	100% {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-skeleton::after {
		animation: none;
	}
}

.ae-skeleton--text {
	height: 1em;
	border-radius: var(--ae-radius-sm);
}

.ae-skeleton--avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ae-radius-pill);
}

.ae-skeleton--card {
	border-radius: var(--ae-card-radius);
	aspect-ratio: var(--ae-card-image-ratio);
}

.ae-skeleton--statistic {
	width: 6rem;
	height: var(--ae-space-4xl);
}