/* Progressive image loading (Ticket 56).
   Additive only — never forces width/height so it can't break existing
   layouts. A short blur→sharp cross-fade as the full image swaps in. */

.pi {
  transition: filter .3s ease, opacity .3s ease;
  /* Anti-layout-shift: a placeholder and the full image share the same box. */
  background-color: rgba(0, 0, 0, 0.04);
}

.pi-loading {
  filter: blur(8px);
}

.pi-loaded {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .pi {
    transition: none;
  }
  /* Skip the blur entirely for users who prefer reduced motion. */
  .pi-loading {
    filter: none;
  }
}

/* ── #134 dark mode overrides ─────────────────────────────── */
/* The anti-layout-shift placeholder is a black wash, which is invisible against
   a dark page — the image box vanishes until the bitmap arrives. Flip it to a
   light wash so the reserved space still reads as a pending tile. */
html[data-theme="dark"] .pi {
  background-color: rgba(255, 255, 255, 0.06);
}