/* Progressive image loading — paired with js/pacco-img-blurup.js.
 *
 * The colour wash sits on the <img> itself rather than a wrapper, so no markup
 * has to change on either surface. While the file is in flight the element is
 * a soft gradient; the picture then fades up out of a blur. */

img.pac-blurup {
  /* Per-image wash when the uploader sampled colors at upload time
     (--ph0/--ph1/--ph2 inline); otherwise the calm generic wash. Static —
     deliberately no white sweep/shimmer. */
  background-image: linear-gradient(150deg, var(--ph0, #0d316f) 0%, var(--ph1, #8ea0c8) 52%, var(--ph2, #e8c4c4) 130%);
  background-size: cover;
  background-position: center;
  /* Blur the wash itself, not just the picture, so the placeholder reads as a
     soft field of colour instead of a hard-edged gradient. */
  filter: blur(12px) saturate(1.05);
  transform: scale(1.04);
  opacity: 0.85;
  transition:
    filter 420ms cubic-bezier(0.2, 0.75, 0.2, 1),
    transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1),
    opacity 260ms ease;
  will-change: filter, transform;
}

img.pac-blurup.is-ready {
  background-image: none;
  filter: none;
  transform: none;
  opacity: 1;
  will-change: auto;
}

/* Respect the viewer's motion preference: still avoid the empty-box flash, but
   swap instantly instead of animating. */
@media (prefers-reduced-motion: reduce) {
  img.pac-blurup {
    filter: none;
    transform: none;
    transition: none;
  }
  img.pac-blurup.is-ready {
    background-image: none;
  }
}