/**
 * CTR Lazy Loading Styles
 * Provides visual feedback during image loading states
 */

/* Base state for lazy images - no placeholder by default */
img[data-api-url], img[data-src] {
    width: 100%;
    height: auto;
    display: block;
}

/* Loading state - only show placeholder when explicitly marked as loading */
img.ctr-lazy-image.ctr-loading,
.ctr-loading {
    position: relative;
    background-color: #f5f5f5;
    background-image: linear-gradient(45deg, #f5f5f5 25%, #e0e0e0 25%, #e0e0e0 50%, #f5f5f5 50%, #f5f5f5 75%, #e0e0e0 75%, #e0e0e0);
    background-size: 20px 20px;
    animation: ctr-loading-animation 1s linear infinite;
    /* Use aspect-ratio to prevent shifting */
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Loading animation */
@keyframes ctr-loading-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}

/* Add a loading spinner overlay */
img.ctr-lazy-image.ctr-loading::before,
.ctr-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: ctr-spinner 1s linear infinite;
    z-index: 1;
}

@keyframes ctr-spinner {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Successfully loaded state */
.ctr-loaded {
    /* Remove aspect-ratio constraint once loaded to show real dimensions */
    aspect-ratio: auto !important;
    /* Smooth fade-in effect */
    animation: ctr-fade-in 0.3s ease-in-out;
}

@keyframes ctr-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Error state */
.ctr-error {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    position: relative;
    aspect-ratio: 3 / 2;
}

.ctr-error::after {
    content: '⚠️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    opacity: 0.5;
}

/* Responsive loading states */
@media (max-width: 768px) {
    img.ctr-lazy-image.ctr-loading::before,
    .ctr-loading::before {
        width: 20px;
        height: 20px;
    }
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ctr-loading {
        animation: none;
        background-image: none;
        background-color: #f0f0f0;
    }
    
    .ctr-loading::before {
        animation: none;
        border: 2px solid #ccc;
        border-top-color: #007cba;
    }
    
    .ctr-loaded {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ctr-loading {
        background-color: ButtonFace;
        border: 1px solid ButtonText;
    }
    
    .ctr-error {
        background-color: Canvas;
        border: 2px solid CanvasText;
    }
}