/* =============================================================================
   IMG LAZY FADE
   Fades images in when they finish loading via native lazy loading.

   PHP (image_responsive.php) adds .img-lazy to every <img> it outputs.
   JS (img-lazy.js) adds .img-loaded once the image has loaded.

   If .scroll-hidden is also present, scroll.css opacity rules take precedence
   — .img-lazy only drives the fade when scroll-hidden is not involved.

   DURATION — keep in sync with IMG_FADE_DURATION in img-lazy.js
   ============================================================================= */

img.img-lazy {
  opacity: 0;
  transition: opacity var(--duration-nav) var(--ease-default);
}

img.img-lazy.img-loaded {
  opacity: 1;
}

/* ── scroll-hidden takes full control when both classes are present ────────── */
img.img-lazy.scroll-hidden,
img.img-lazy.scroll-hidden.img-loaded {
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-default),
    transform var(--duration-reveal) var(--ease-default);
}

img.img-lazy.scroll-hidden.show {
  opacity: 1;
}