/*
 * Lightweight image skeleton loading — no external dependency.
 * Any <img> shows a shimmering placeholder until it finishes loading
 * (or shows a subtle broken-image state on error), toggled by
 * assets/js/img-skeleton.js via the skel-done / skel-error classes.
 */
img:not(.skel-off):not(.skel-done) {
	background-color: #e9edf1;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 80%);
	background-repeat: no-repeat;
	background-size: 60% 100%;
	background-position: -60% 0;
	animation: skel-shimmer 1.3s ease-in-out infinite;
}

img.skel-done {
	animation: none;
	background-image: none;
}

img.skel-error {
	animation: none;
	background-color: #f1f3f5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c0cc' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 13l2.5-3 2.5 3 3-4 3.5 5H5z'/%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23b7c0cc' stroke='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

@keyframes skel-shimmer {
	0% {
		background-position: -60% 0;
	}

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

@media (prefers-reduced-motion: reduce) {
	img:not(.skel-off):not(.skel-done) {
		animation: none;
	}
}