/**
 * Image Loading System Styles for UNAWARE App
 * Provides loading states, error handling, and smooth transitions
 * Optimized for desktop, mobile, and PWA environments
 */

/* Image Loading States */
img.image-loading {
    background-color: #444;  /* Changed from #333 to lighter color */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100px;
    min-width: 100px;
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

img.image-loaded {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    /* Ensure all backgrounds are cleared */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

img.image-error {
    background-color: #444;  /* Changed from #222 to lighter color */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Add visual indicator for error state */
    border: 2px dashed #888;
}

img.image-error:hover {
    opacity: 1;
    transform: scale(1.02);
}

/* Loading Animation for Images */
@keyframes imageLoadPulse {
    0% { opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { opacity: 0.5; }
}

img.image-loading {
    animation: imageLoadPulse 1.5s ease-in-out infinite;
}

/* CRITICAL: Exclude images with no-loading-bg class from ALL loading effects */
img.no-loading-bg,
img.no-loading-bg.image-loading,
img.no-loading-bg.image-loaded,
img.no-loading-bg.image-error,
img.no-loading-bg[data-enhanced] {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    animation: none !important;
    opacity: 1 !important;
    min-height: unset !important;
    min-width: unset !important;
}

/* Prevent layout shift during image loading */
img[data-enhanced] {
    display: block;
    background-color: #444;  /* Changed from #333 to lighter color */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* About page image specific styles */
.about-image-section img.image-loading {
    min-height: 300px;
    background-color: #444;  /* Changed from #222 to lighter color */
    /* Add subtle loading pattern instead of solid color */
    background-image: 
        repeating-linear-gradient(
            45deg,
            #444,
            #444 8px,
            #555 8px,
            #555 16px
        );
}

.about-image-section img.image-error {
    min-height: 300px;
    background-color: #444;  /* Changed from #222 to lighter color */
    border: 2px dashed #888;  /* Changed from #555 to more visible */
}

/* Enhanced about image loading fixes */
.about-image-section img {
    /* Ensure image always has some content visible */
    background: linear-gradient(45deg, #444 25%, transparent 25%), 
                linear-gradient(-45deg, #444 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #444 75%), 
                linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Prevent completely black appearance */
    min-height: 200px;
}

.about-image-section img.image-loading {
    min-height: 300px;
    /* Lighter background to prevent black appearance */
    background-color: #444;
    /* Add subtle pattern to indicate loading */
    background-image: linear-gradient(45deg, #555 25%, transparent 25%), 
                      linear-gradient(-45deg, #555 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #555 75%), 
                      linear-gradient(-45deg, transparent 75%, #555 75%);
    background-size: 30px 30px;
    background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
}

.about-image-section img.image-error {
    min-height: 300px;
    /* Lighter error background */
    background-color: #444;
    border: 2px dashed #888;
    /* Add error pattern */
    background-image: repeating-linear-gradient(
        45deg,
        #444,
        #444 10px,
        #666 10px,
        #666 20px
    );
}

/* Ensure successful load removes all background patterns */
.about-image-section img.image-loaded {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Critical image priority loading */
.about-image-section img[data-critical] {
    /* Higher priority for critical images */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeSpeed;
    /* Force hardware acceleration */
    transform: translateZ(0);
    will-change: opacity;
    /* Ensure critical images get better loading treatment */
    background-color: #555 !important;  /* Even lighter for critical images */
}

/* Critical image enhanced loading state */
.about-image-section img[data-critical].image-loading {
    /* Special loading pattern for critical images */
    background: 
        linear-gradient(45deg, #555 25%, #666 25%, #666 50%, #555 50%, #555 75%, #666 75%),
        #555;
    background-size: 20px 20px;
    animation: criticalImageLoad 2s ease-in-out infinite;
}

@keyframes criticalImageLoad {
    0% { background-position: 0 0; opacity: 0.6; }
    50% { background-position: 20px 20px; opacity: 0.8; }
    100% { background-position: 40px 40px; opacity: 0.6; }
}

/* Ensure critical images clear all loading states when loaded */
.about-image-section img[data-critical].image-loaded {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    animation: none !important;
}

/* Goal tile image specific styles - HANDLED EXCLUSIVELY BY questionnaire.js */
/* These images should NEVER have error states shown to users - questionnaire.js manages loading */
.goal-tile-image img {
    /* CRITICAL: Goal tile images are always visible with natural display */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    /* Prevent ANY error styling from external loaders */
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
    filter: none !important;
    /* CRITICAL: Hide alt text - never show text when image is loading */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Non-cycling tiles: force opacity to 1 */
/* Exclude chip tile images and hc-chip crossfade images which need opacity transitions */
.goal-tile-image img:not(#chip-tile-img):not(#chip-tile-img-back):not(.hc-chip-crossfade-img) {
    opacity: 1 !important;
}

/* Chip tile: allow opacity transitions for cross-fade cycling */
#chip-tile-img,
#chip-tile-img-back {
    transition: opacity 1.5s ease-in-out !important;
}

/* OVERRIDE: Prevent external loaders from adding error/loading classes to goal tiles */
.goal-tile-image img.image-loading,
.goal-tile-image img.image-error,
.goal-tile-image img.image-intervention {
    /* CRITICAL: Never show error states - questionnaire.js handles retries silently */
    opacity: 1 !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
    filter: none !important;
    /* Hide alt text in all states */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
}

.goal-tile-image img.image-loaded {
    opacity: 1 !important;
    filter: none !important;
    border: none !important;
    background: none !important;
    color: transparent !important;
}

/* Dark theme - keep same rules (no visible error states) */
html.theme-dark .goal-tile-image img,
html.theme-dark .goal-tile-image img.image-loading,
html.theme-dark .goal-tile-image img.image-error {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    animation: none !important;
}

/* Light theme - keep same rules (no visible error states) */
html.theme-light .goal-tile-image img,
html.theme-light .goal-tile-image img.image-loading,
html.theme-light .goal-tile-image img.image-error {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    animation: none !important;
}

/* Loading shimmer animation - NOT used for goal tiles */
@keyframes loading-shimmer {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* Game tile image specific styles */
.game-tile img.image-loading {
    min-height: 150px;
    background-color: #333;
}

.game-tile img.image-error {
    min-height: 150px;
    background-color: #333;
    border: 2px dashed #555;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    img.image-loading,
    img.image-error {
        min-height: 80px;
        min-width: 80px;
    }
    
    .about-image-section img.image-loading,
    .about-image-section img.image-error {
        min-height: 200px;
    }
    
    .goal-tile-image img.image-loading,
    .goal-tile-image img.image-error {
        min-height: 120px;
    }
    
    .game-tile img.image-loading,
    .game-tile img.image-error {
        min-height: 100px;
    }
}

/* PWA specific optimizations */
@media (display-mode: standalone) {
    img[data-enhanced] {
        /* Hardware acceleration for PWA */
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform, opacity;
    }
    
    img.image-loading {
        /* Optimize for PWA rendering */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimizeSpeed;
    }
}

/* Light theme adjustments */
html.theme-light img.image-loading {
    background-color: #f0f0f0;
}

html.theme-light img.image-error {
    background-color: #f0f0f0;
    border-color: #ccc;
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    img[data-enhanced] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    img.image-loading {
        animation: none;
    }
    
    img.image-loaded,
    img.image-error {
        transition: none;
    }
}

/* Loading overlay for critical images */
.image-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.image-loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top: 3px solid #D4A574;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error retry button */
.image-retry-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: 1px solid #555;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: monospace;
    font-size: 12px;
    transition: all 0.3s ease;
    z-index: 20;
}

.image-retry-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: #D4A574;
    color: #D4A574;
}