/* 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.

   The wrap is sized BY THE THUMBNAIL, which lqip.js therefore never removes (see
   its header). line-height:0 keeps the wrap from adding the inline descender gap
   below the image — that gap made the wrap a few px taller than the thumbnail and
   stretched the overlay (inset:0) by the same few px. flex:0 0 auto only applies
   when the wrap lands in a flex row (the page footer's two thumbs); it carries
   over the flex:0 0 auto those images have as an <img>, so wrapping them can't
   make them shrinkable.

   The geometry selectors are `.lqip-wrap > .lqip-hi` (specificity 0,2,0) because
   the overlay inherits the thumbnail's classes, and one of those may set its own
   width/height (.l24-foot-thumb: height:96px) — at plain .lqip-hi (0,1,0) which of
   the two wins would come down to stylesheet order.
*/
.lqip-wrap{ position: relative; display: inline-block; line-height: 0; flex: 0 0 auto; }
.lqip-wrap > .lqip-hi{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .25s ease;
}
.lqip-wrap > .lqip-hi.lqip-hi-shown{ opacity: 1; }