/**
 * GDC Skeleton Screens & Loading States
 *
 * 5 variants: text, heading, card, image, button
 * 3 states:   loading (default), loaded, error
 *
 * Shimmer animation uses background-position (GPU-composited).
 * Duration: 2000ms — smooth on 3G networks.
 * Tokens sourced from tokens.css (layer 1 + 2).
 *
 * @package GDC
 * @since   1.0.0
 */

/* ==========================================================
   KEYFRAMES — GPU-safe (background-position only)
   ========================================================== */

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

@keyframes gdc-skeleton-fade-out {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

/* ==========================================================
   BASE SKELETON
   ========================================================== */

.gdc-skeleton {
	background: linear-gradient(
		90deg,
		var(--gdc-bg-abyss) 0%,
		var(--gdc-bg-surface) 50%,
		var(--gdc-bg-abyss) 100%
	);
	background-size: 200% 100%;
	animation: gdc-skeleton-shimmer 2s ease-in-out infinite;
	border-radius: var(--gdc-radius-sm);
	display: block;
}

/* Fade out when content loads */
.gdc-skeleton[data-state="loaded"] {
	animation: gdc-skeleton-fade-out var(--gdc-duration-standard) ease-out forwards;
	pointer-events: none;
}

/* Error state — stop shimmer, dim */
.gdc-skeleton[data-state="error"] {
	animation: none;
	background: var(--gdc-bg-deep);
	opacity: 0.5;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gdc-skeleton {
		animation: none;
	}
}

/* ==========================================================
   VARIANT: TEXT — single line placeholder
   ========================================================== */

.gdc-skeleton--text {
	height: 16px;
	width: 100%;
}

/* ==========================================================
   VARIANT: HEADING — wider, taller placeholder
   ========================================================== */

.gdc-skeleton--heading {
	height: 24px;
	width: 80%;
}

/* ==========================================================
   VARIANT: CARD — full card-shaped placeholder
   ========================================================== */

.gdc-skeleton--card {
	height: 160px;
	width: 100%;
	border-radius: var(--gdc-radius-card);
}

/* ==========================================================
   VARIANT: IMAGE — 16:9 aspect ratio placeholder
   ========================================================== */

.gdc-skeleton--image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--gdc-radius-md);
}

/* ==========================================================
   VARIANT: BUTTON — action placeholder
   ========================================================== */

.gdc-skeleton--button {
	height: 44px;
	width: 120px;
	border-radius: var(--gdc-radius-button);
}

/* ==========================================================
   SKELETON GROUP — stacked skeleton elements
   ========================================================== */

.gdc-skeleton-group {
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-2);
	width: 100%;
}

/* Grid layout for card skeletons */
.gdc-skeleton-group[data-layout="grid"] {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gdc-space-3);
}

@media (min-width: 768px) {
	.gdc-skeleton-group[data-layout="grid"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.gdc-skeleton-group[data-layout="grid"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
   SKELETON WRAPPER — container with live region
   ========================================================== */

.gdc-skeleton-wrapper {
	position: relative;
	width: 100%;
}

.gdc-skeleton-wrapper[data-state="loaded"] .gdc-skeleton-group {
	animation: gdc-skeleton-fade-out var(--gdc-duration-standard) ease-out forwards;
	pointer-events: none;
}