/* Статичный фон для лендинга */

/* Переопределяем основной фон */
body {
    /* Убираем fixed attachment для статичного фона */
    background-attachment: scroll !important;
    /* Фон остается на месте, не прокручивается с контентом */
    position: relative;
}

/* Создаем фиксированный слой для фона */
body::before {
    content: '';
    position: fixed; /* Это ключевое свойство - фон зафиксирован на экране */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    
    /* Фоновое изображение с затемнением */
    background: #1a1a1a; /* Фоновый цвет для областей без изображения */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                      url('/assets/images/main_bg.webp');
    background-repeat: no-repeat;
    
    /* Позиционируем и масштабируем чтобы были видны обе фуры */
    background-position: center center;
    background-size: cover; /* Используем cover чтобы изображение всегда заполняло весь экран */
    
    /* Альтернативные варианты позиционирования */
    /* background-position: center 40%; - поднять изображение выше */
    /* background-size: contain; - показать все изображение целиком */
    /* background-size: 1400px auto; - фиксированная ширина */
    
    /* Фиксируем фон на месте */
    will-change: transform;
}

/* Для больших экранов */
@media (min-width: 1400px) {
    body::before {
        background-size: 100% auto; /* На больших экранах показываем больше */
        background-position: center center;
    }
}

/* Для средних экранов */
@media (min-width: 768px) and (max-width: 1399px) {
    body::before {
        background-size: 110% auto;
        background-position: center 45%; /* Немного поднимаем */
    }
}

/* Fallback для браузеров без поддержки WebP */
.no-webp body::before {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                     url('/assets/images/main_bg.jpeg');
}

/* Убираем динамическую загрузку фона */
body.bg-loaded {
    background: none !important;
}

/* Все секции должны быть выше фона */
section,
.content-section,
.hero-section {
    position: relative;
    z-index: 1;
}

/* Убеждаемся, что контент может прокручиваться */
html {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    min-height: 100%;
    position: relative;
    /* Убираем фон с body, он теперь на ::before */
    background: none !important;
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
    /* На мобильных используем фиксированный viewport */
    body::before {
        position: fixed;
        /* Важно: используем viewport units для правильного позиционирования */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Отключаем will-change для экономии ресурсов */
        will-change: auto;
        
        /* Заполняем весь экран без серых полос */
        background-size: cover !important;
        background-position: center center !important;
        
        /* Фиксы для правильной работы fixed на мобильных */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    body {
        /* Минимальная высота для корректного отображения фона */
        min-height: 100vh;
        overflow-x: hidden;
        /* Важно для iOS */
        position: relative;
        height: 100%;
    }
    
    /* Фикс для правильного скролла контента */
    html {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    body::before {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Для ландшафтной ориентации на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    body::before {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Специальная оптимизация для iOS Safari */
@supports (-webkit-touch-callout: none) {
    body::before {
        /* Фикс для iOS Safari */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        /* Используем -webkit-fill-available для iOS */
        height: -webkit-fill-available;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Важно для iOS - предотвращаем изменение размера при скролле */
        background-attachment: scroll !important;
    }
}

/* Убираем артефакты при прокрутке */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    body::before {
        /* Предотвращаем "прыжки" фона при прокрутке */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
}

/* Альтернативный вариант со статичным градиентом */
.static-gradient-bg body::before {
    /* Простой градиент вместо изображения для лучшей производительности */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}

/* Плавные переходы между секциями */
.content-section {
    /* Убираем фон полностью */
    background: none !important;
    backdrop-filter: none;
    transition: none;
}

/* Контейнеры контента с лучшей читаемостью */
.content-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Темные контейнеры */
.dark-content-container {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}