/* Progressive image loading (blur-up placeholder) */
.progressive{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  transition: filter 400ms ease, opacity 400ms ease;
  filter: blur(12px) saturate(.9) contrast(.95);
  opacity:0.9;
  will-change: filter, opacity;
}
.progressive.is-loaded{
  filter: none;
  opacity:1;
}
/* For hero which is fixed height in the page CSS, keep consistent behaviour */
.hero img.progressive{height:68vh;object-fit:cover}

/* Small LQIP base64 fallback styling (if using data-lqip) */
.progressive[data-lqip]{
  background-size:cover;
  background-position:center;
}

/* Ensure that images inside gallery/grid keep their card radius while placeholder shows */
.gallery-grid img.progressive, .card-jds img.progressive{
  border-radius:var(--jds-radius-md);
}

/* Reduce blur on prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .progressive{ transition: none; filter: none; }
}