/*
 * Global progressive image presentation.
 *
 * WordPress media uses a real thumbnail as the first paint. Static, transparent
 * and remote images stay fully transparent until their pixels are ready; this
 * avoids Safari painting each image's rectangular box as a grey placeholder.
 */
img.agnero-progressive-image {
  background-color: var(--agnero-image-resting-color, transparent);
  background-image: var(--agnero-image-resting-background, none);
  filter: var(--agnero-image-base-filter, none);
  opacity: 0;
  transition: none;
  will-change: auto;
}

/* Only a real, aspect-ratio-safe preview may be shown blurred. Never synthesize
   a rectangular placeholder for transparent product artwork or SVG assets. */
img.agnero-progressive-image.has-agnero-lqip {
  --agnero-image-loading-filter: blur(6px) saturate(0.95);
  background-color: transparent;
  background-image: none;
  filter: var(--agnero-image-loading-filter) var(--agnero-image-base-filter,);
  opacity: 0.92;
  transition:
    filter 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease-out;
  will-change: filter, opacity;
}

img.agnero-progressive-image.is-loaded {
  background-color: var(--agnero-image-resting-color, transparent);
  background-image: var(--agnero-image-resting-background, none);
  filter: var(--agnero-image-base-filter, none);
  opacity: 1;
  transition:
    filter 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease-out;
  will-change: auto;
}

img.agnero-progressive-image.is-error {
  filter: var(--agnero-image-base-filter, none);
  opacity: 1;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  img.agnero-progressive-image,
  img.agnero-progressive-image.has-agnero-lqip,
  img.agnero-progressive-image.is-loaded,
  img.agnero-progressive-image.is-error {
    filter: var(--agnero-image-base-filter, none);
    opacity: 1;
    transition: none;
    will-change: auto;
  }
}