/* Progressive images: the focus pull from a small thumbnail to a sharp copy.
 *
 * Driven by js/lib/progressive-image.js, which sets data-progressive on an
 * <img>. Scoped to html.js (set by an inline script in each page's head) so a
 * reader without JavaScript never sees a blur that nothing will lift.
 *
 *   pending  the 480 px thumbnail, softly out of focus, at its final size
 *   sharp    the 720 px copy (or the original), in focus
 *   done     no sharper copy could load; the thumbnail, in focus
 */

.js img[data-progressive] {
  /* Release: a slow ease-out, so the detail resolves rather than snaps. */
  transition:
    filter 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Out of focus. Blur is applied with any existing drop shadow so the stage's
   floor shadow stays put while the figure focuses. The slight scale hides the
   blur's soft edge and settles to 1 as focus arrives. */
.js img[data-progressive="pending"] {
  filter: blur(8px) saturate(1.06) var(--progressive-shadow, drop-shadow(0 0 0 transparent));
  transform: scale(1.012);
}

.js img[data-progressive="sharp"],
.js img[data-progressive="done"] {
  filter: blur(0) saturate(1) var(--progressive-shadow, drop-shadow(0 0 0 transparent));
  transform: scale(1);
}

/* The thumbnail itself fades in on arrival instead of popping in. */
.js img[data-progressive-in="waiting"] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js img[data-progressive] {
    transition: none;
  }

  .js img[data-progressive="pending"] {
    transform: none;
  }
}