/* ==========================================================================
   СТИЛІ «МАТОВЕ СКЛО» ТА АНІМАЦІЇ ШАПКИ
   (Підключати після основного файла style.css)
   ========================================================================== */

/* --- 1. ПЛАШКА ЗАГОЛОВКА («Матове скло» + Рух + Світловий проблиск) --- */
.slider_info_h1 {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.25) !important;

    /* Плавний рух вгору-вниз */
    animation: floatGlass 4s ease-in-out infinite !important;
}

/* Анімація паріння вгору-вниз */
@keyframes floatGlass {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Світловий проблиск по плашці заголовка раз на кілька секунд */
.slider_info_h1::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
            115deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    pointer-events: none;
    animation: glassShine 6s infinite ease-in-out;
}

@keyframes glassShine {
    0% {
        left: -150%;
    }
    25% {
        left: 150%;
    }
    100% {
        left: 150%; /* Пауза між проблисками */
    }
}

/* --- 2. СТИЛІЗОВАНИЙ КОНТЕЙНЕР ТА ПЛАШКИ ЛОГОТИПІВ --- */
.header_logos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-right: 0 !important;
}

.header_logos img {
    margin: 0 !important;
    padding: 8px 14px !important;
    width: 135px !important;
    height: auto !important;
    box-sizing: border-box !important;

    /* Оформлення кожної капсули з логотипом у стилі «матове скло» */
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 0 10px rgba(255, 255, 255, 0.3) !important;

    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}

/* --- 3. ПОЧЕРГОВА АНІМАЦІЯ ЛОГОТИПІВ (Загальний цикл 9 секунд) --- */

/* 1) AVTO-Gumm поліуретанові (Легке збільшення + синій відблиск по контуру) */
.header_logos img.avtogumm {
    animation: animAvtoGumm 9s infinite ease-in-out;
}

@keyframes animAvtoGumm {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px transparent);
    }
    4% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 12px #0088ff) drop-shadow(0 0 4px #00c3ff);
        box-shadow: 0 6px 24px rgba(0, 136, 255, 0.4), inset 0 0 12px rgba(0, 136, 255, 0.5);
    }
    16% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px transparent);
    }
}

/* 2) AVTO-TEX (Світлова хвиля з червоним підсвічуванням) */
.header_logos img.avtotex {
    animation: animAvtoTex 9s infinite ease-in-out;
}

@keyframes animAvtoTex {
    0%, 30%, 50%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px transparent) brightness(1);
    }
    37% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 14px #e42f2f) drop-shadow(0 0 6px #ff6b6b) brightness(1.2);
        box-shadow: 0 6px 24px rgba(228, 47, 47, 0.45), inset 0 0 12px rgba(255, 100, 100, 0.5);
    }
}

/* 3) Hybrid (Два сині відблиски сходяться до центру) */
.header_logos img.hybrid {
    animation: animHybrid 9s infinite ease-in-out;
}

@keyframes animHybrid {
    0%, 63%, 83%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px transparent);
    }
    68% {
        /* Відблиски розведені по боках */
        filter: drop-shadow(-14px 0 8px #00c8ff) drop-shadow(14px 0 8px #00c8ff);
        transform: scale(1.03);
    }
    73% {
        /* Відблиски зійшлися в один яскравий центр */
        filter: drop-shadow(0 0 16px #0055ff) drop-shadow(0 0 6px #ffffff);
        transform: scale(1.07);
        box-shadow: 0 6px 24px rgba(0, 100, 255, 0.5), inset 0 0 12px rgba(100, 200, 255, 0.5);
    }
}

/* --- 4. ЕФЕКТ ПРИ НАВЕДЕННІ ТУРБО/HOVER НА ЛОГОТИП --- */
.header_logos img:hover {
    animation-play-state: paused !important; /* Ставить анімацію на паузу при курсорі */
    transform: translateY(-5px) scale(1.06) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 28px rgba(255, 255, 255, 0.4),
    0 0 15px rgba(255, 255, 255, 0.6) !important;
    filter: brightness(1.15) !important;
    cursor: pointer;
}

/* --- 5. АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ --- */
@media screen and (max-width: 800px) {
    .header_logos {


    }
    .header_logos img {
        width: 28vw !important;
        max-width: 120px !important;
        padding: 6px 8px !important;
    }
}


/* ==========================================================================
   АДАПТИВ ТА ВИРІВНЯННЯ ДЛЯ ЕКРАНІВ ВІД 801px (Мобільну версію <= 800px не зачіпає)
   ========================================================================== */

@media screen and (min-width: 801px) {

    /* 1. Спільний контейнер шапки — Flexbox з вертикальним центруванням */
    .slider_block .cont2 {
        display: flex !important;
        align-items: center !important;     /* Центрування заголовка та логотипів по висоті */
        justify-content: space-between !important; /* Розносить заголовок вліво, логотипи вправо */
        gap: clamp(12px, 2vw, 30px) !important; /* Плавна відстань між плашкою та логотипами */
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }

    /* Прибираємо float-псевдоелементи style.css, щоб вони не ламали flex */
    .slider_block .cont2::after,
    .slider_block .cont2::before {
        display: none !important;
    }

    /* 2. Левий блок із заголовком — плавно стискається за потреби */
    .slider_info {
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 auto !important;

        min-width: 0 !important;
    }

    /* 3. Плашка заголовка — шрифт і відступи пропорційно зменшуються від 1200px до 801px */
    .slider_info_h1 {
        margin: 0 !important;
        padding: clamp(10px, 1.4vw, 20px) clamp(14px, 2vw, 35px) !important;
        font-size: clamp(20px, 2.2vw, 42px) !important; /* Текст зменшується на екранах ~1000px */
        letter-spacing: clamp(1px, 0.2vw, 3px) !important;
        box-sizing: border-box !important;
    }

    .slider_info_h1 .title {
        font-size: inherit !important;
        line-height: 1.25 !important;
    }

    .slider_info_h1 .blue_title {
        font-size: clamp(15px, 1.7vw, 28px) !important;
        line-height: 1.2 !important;
    }

    /* 4. Правий блок з логотипами */
    .header_logos {
       /* float: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: clamp(6px, 0.8vw, 12px) !important;
        flex-shrink: 0 !important;   */       /* Логотипи зберігають структуру в один ряд */
    }

    /* 5. Плашки логотипів — скидання старих негативних margin та пропорційний розмір */
    .header_logos img,
    .header_logos img.avtogumm,
    .header_logos img.hybrid,
    .header_logos img.avtotex {
        float: none !important;
        margin: 0 !important;              /* Скасовує margin-left: -80px і -150px зі style.css */
        width: clamp(92px, 13.5vw, 155px) !important; /* Ширина логотипу плавно адаптується */
        height: auto !important;
        padding: clamp(4px, 0.5vw, 8px) clamp(6px, 0.8vw, 12px) !important;
        box-sizing: border-box !important;
    }
}


/*******  *******/
/* Курсор для кнопки-картинки */
#themeToggleBtn {
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#themeToggleBtn:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* ==========================================================================
   СТИЛИ ПРИ АКТИВНОМ КЛАССЕ (.dark-theme)
   ========================================================================== */

/* 1. Изменение плашки заголовка */
.slider_block.dark-theme {
    background: linear-gradient(to right, rgb(255 255 255 / 90%) 0%, rgb(237 237 237 / 58%) 100%) !important;

}

/* 2. Изменение плашек логотипов */
.slider_info_h1 .title.dark-theme {
    background-image: linear-gradient(to bottom, #3c3c3c 0%, #454444 30%, #999999 50%, #181818 70%, #ae9797 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}