/**
 * Image Loader Styles
 * Стили для оптимизации загрузки изображений
 */

/* Базовые стили для изображений с lazy loading */
img[data-src],
img[data-srcset] {
    /* Полностью скрываем изображение до загрузки - без фона, без битой иконки */
    visibility: hidden;
    opacity: 0;
}

/* Состояние загрузки */
img.is-loading {
    /* Изображение скрыто во время загрузки */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

/* Состояние после загрузки */
img.is-loaded {
    /* Изображение видимо и полностью непрозрачно */
    visibility: visible;
    opacity: 1;
    /* Плавное появление */
    transition: opacity 0.4s ease-in-out;
}

/* Состояние ошибки загрузки */
img.has-error {
    /* При ошибке показываем серый фон */
    visibility: visible;
    opacity: 0.3;
    background: #f5f5f5;
}

/* Критичные изображения (hero секция) загружаются сразу */
.hero img:not([data-src]):not([data-srcset]) {
    /* Изображения без data-src (уже с src) видимы сразу */
    visibility: visible;
    opacity: 1;
}

/* Для изображений в видимой области (above the fold) */
img.eager-load {
    visibility: visible;
    opacity: 1;
}

/* Оптимизация для изображений в блоках */
.industries__image,
.system-structure__image,
.quick-implementation__screen,
.steps__image,
.blocks__screen,
.analytics__screen,
.economy__image,
.reviews__image {
    /* Резервируем место под изображение чтобы избежать layout shift */
    min-height: 200px;
    object-fit: contain;
    /* Не показываем до загрузки */
    background: transparent;
}

/* Адаптивные размеры placeholder для разных устройств */
@media (max-width: 768px) {
    .industries__image,
    .system-structure__image,
    .quick-implementation__screen {
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    .industries__image,
    .system-structure__image,
    .quick-implementation__screen {
        min-height: 100px;
    }
}

/* Blur-up эффект для прогрессивной загрузки */
img.blur-up {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

img.blur-up.is-loaded {
    filter: blur(0);
}

/* Специальная обработка для больших изображений */
.hero__image--laptop,
.hero__image--phone,
.industries__image,
.system-structure__image {
    /* Используем will-change для оптимизации анимации */
    will-change: opacity, transform;
}

/* После загрузки сбрасываем will-change для экономии памяти */
.hero__image--laptop.is-loaded,
.hero__image--phone.is-loaded,
.industries__image.is-loaded,
.system-structure__image.is-loaded {
    will-change: auto;
}

/* Нативный lazy loading (для браузеров с поддержкой) */
/* Браузер сам управляет загрузкой через атрибут loading="lazy" */

/* Скрываем alt текст до загрузки изображения */
img[data-src]::before,
img[data-srcset]::before {
    content: '';
    display: block;
}

/* Оптимизация для SVG иконок - они загружаются сразу */
img[src$=".svg"] {
    visibility: visible;
    opacity: 1;
}

/* Preload hint для критичных изображений применяется через link rel="preload" в HTML */

/* Responsive images - адаптация под размер экрана */
img[srcset] {
    width: 100%;
    height: auto;
}

/* Оптимизация для ретина дисплеев */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Высокая плотность пикселей - загружаем 2x версии через srcset */
}

/* Плавная анимация при скролле (optional, для плавности) */
@media (prefers-reduced-motion: no-preference) {
    img.is-loading {
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
}

/* Уважаем предпочтения пользователя по анимациям */
@media (prefers-reduced-motion: reduce) {
    img.is-loading,
    img.is-loaded {
        animation: none;
        transition: none;
    }
}

/* Темная тема - корректируем цвета placeholder */
@media (prefers-color-scheme: dark) {
    img[data-src],
    img[data-srcset] {
        background-color: #2a2a2a;
        background-image: 
            linear-gradient(
                90deg,
                #2a2a2a 0%,
                #3a3a3a 50%,
                #2a2a2a 100%
            );
    }
    
    img.has-error {
        background: #1a1a1a;
    }
}

/* Print optimization - загружаем все изображения для печати */
@media print {
    img[data-src],
    img[data-srcset] {
        opacity: 1 !important;
        animation: none !important;
    }
}