/* Image Optimization CSS */

/* General image optimization */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Lazy loading placeholder styles */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Preload critical images */
.hero img,
.above-fold img {
  image-rendering: auto;
  loading: eager;
}

/* Logo-specific optimizations */
.logo-item img {
  contain: layout style paint;
  transform: translateZ(0); /* Force GPU acceleration */
  will-change: transform, filter;
  backface-visibility: hidden;
}

/* Responsive image containers */
.image-container {
  position: relative;
  overflow: hidden;
}

/* Image loading states */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* WebP support detection */
.webp .logo-item img[src$=".png"] {
  /* Fallback for browsers that don't support WebP */
}

/* Retina display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-item img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Print styles */
@media print {
  img {
    image-rendering: auto;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}