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

/* Изображение до загрузки */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: var(--base-2, #1d222a);
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

/* Изображение во время загрузки */
.lazy-image.lazy-loading {
    opacity: 0;
    background-color: var(--base-2, #1d222a);
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

/* Изображение после загрузки */
.lazy-image.lazy-loaded {
    opacity: 1;
    color: initial;
    font-size: initial;
    text-indent: 0;
}

/* Изображение с ошибкой загрузки */
.lazy-image.lazy-error {
    opacity: 0.3;
    background-color: var(--base-2, #1d222a);
}

/* Анимация загрузки (опционально) */
@keyframes lazy-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

.lazy-image.lazy-loading {
    animation: lazy-pulse 1.5s ease-in-out infinite;
}

/* Для светлой темы */
:root:not(.dark-theme) .lazy-image {
    background-color: #f0f0f0;
}

:root:not(.dark-theme) .lazy-image.lazy-error {
    background-color: #f0f0f0;
}