/* Progressive blur-up — preview fills instantly, full crossfades in after decode.
 * See work_in_progress/image-loading-rule/README.md for the full rule set.
 *
 * HARD RULE — preview + full MUST be absolutely stacked in the same box.
 * Never in-flow: an overflow:hidden parent (the common case here — cards,
 * heroes, evidence frames) clips an in-flow full layer below the preview,
 * leaving a blank hole once preview fades out.
 */

.progressive-image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.progressive-image__preview,
.progressive-image__full {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  /* HARD RULE — the pair is stretched to the box by the two lines above, so without a
   * fit the browser's default (fill) squeezes the picture to whatever shape the box
   * happens to be. That is how the capability record cards shipped at 0.61 of their
   * correct width: the component set a frame and forgot the fit, and nothing here
   * stopped it. cover is the default because it satisfies both halves of the rule at
   * once -- the frame is always full, and the picture is never distorted; what does not
   * fit is cropped instead. A component that genuinely wants letterboxing overrides with
   * object-fit: contain, and every such rule in site.css already outspecifies this one. */
  object-fit: cover;
}

.progressive-image__preview {
  filter: blur(16px);
  transform: scale(1.08);
  transform-origin: center;
  z-index: 0;
  transition: opacity 0.15s ease 0.2s;
}

.progressive-image__full {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.progressive-image.is-ready .progressive-image__full {
  opacity: 1;
}

.progressive-image.is-ready .progressive-image__preview {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .progressive-image__full,
  .progressive-image__preview {
    transition: none;
  }

  .progressive-image__preview {
    filter: none;
    transform: none;
  }

  .progressive-image.is-ready .progressive-image__preview {
    opacity: 0;
  }
}