/* Reusable smooth loading & skeleton utilities */
.img-skeleton {
	position: relative;
	background: #f3f4f6;
	border-radius: 8px;
	overflow: hidden;
}
.img-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(243, 244, 246, 0) 0%,
		rgba(229, 231, 235, 0.9) 50%,
		rgba(243, 244, 246, 0) 100%
	);
	transform: translateX(-100%);
	animation: ui-shimmer 1.25s infinite;
}
.img-skeleton .fade-img {
	opacity: 0;
	transition: opacity 0.4s ease;
	display: block;
	width: 100%;
	height: auto;
	/* prevent inner margin creating visible bar of skeleton bg below the image */
	margin-bottom: 0 !important;
}
.img-skeleton.loaded::after {
	display: none;
}
.img-skeleton.loaded {
	/* remove grey background once the image is loaded to avoid the lower band */
	background: transparent;
	transition: background-color 0.25s ease;
}
.img-skeleton.loaded .fade-img {
	opacity: 1;
}
/* move spacing from img to wrapper to avoid exposing skeleton bg below the image */
.img-skeleton {
	margin-bottom: 1rem;
}
@keyframes ui-shimmer {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(100%);
	}
}
.smooth-item {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.smooth-item.visible {
	opacity: 1;
	transform: none;
}
/* Optional hover lift */
.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.hover-lift {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Error state: no shimmer and neutral bg */
.img-skeleton.img-error {
	background: #f8fafc;
}
.img-skeleton.img-error::after {
	display: none;
}