/* Progressive image loading (LQIP) crossfade (L24)

   CANONICAL SOURCE: lucid24/suttas/js/ and lucid24/suttas/css/ are EACH their own git
   repo (branch master) and are the source of truth for the shared web assets. Edit and
   commit HERE. The copies under py_template/l24page26/{js,css}/ (git-tracked there but
   STALE/divergent) and 4nt-localweb/suttas/ (a local mirror, not git) are derived — do
   NOT treat them as the source or commit fixes there.

   Pairs with lqip.js: once the full-res image has loaded in the background,
   lqip.js wraps the thumbnail <img> in .lqip-wrap and layers a second <img
   class="lqip-hi"> on top of it, faded in via opacity — NOT the thumbnail
   fading itself out then back in, which would expose the page background
   underneath during the gap. The thumbnail stays fully visible the whole
   time, right up until the overlay is fully opaque over it.
*/
.lqip-wrap{ position: relative; display: inline-block; }
.lqip-hi{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .25s ease;
}
.lqip-hi.lqip-hi-shown{ opacity: 1; }