/**
 * Briluz Skeleton loaders shimmer.
 *
 * Carregado condicionalmente via wp_enqueue_style.
 * Origem: extraído de briluz-custom.css em 2026-05-09.
 *
 * @package briluz-shoptimizer
 */

/* S10: SKELETON LOADERS — Shimmer animation (FR-16.5) */

/**
 * Skeleton loaders para carregamento AJAX (filtros, paginacao).
 * Animacao CSS @keyframes shimmer com guard prefers-reduced-motion.
 * O skeleton preserva tamanho/layout dos elementos finais (evita CLS).
 */

/* Base skeleton element */
.briluz-skeleton {
	background: var(--color-bg-alt);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

/* Skeleton variants — match product card dimensions */
.briluz-skeleton-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px 8px 0 0;
}

.briluz-skeleton-title {
	height: 18px;
	width: 80%;
	margin-bottom: 8px;
}

.briluz-skeleton-price {
	height: 22px;
	width: 40%;
	margin-bottom: 12px;
}

.briluz-skeleton-button {
	height: 44px;
	width: 100%;
	border-radius: var(--btn-radius) !important;
}

.briluz-skeleton-text {
	height: 14px;
	width: 60%;
	margin-bottom: 6px;
}

/* Product card skeleton layout */
.briluz-skeleton-card {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
}

.briluz-skeleton-card-body {
	padding: 12px 16px;
}

/* Shimmer animation — only when user has no motion preference */
@media (prefers-reduced-motion: no-preference) {
	.briluz-skeleton {
		background: linear-gradient(90deg,
				var(--color-bg-alt) 25%,
				var(--color-border-light) 50%,
				var(--color-bg-alt) 75%);
		background-size: 200% 100%;
		animation: briluz-shimmer 1.5s infinite;
	}

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

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

/* Reduced motion: static placeholder without animation */
@media (prefers-reduced-motion: reduce) {
	.briluz-skeleton {
		background: var(--color-bg-alt);
		animation: none;
	}
}