/* css/home.css */

/* 1. Налаштування секції (щоб текст і картинка були поруч) */
.hero-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 150px 10% 80px; /* Великий відступ зверху під хедер */
    min-height: 80vh; /* Займає більшу частину екрана */
    background-color: #ffffff; /* Переконуємося, що фон білий */
}

/* 2. Налаштування тексту */
.hero-text h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
    max-width: 600px;
}

.hero-text p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Кнопка */
.btn-gold {
    background-color: #c5a059;
    color: #ffffff;
    border: none;
    padding: 18px 45px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.btn-gold:hover {
    background-color: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 3. НАЛАШТУВАННЯ КАРТИНКИ ТА АНІМАЦІЇ */
.cat-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-cat {
    max-width: 500px; /* Обмежуємо розмір твого якісного лого */
    width: 100%;
    height: auto;
    
    /* 🎯 ПРИВ'ЯЗКА АНІМАЦІЇ */
    animation: floating 3s ease-in-out infinite; /* Назва, тривалість, тип, нескінченно */
    
    /* Додаємо м'яку тінь для об'єму */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
}

/* 4. ОПИС АНІМАЦІЇ "СТРИБКА" (ПЛАВНЕ ПЛАВАННЯ) */
@keyframes floating {
    0% {
        transform: translateY(0px); /* Початкова позиція */
    }
    50% {
        transform: translateY(-20px); /* Плавно піднімається на 20px вгору */
    }
    100% {
        transform: translateY(0px); /* Повертається назад */
    }
}

/* --- RESPONSIVE HOME --- */
@media (max-width: 992px) {
    .hero-home {
        flex-direction: column-reverse; /* Картинка зверху, текст знизу */
        text-align: center;
        padding: 120px 5% 50px;
        gap: 40px;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-text p {
        margin: 0 auto 30px;
    }

    .hero-cat {
        max-width: 300px; /* Зменшуємо котика/лого на мобільних */
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 2rem;
    }
}