/**
 * Unified image skeleton (shimmer) for gallery / card covers.
 * Classes: .hr-img-skeleton + .is-loading | .is-loaded | .is-error
 */

.hr-img-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--color-blend, #f6f7f8);
}

.hr-img-skeleton.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		var(--color-blend, #f6f7f8) 0%,
		#e9ecef 35%,
		#ffffff 50%,
		#e9ecef 65%,
		var(--color-blend, #f6f7f8) 100%
	);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: hr-img-shimmer 1.2s ease-in-out infinite;
}

.hr-img-skeleton.is-loading img {
	opacity: 0;
	position: relative;
	z-index: 0;
}

.hr-img-skeleton.is-loaded img {
	opacity: 1;
	transition: opacity 0.25s ease;
}

.hr-img-skeleton.is-error::after {
	display: none;
	animation: none;
}

a.img_lightbox.hr-img-skeleton {
	display: inline-block;
	max-width: 100%;
}

@keyframes hr-img-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hr-img-skeleton.is-loading::after {
		animation: none;
		background-image: none;
		background-color: var(--color-blend, #f6f7f8);
	}

	.hr-img-skeleton.is-loaded img {
		transition: none;
	}
}