/**
 * Team Member Image Moire Fix
 * 
 * This CSS file addresses moire artifacts (wavy ripple lines) on team headshot images
 * caused by aggressive downscaling and compression. The fixes include:
 * - GPU acceleration for stable rendering
 * - Anti-aliasing properties
 * - More aggressive filters to reduce moire patterns
 * - Proper image rendering hints
 * - Forcing exact pixel rendering to prevent subpixel artifacts
 */

.team-filter .grid-outer .card .inner-wrap .img-wrap img {
    /* GPU acceleration for stable rendering and reduced aliasing */
    transform: translateZ(0) scale(1);
    -webkit-transform: translateZ(0) scale(1);
    -moz-transform: translateZ(0) scale(1);
    -ms-transform: translateZ(0) scale(1);
    
    /* Prevent rendering artifacts */
    backface-visibility: hidden !important;
    perspective: 1000px;
    
    /* Additional anti-aliasing properties */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Subtle filter to reduce moire on fine patterns like striped/checkered shirts */
    /* Very light blur (0.3px) to break up moire patterns without making images blurry */
    /* Slight contrast and saturation reduction helps minimize moire visibility */
    filter: contrast(1.01) brightness(1.01) blur(0.3px) saturate(0.98) !important;
    -webkit-filter: contrast(1.01) brightness(1.01) blur(0.3px) saturate(0.98) !important;
    
    /* CRITICAL: Override conflicting image-rendering rules from compiled SCSS */
    /* crisp-edges and optimize-contrast are WRONG for photos and cause moire */
    /* These MUST override the compiled CSS that has crisp-edges */
    image-rendering: auto !important;
    -ms-interpolation-mode: bicubic !important;
    /* Remove any webkit optimize-contrast that causes moire */
    -webkit-optimize-contrast: none !important;
    
    /* Ensure no scaling artifacts */
    image-orientation: from-image;
    
    /* Force hardware acceleration */
    will-change: transform;
    
    /* Prevent any browser optimizations that might cause moire */
    -webkit-backface-visibility: hidden !important;
    -moz-backface-visibility: hidden !important;
    -ms-backface-visibility: hidden !important;
}