/* === Стили для хедера === */

/* Переменные (десктоп) */
:root {
    --logo-width: 270px;
    --logo-height: 81px;
    --logo-max-width: 90vw;
    --logo-max-height: 60px;
    --header-height: 50px;
    --header-bg: rgba(255, 255, 255, 0.2);
    --header-scrolled-bg: rgba(255, 255, 255, 0.98);
    --logo-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Логотип */
.home-header img.logo-img,
.home-header svg {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-max-width);
    max-height: var(--logo-max-height);
    transition: all 0.3s ease;
    filter: drop-shadow(var(--logo-shadow));
    object-fit: contain;
}

/* Анимация появления */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-header img.logo-img,
.home-header svg {
    animation: fadeInUp 1.2s ease forwards;
}

/* Хедер */
.home-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Эффект при прокрутке */
.home-header.scrolled {
    background: var(--header-scrolled-bg);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.home-header.scrolled img.logo-img,
.home-header.scrolled svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) brightness(0.95);
}

/* === Адаптивность под мобильные === */

@media (max-width: 768px) {
    :root {
        --logo-width: 270px;
        --logo-height: 81px;
        --header-height: 50px;
    }
}

@media (max-width: 480px) {
    :root {
        --logo-width: 270px;
        --logo-height: 81px;
        --header-height: 45px;
    }
}

@media (max-width: 375px) {
    :root {
        --logo-width: 120px;
        --logo-height: 40px;
    }
}

@media (max-width: 320px) {
    :root {
        --logo-width: 100px;
        --logo-height: 35px;
    }
}