/* A tiny preview occupies the image's existing box until the real file decodes. */
img.is-progressive-placeholder {
  background-color: #edf5f4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(24px);
}

/* Keep the cover preview in its own layer. Blurring the real <img> made a
   completed image look soft while Safari was still settling image.decode(). */
.case-card img.progressive-cover-preview,
.cms-content-card img.progressive-cover-preview {
  filter: blur(12px);
  transform: scale(1.035);
  pointer-events: none;
}

.case-card img.is-progressive-cover-loading,
.cms-content-card img.is-progressive-cover-loading {
  opacity: 0;
}

img.is-progressive-placeholder:is(.product-gallery-stage__item img, .product-media img) {
  background-size: contain;
}

/* The gallery already has a useful 320px thumbnail: show it clearly while
   the selected responsive image arrives, then remove the preview layer. */
img.is-progressive-placeholder.is-progressive-gallery-preview {
  filter: none;
}

.product-media.is-image-loading.has-progressive-placeholder img.is-progressive-placeholder {
  opacity: 1;
}

.product-media.is-image-loading.has-progressive-placeholder::before {
  opacity: 0;
}

/* One real image fills the hero while the full-resolution image decodes.
   A background image could tile if a later style resets its sizing. */
.hero.hero--blur-preview::after {
  background-image: none;
}

.hero-cms-preview {
  position: absolute;
  inset: -3%;
  z-index: -3;
  display: block;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: var(--cms-hero-position-x, 50%) var(--cms-hero-position-y, 50%);
  filter: blur(12px);
  pointer-events: none;
}

.hero.is-hero-image-loaded .hero-cms-preview {
  display: none;
}

.hero-cms-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cms-hero-position-x, 50%) var(--cms-hero-position-y, 50%);
  pointer-events: none;
}

@media (max-width: 700px) {
  img.is-progressive-placeholder { filter: blur(18px); }
}