/**
 * Image loading: skeleton/shimmer placeholder + LQIP blur-up
 * GPU-friendly (will-change, transform), CLS-safe (aspect-ratio reserved)
 */

/* Wrapper: reserves space to prevent CLS */
.img-loading-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #e8e8e8;
}

/* Skeleton placeholder - visible until image loads (GPU-friendly) */
.img-loading-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: background-position;
  background: linear-gradient(
    105deg,
    #e8e8e8 0%,
    #e8e8e8 40%,
    #f0f0f0 50%,
    #e8e8e8 60%,
    #e8e8e8 100%
  );
  background-size: 200% 100%;
  animation: img-loading-shimmer 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* GPU-friendly shimmer animation (background-position only) */
@keyframes img-loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hide skeleton when image has loaded */
.img-loading-wrapper.img-loaded .img-loading-skeleton {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

/* Picture/image: fill wrapper to avoid CLS */
.img-loading-wrapper picture,
.img-loading-wrapper img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-loading-wrapper picture {
  height: 100%;
}

.img-loading-wrapper picture img,
.img-loading-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.img-loading-wrapper.img-loaded img {
  opacity: 1;
}

/* LQIP blur-up: low-res placeholder behind image */
.img-loading-wrapper.img-lqip .img-loading-lqip {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.05);
  transition: opacity 0.4s ease-out;
}

.img-loading-wrapper.img-lqip img {
  z-index: 1;
}

.img-loading-wrapper.img-loaded .img-loading-lqip {
  opacity: 0;
  pointer-events: none;
}

/* Aspect-ratio reservation (CLS) - use .img-loading-wrapper.img-ratio-16-9 etc. */
.img-loading-wrapper.img-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.img-loading-wrapper.img-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.img-loading-wrapper.img-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.img-loading-wrapper.img-ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.img-loading-wrapper.img-ratio-2-1 {
  aspect-ratio: 2 / 1;
}

/* Intrinsic size from width/height reduces CLS when aspect-ratio class not set */
.img-loading-wrapper img {
  max-width: 100%;
  height: auto;
}
.img-loading-wrapper.img-ratio-16-9 img,
.img-loading-wrapper.img-ratio-4-3 img,
.img-loading-wrapper.img-ratio-1-1 img,
.img-loading-wrapper.img-ratio-3-2 img,
.img-loading-wrapper.img-ratio-2-1 img {
  height: 100%;
  object-fit: cover;
}