/**
 * Skeleton Loader — element-level skeletons (free: lazy-image shimmer).
 *
 * A shimmering placeholder paints behind an image that hasn't loaded yet; the
 * image's own pixels paint over it on load. JS adds .wsskl-shimmer only to
 * opaque-format lazy images (a transparent PNG/SVG would let the shimmer show
 * through forever) and adds .wsskl-img-loaded on the first of four termination
 * signals. CWV-safe: background-color + CSS gradient only, no url(), no text.
 */

@keyframes wsskl-el-shimmer {
	0%   { background-position: -468px 0; }
	100% { background-position: 468px 0; }
}

img.wsskl-shimmer:not(.wsskl-img-loaded) {
	background-color: var( --wsskl-bone-color, #e5e7eb );
	background-image: linear-gradient(
		90deg,
		rgba( 0, 0, 0, 0 ) 0,
		rgba( 255, 255, 255, 0.6 ) 50%,
		rgba( 0, 0, 0, 0 ) 100%
	);
	background-repeat: no-repeat;
	background-size: 468px 100%;
	animation: wsskl-el-shimmer 1.4s ease-in-out infinite;
}

/* Terminated — let the (now-loaded or broken) image show with no placeholder. */
img.wsskl-img-loaded {
	background-image: none;
	animation: none;
}

/* Reduced motion: a static bone, no sweep. */
@media ( prefers-reduced-motion: reduce ) {
	img.wsskl-shimmer:not(.wsskl-img-loaded) {
		animation: none;
		background-image: none;
	}
}