/* Whole-art preview: both layers share the original's reserved geometry. */
.home-art-image { --home-image-fade: 160ms; position: relative; isolation: isolate; display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.home-feature .home-art-image { width: 100%; }
.home-art-image .home-image-main { display: block; }
.home-art-image .home-image-preview { display: none; }
.home-images-js [data-home-image] .home-image-preview { display: block; position: absolute; z-index: 0; pointer-events: none; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.home-images-js [data-home-image] .home-image-main { position: relative; z-index: 1; opacity: 0; transition: opacity var(--home-image-fade) ease; }
.home-images-js [data-home-image].is-ready .home-image-main { opacity: 1; }
/* Hide the lower layer at fade completion, so transparent PNGs never double-compose. */
.home-images-js [data-home-image].is-ready .home-image-preview { visibility: hidden; transition: visibility 0s var(--home-image-fade); }
.home-images-js [data-home-image].is-cached .home-image-main,
.home-images-js [data-home-image].is-cached .home-image-preview { transition: none; }
.home-selected-artworks .artwork-image:hover .home-art-image img { transform: none; }
.home-portrait-image { width: 100%; transition: transform 500ms ease; }
.artist-image:hover .home-portrait-image img { transform: none; }
/* Hover moves the shared frame; decode/fade only controls the main layer's opacity.
   Keep the catalogue's original scale, duration and outer clipping. */
.home-selected-artworks .home-art-image { transition: transform 500ms ease; }
.home-selected-artworks .home-art-image { width: min(100%, var(--home-image-width, 100%), calc(420px * var(--home-image-ratio, 1))); }
.home-selected-artworks .home-art-image .home-image-main { width: 100%; }
@media (max-width: 620px) {
  .home-selected-artworks .home-art-image { width: min(100%, var(--home-image-width, 100%), calc(400px * var(--home-image-ratio, 1))); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-selected-artworks .artwork-image:hover .home-art-image { transform: scale(1.03); }
  .artist-image:hover .home-portrait-image { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .home-images-js [data-home-image] .home-image-main, .home-images-js [data-home-image] .home-image-preview { transition: none; } }

/* Prioritized pictures may paint before deferred controls. Reserve the existing
   header geometry on this JS-enhanced page; the no-JS navigation stays intact. */
.home-images-js .theme-control[hidden] { display: inline-flex; visibility: hidden; }
@media (max-width: 980px) {
  .home-images-js .site-header:not([data-menu-ready]) .header-inner { flex-wrap: nowrap; }
  .home-images-js .site-header:not([data-menu-ready]) .nav { display: none; }
  .home-images-js .menu-toggle[hidden] { display: inline-flex; visibility: hidden; }
}

/* Public cards/detail retain their existing full-width composition and crop. */
.public-image-frame { width: 100%; transition: transform 500ms ease; }
.public-image-frame .home-image-main { width: 100%; height: auto; }
/* Match the final enhanced desktop filter height before deferred JS runs.
   The ordinary no-JS Apply action remains available. */
@media (min-width: 761px) {
  .home-images-js .catalog-filters:not([data-enhanced]) .catalog-filter-actions { display: none; }
}
.artwork-image:hover .public-image-frame img,
.artist-main-image:hover .public-image-frame .profile-portrait { transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .artwork-card .artwork-image:hover .public-image-frame { transform: scale(1.03); }
  .artwork-primary .artwork-image:hover .public-image-frame,
  .artist-main-image:hover .public-image-frame { transform: scale(1.02); }
}