/**
 * HERO SECTION - CUSTOM OVERRIDES
 * Файл для точечной настройки каждого элемента hero секции
 * Версия: 1.0.0
 */

/* ============================================
   MAIN BOX - БАННЕР С ИЗОБРАЖЕНИЕМ
   ============================================ */

/* Основной баннер с изображением */
#main-box-banner {
    position: relative;
    width: 800px !important; /* Ширина 800px */
    height: 600px !important; /* Высота 600px */
    background-color: #4A4A4A;
    background-image: url('../media/fotobannera.png') !important; /* Убран градиент-затемнение */
    background-size: cover !important; /* Заполняет весь бокс */
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 4px solid var(--color-red, #E31E24);
    border-radius: 24px;
    box-shadow:
        0 40px 80px rgba(227, 30, 36, 0.4),
        inset 0 0 80px rgba(227, 30, 36, 0.15);
    animation: rotateBox 20s ease-in-out infinite;
    transform-style: preserve-3d;
    z-index: 1; /* Убедимся что баннер выше фона */
    overflow: hidden; /* Обрезает изображение по границам бокса */
}

/* Свечение за баннером */
#main-box-banner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: var(--color-red, #E31E24);
    opacity: 0; /* УБРАНО СВЕЧЕНИЕ */
    border-radius: 50%;
    filter: blur(60px);
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: -1; /* Свечение за баннером */
    display: none; /* Полностью отключено */
}

/* ============================================
   HERO SECTION - СЕКЦИЯ
   ============================================ */

#hero-section {
    position: relative;
    z-index: 10;
}

/* ============================================
   HERO LEFT SIDE - ЛЕВАЯ ЧАСТЬ
   ============================================ */

#hero-left-side {
    position: relative;
    z-index: 2;
}

#hero-content-wrapper {
    position: relative;
    z-index: 3;
}

#hero-main-title {
    /* Стили для основного заголовка */
}

#hero-title-accent {
    /* Стили для красного акцента в заголовке */
}

#hero-subtitle-text {
    /* Стили для подзаголовка */
}

#hero-buttons-wrapper {
    /* Стили для контейнера кнопок */
}

#hero-btn-primary {
    /* Стили для основной кнопки */
}

#hero-btn-secondary {
    /* Стили для второстепенной кнопки */
}

/* ============================================
   HERO RIGHT SIDE - ПРАВАЯ ЧАСТЬ
   ============================================ */

#hero-right-side {
    position: relative;
    z-index: 1;
    overflow: visible; /* Убедимся что элементы не обрезаются */
}

#hero-visual-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important; /* Элементы могут выходить за границы */
}

/* ============================================
   PRODUCT ITEMS - ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ ВОКРУГ ФОТО
   Равномерно распределены с отступами, без налипания
   ============================================ */

/* Плавающий элемент 1 - ВЕРХНИЙ ЛЕВЫЙ угол */
#product-item-1 {
    position: absolute;
    z-index: 5;
    top: -10px; /* Ближе к фото */
    left: -60px;
    width: 90px;
    height: 90px;
    animation: floatProduct 5s ease-in-out infinite;
    animation-delay: 0s;
}

/* Плавающий элемент 2 - ВЕРХНИЙ ПРАВЫЙ угол (красный) */
#product-item-2 {
    position: absolute;
    z-index: 5;
    top: -15px; /* Ближе к фото */
    right: -80px;
    width: 110px;
    height: 110px;
    animation: floatProduct 5s ease-in-out infinite;
    animation-delay: 1s;
}

/* Плавающий элемент 3 - ЛЕВАЯ СТОРОНА по центру */
#product-item-3 {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    left: -100px; /* Отступ от фото */
    width: 85px;
    height: 85px;
    animation: floatProduct 5s ease-in-out infinite;
    animation-delay: 2s;
}

/* Плавающий элемент 4 - ПРАВАЯ СТОРОНА по центру */
#product-item-4 {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    right: -110px; /* Отступ от фото */
    width: 100px;
    height: 100px;
    animation: floatProduct 5s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* Плавающий элемент 5 - НИЖНИЙ ЛЕВЫЙ угол */
#product-item-5 {
    position: absolute;
    z-index: 5;
    bottom: -50px; /* Отступ от фото */
    left: -70px;
    width: 95px;
    height: 95px;
    animation: floatProduct 5s ease-in-out infinite;
    animation-delay: 3s;
}

/* ============================================
   STATS STRIP - СТАТИСТИКА ВНИЗУ
   ============================================ */

#stats-strip-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10; /* Выше всех элементов */
    color: #FFFFFF !important; /* Белый цвет текста */
}

#stat-item-1,
#stat-item-2,
#stat-item-3 {
    color: #FFFFFF !important; /* Белый цвет */
}

#stat-item-1 .stat-number,
#stat-item-2 .stat-number,
#stat-item-3 .stat-number,
#stat-item-1 .stat-label,
#stat-item-2 .stat-label,
#stat-item-3 .stat-label {
    color: #FFFFFF !important; /* Белый цвет */
}

/* ============================================
   RESPONSIVE - АДАПТИВНЫЕ РАЗМЕРЫ
   ============================================ */

/* Планшеты (1024px и меньше) */
@media (max-width: 1024px) {
    #main-box-banner {
        width: 600px;
        height: 450px;
        background-size: cover;
    }
}

/* Мобильные (640px и меньше) */
@media (max-width: 640px) {
    #main-box-banner {
        width: 400px;
        height: 300px;
        background-size: cover;
    }
}

/* Экстра маленькие экраны (480px и меньше) */
@media (max-width: 480px) {
    #main-box-banner {
        width: 320px;
        height: 240px;
        background-size: cover;
    }
}

/* ============================================
   DEBUG - ДЛЯ ОТЛАДКИ (ЗАКОММЕНТИРОВАНО)
   ============================================ */

/*
#main-box-banner {
    border: 5px solid lime !important;
}

#hero-visual-container {
    border: 3px solid blue !important;
}

#hero-right-side {
    border: 3px solid red !important;
}
*/