/* Soft image placeholders: content keeps its layout while imagery arrives. */
.lk-image-frame {
	position: relative;
	overflow: hidden;
	background: #eee5d8;
}

.lk-image-frame::after {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: linear-gradient(105deg, #eee5d8 0%, #f7f1e8 46%, #eee5d8 100%);
	background-size: 220% 100%;
	content: "";
	pointer-events: none;
	transition: opacity 220ms ease, visibility 220ms ease;
	animation: lk-image-shimmer 1.35s ease-in-out infinite;
}

.lk-image-frame:not(.is-loaded) img {
	opacity: 0;
}

.lk-image-frame img {
	transition: opacity 260ms ease;
}

.lk-image-frame.is-loaded::after,
.lk-image-frame.is-error::after {
	visibility: hidden;
	opacity: 0;
	animation: none;
}

.lk-image-frame.is-loaded img,
.lk-image-frame.is-error img {
	opacity: 1;
}

@keyframes lk-image-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lk-image-frame::after {
		animation: none;
	}

	.lk-image-frame img,
	.lk-image-frame::after {
		transition: none;
	}
}