/*
 * Two ways to show a placeholder. Both keep the real <img> in the markup, so
 * the image is still the image: no wrapper is required for the first, and no
 * JavaScript is required for either.
 *
 * 1. .labcity-lqip on the <img> itself. An image element paints its own background
 *    until it has pixels of its own, so the placeholder is visible exactly
 *    while the image is in flight and is covered the moment it decodes. This is
 *    what next/image does with a blurDataURL background, and the swap is
 *    instant rather than faded.
 *
 * 2. .labcity-lqip-frame on a wrapper carrying the placeholder, with the <img>
 *    inside it painting over the top. Add .labcity-lqip-frame--fade to crossfade
 *    instead of swapping; only a wrapper can crossfade, because the two layers
 *    have to be separate elements.
 *
 * The scaled-up 20px placeholder is already smooth: the browser interpolates
 * it. Ask for labcity_lqip_get_blur_svg_data_uri() instead when a more diffuse,
 * heavier blur is wanted.
 */

.labcity-lqip,
.labcity-lqip-frame {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/*
 * The placeholder is dropped once the image has arrived. Leaving it would show
 * through anything transparent in the image, and would keep the decoded
 * placeholder in memory for the life of the page.
 *
 * !important is load-bearing here, not laziness: the placeholder is set as an
 * inline style, because it is per-image data rather than styling, and an inline
 * declaration beats any selector. This is the one case the keyword exists for.
 */
.labcity-lqip--loaded {
	background-image: none !important;
}

.labcity-lqip-frame {
	display: block;
	overflow: hidden;
	position: relative;
}

/*
 * The crossfade is opt-in per frame, so a theme that already fades its own
 * images (cis-2026 does, through .cis-image--lazy) is not gated twice and left
 * with an image that needs both systems to agree before it appears.
 *
 * It is also gated behind a class that lqip.js puts on <html>, so without
 * JavaScript the image is simply visible and nothing can leave it stuck at zero
 * opacity.
 */
.labcity-lqip-ready .labcity-lqip-frame--fade > img {
	opacity: 0;
	transition: opacity 400ms ease;
}

.labcity-lqip-ready .labcity-lqip-frame--fade > img.labcity-lqip-shown {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.labcity-lqip-ready .labcity-lqip-frame--fade > img {
		transition: none;
	}
}

/*
 * Hidden until it fades in, then back to whatever opacity the theme gives it:
 * a photo a theme dims behind text must not come back at full strength.
 */
.labcity-lqip-fade-ready img.labcity-lqip-fade:not(.labcity-lqip):not(.labcity-lqip-in) {
	opacity: 0;
}

.labcity-lqip-fade-ready img.labcity-lqip-fade.labcity-lqip-fading {
	animation: labcity-lqip-fade-in 400ms ease;
}

@keyframes labcity-lqip-fade-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.labcity-lqip-fade-ready img.labcity-lqip-fade.labcity-lqip-fading {
		animation: none;
	}
}