/**
 * Стили для системы ленивой загрузки изображений
 */

/* Изображения в процессе загрузки */
img.lazy-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    min-height: 120px; /* Минимальная высота для thumbnail */
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Анимация загрузки */
@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Загруженные изображения */
img.lazy-loaded {
    animation: fade-in 0.3s ease;
}

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

/* Ошибка загрузки */
img.lazy-error {
    background: #f5f5f5 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ccc"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/50px no-repeat;
    min-height: 120px;
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
    img.lazy-loading {
        min-height: 100px;
    }
    
    /* Уменьшаем анимацию на мобильных для экономии батареи */
    @media (prefers-reduced-motion: reduce) {
        img.lazy-loading {
            animation: none;
            background: #f0f0f0;
        }
        
        img.lazy-loaded {
            animation: none;
        }
    }
}

/* Критические стили для первого экрана */
.above-fold img {
    /* Изображения в первом экране загружаются сразу */
    animation: none !important;
    background: none !important;
}

/* Оптимизация для thumbnail изображений */
.video-card img,
.category-card img,
.actor-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.video-card img.lazy-loading {
    min-height: 120px;
}

@media (max-width: 480px) {
    .video-card img.lazy-loading {
        min-height: 90px;
    }
}