/* ==========================================================================
   55TH Avenue - Image loading placeholder
   Matches the project's wireframes: real page content (headlines, prices,
   buttons, forms) is server-rendered and shows immediately — only actual
   photography needs a placeholder while it loads, not the whole page
   behind an opaque overlay. See assets/js/image-loading.js.
   ========================================================================== */

img {
	background-color: var(--color-surface-container-low);
}

/* Scoped to html.js (swapped from .no-js the instant JS runs, see the
   inline script in header.php) so a page with JS disabled or blocked
   simply shows images as the browser loads them, rather than leaving
   them permanently invisible with no script left to reveal them. */
.js img:not(.is-loaded) {
	opacity: 0;
}

img.is-loaded {
	opacity: 1;
	transition: opacity 0.4s var(--ease);
}