/* 
 * Best-in-Class Image Rendering Optimization
 * Ensures all images are displayed in highest quality across all browsers and devices
 */

/* Global image optimization */
img {
  /* High-quality rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: optimize-quality;
  
  /* Prevent blurry rendering on transforms */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Smooth scaling */
  -ms-interpolation-mode: bicubic;
  
  /* Prevent layout shift */
  max-width: 100%;
  height: auto;
  
  /* Color accuracy */
  color-rendering: optimizeQuality;
  
  /* Sharp text rendering within images */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* High-priority images (hero, logo, above-the-fold) */
img[loading="eager"],
img[fetchpriority="high"],
.hero-logo-img,
.nav-logo-glow img {
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-quality;
  
  /* Extra sharpness for critical images */
  filter: contrast(1.08) brightness(1.02);
  
  /* Prevent blur during animation */
  will-change: transform;
  transform: translateZ(0) scale(1.001);
}

/* Logo-specific optimization */
.nav-logo-glow img,
.hero-logo-img,
img[alt*="Logo"] {
  /* Maximum quality for logos */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-quality;
  
  /* Ensure perfect circles/shapes */
  shape-rendering: geometricPrecision;
  
  /* Crisp edges for logos */
  -webkit-filter: contrast(1.1) brightness(1.05);
  filter: contrast(1.1) brightness(1.05);
}

/* Icon optimization (smaller images that need to stay sharp) */
img[alt*="icon" i],
img[alt*="Icon"],
.w-16, .w-20, .w-32 {
  /* Prevent blurriness on small icons */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated; /* For very small icons */
  
  /* Sharp scaling */
  -ms-interpolation-mode: nearest-neighbor;
}

/* Agent logos - special handling for quality */
.agent-logo-shine img {
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  
  /* Enhanced clarity */
  filter: contrast(1.12) brightness(1.08) saturate(1.15);
  
  /* Prevent blur on hover/transform */
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.001);
  will-change: filter, transform;
}

/* Retina/HiDPI optimization */
@media 
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  
  img {
    /* Enhanced rendering for high-DPI displays */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-quality;
    
    /* Sharper appearance on retina */
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

/* 4K and Ultra HD optimization */
@media (min-resolution: 3dppx) {
  img {
    /* Ultra-high quality for 4K+ displays */
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Prevent blur during GPU acceleration */
img[style*="transform"],
img[style*="filter"],
.theme-card img,
.agent-card img {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* WebP format optimization (when available) */
img[src$=".webp"] {
  /* WebP already compressed, optimize for display quality */
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.05) brightness(1.02);
}

/* PNG optimization (higher quality needed) */
img[src$=".png"] {
  /* PNGs need careful rendering to maintain transparency and quality */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-quality;
  
  /* Preserve PNG quality */
  filter: contrast(1.08) saturate(1.05);
}

/* Prevent image degradation on hover/interaction */
img:hover,
img:focus,
img:active {
  image-rendering: high-quality;
  backface-visibility: hidden;
}

/* Lazy-loaded images - optimize after load */
img[loading="lazy"] {
  /* Content visibility for performance */
  content-visibility: auto;
  
  /* Maintain quality even when lazy */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-quality;
}

/* Safari-specific optimizations */
@supports (-webkit-appearance: none) {
  img {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
  }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
  img {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
}