/* Lazy image loader (Mirages) - extracted from lazy-image.html behavior */
.lazy-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

img.lazy-img {
  opacity: 1; /* show placeholder immediately on page load */
  transition: opacity 0.4s ease-in-out;
  display: block;
  max-width: 100%;
  height: auto;
  filter: none;
}

/* When real image starts loading, prepare for fade-in */
img.lazy-img[data-loading="1"] {
  transition: opacity 0.3s ease-in-out;
}

/* Real image loaded - fade in smoothly with animation */
img.lazy-loaded {
  opacity: 1 !important; /* real image displayed after loading */
  filter: none;
  animation: lazyFadeIn 0.6s ease-out;
}

/* Fade-in animation when real image replaces placeholder */
@keyframes lazyFadeIn {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

img.lazy-error {
  opacity: 1;
  filter: grayscale(1);
}

/* Allow .loaded class as an alias for final state */
img.lazy-img.loaded {
  filter: none;
}

/* Spinner removed */

/* Legacy lazy-media styles (previous theme lazy loader uses .lazy-media-wrap) */
.lazy-media-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.lazy-media-wrap > img,
.lazy-media-wrap > video {
  display: block;
  max-width: 100%;
}
.lazy-media-wrap.lazy-hidden > img,
.lazy-media-wrap.lazy-hidden > video {
  opacity: 0;
}
.lazy-media-wrap.lazy-shown > img,
.lazy-media-wrap.lazy-shown > video {
  opacity: 1;
  transition: opacity .35s ease;
}
.lazy-media-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.10);
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease;
}
.lazy-media-spinner::before {
  content: "";
  position: absolute;
  inset: -40%;
  animation: lazyShimmer 1.2s linear infinite;
  transform: translateX(-30%);
}
.lazy-media-spinner .lazy-spinner-ring {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.28);
  border-top-color: rgba(255,255,255,0.85);
  animation: lazyMediaSpin .9s linear infinite;
  position: relative;
  z-index: 1;
}
.lazy-media-wrap.lazy-done .lazy-media-spinner {
  opacity: 0;
}
@keyframes lazyMediaSpin {
  to { transform: rotate(360deg); }
}
@keyframes lazyShimmer {
  0% { transform: translateX(-35%) rotate(10deg); }
  100% { transform: translateX(35%) rotate(10deg); }
}