/* High-Quality Profile Picture Styles */

.profile-picture {
    /* Enhance image rendering quality */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimizeQuality;
    
    /* Smooth scaling for better quality */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Anti-aliasing for smoother edges */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Hardware acceleration for smooth transitions */
    transform: translateZ(0);
    will-change: transform;
    
    /* Prevent image degradation on zoom */
    object-fit: cover;
    object-position: center;
}

.profile-picture-large {
    /* For main profile view (400px) */
    max-width: 400px;
    max-height: 400px;
}

.profile-picture-medium {
    /* For profile cards (200px) */
    max-width: 200px;
    max-height: 200px;
}

.profile-picture-thumbnail {
    /* For small avatars (100px) */
    max-width: 100px;
    max-height: 100px;
}

/* Circular profile pictures with enhanced quality */
.profile-picture-circle {
    border-radius: 50%;
    /* Smooth circular cropping */
    overflow: hidden;
    
    /* Add subtle shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Border for better definition */
    border: 3px solid rgba(255, 255, 255, 0.9);
}

/* Hover effects for interactive profile pictures */
.profile-picture-interactive {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.profile-picture-interactive:hover {
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 1);
}

/* Loading state for profile pictures */
.profile-picture-loading {
    background: linear-gradient(-90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 400% 400%;
    animation: loading 1.6s ease-in-out infinite;
}

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

/* Responsive profile pictures */
@media (max-width: 768px) {
    .profile-picture-responsive {
        max-width: 100%;
        height: auto;
    }
}

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .profile-picture {
        /* Even sharper rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimizeQuality;
    }
}

/* WebP support detection and fallback */
.webp .profile-picture {
    /* Additional optimizations for WebP images */
    image-rendering: optimizeQuality;
}

.no-webp .profile-picture {
    /* Fallback optimizations for JPEG/PNG */
    image-rendering: -webkit-optimize-contrast;
}