/* Image optimization styles */

/* Lazy loading fade-in effect */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

img:not(.lazy) {
  opacity: 1;
}

/* Responsive image base styles */
.responsive-img {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shifts during image loading */
.img-wrapper {
  position: relative;
  overflow: hidden;
}

.img-wrapper.has-ratio {
  height: 0;
  padding-bottom: var(--ratio, 56.25%); /* Default 16:9 ratio */
}

.img-wrapper.has-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background image placeholders */
.bg-placeholder {
  background-color: #f5f5f5;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.15) 15%,
    rgba(0, 0, 0, 0.08) 30%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

/* WebP support temporarily disabled */