/* Image Optimization Styles */

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

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

img.lazy-loading.error {
  opacity: 0.5;
  filter: grayscale(100%);
}

/* Low Quality Image Placeholder (LQIP) */
.image-container {
  position: relative;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  overflow: hidden;
}

.image-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.image-container img.loaded + .image-container::before {
  display: none;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
  line-height: 0;
}

/* Meme images specific */
.meme-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.meme-image[loading="lazy"] {
  min-height: 400px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* WebP support detection */
.no-webp picture source[type="image/webp"] {
  display: none;
}

/* Performance: Reduce paint on scroll */
.meme-image {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Aspect ratio boxes for CLS prevention */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* Image error state */
img[onerror] {
  background: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Progressive image loading */
@supports (content-visibility: auto) {
  .meme-image {
    content-visibility: auto;
    contain-intrinsic-size: 400px;
  }
}