/**
 * Image Optimization Fallback CSS for Twinkle Tide
 * Provides responsive image solutions when GD library is not available
 */

/* Responsive image containers */
.responsive-image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Base image styles */
.responsive-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Mobile-first approach - start with smaller images */
@media (max-width: 767px) {
    .responsive-image {
        /* Apply subtle blur for mobile to simulate thumbnail effect */
        filter: blur(0.5px);
        transform: scale(1.02);
    }
    
    .responsive-image:hover {
        filter: blur(0);
        transform: scale(1);
    }
}

/* Desktop - full quality images */
@media (min-width: 768px) {
    .responsive-image {
        filter: none;
        transform: none;
    }
    
    .responsive-image:hover {
        transform: scale(1.02);
        filter: brightness(1.05);
    }
}

/* Product image specific styles */
.product-image-container {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-image-container:hover img {
    transform: scale(1.05);
}

/* About image specific styles */
.about-image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image img:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Lazy loading simulation with CSS */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

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

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

/* Responsive breakpoints for different image sizes */
@media (max-width: 480px) {
    .responsive-image {
        /* Extra small screens - more aggressive optimization */
        filter: blur(1px) contrast(0.9);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-image {
        /* Tablet - moderate optimization */
        filter: blur(0.25px);
    }
}

@media (min-width: 1025px) {
    .responsive-image {
        /* Large desktop - no optimization */
        filter: none;
        transform: none;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .responsive-image {
        /* Ensure crisp images on high DPI displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .responsive-image {
        filter: none;
        transform: none;
        box-shadow: none;
    }
}

/* Accessibility improvements */
.responsive-image:focus {
    outline: 0.125rem solid #C9A34E;
    outline-offset: 0.25rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .responsive-image,
    .product-image-container img,
    .about-image img {
        transition: none;
        animation: none;
    }
    
    .responsive-image:hover,
    .product-image-container:hover img,
    .about-image img:hover {
        transform: none;
        filter: none;
    }
}

/* Dark mode support removed - Using light mode only */

/* Performance optimizations */
.responsive-image {
    will-change: transform, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Container queries support (future) */
@container (max-width: 300px) {
    .responsive-image {
        filter: blur(1px);
    }
}

@container (min-width: 800px) {
    .responsive-image {
        filter: none;
    }
}