/* styles/main.css */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.8s ease-out forwards;
}

.font-lato {
    font-family: 'Lato', sans-serif;
}

.font-merriweather {
    font-family: 'Merriweather', serif;
}

/* Новая цветовая палитра */

body {
    /* Глубокий, богатый градиент, вдохновленный старинным вином и землей */
    background: linear-gradient(to bottom right, #3A1C1C, #5C2D2D, #2B1616); /* Оттенки бордового, коричневого и темного красного */
    background-attachment: fixed;
    color: #E0DBCF; /* Мягкий, теплый светлый текст */
}

/* Общие элементы для более темных фонов */
.bg-gradient-to-br.from-green-900.to-emerald-950 {
    background: linear-gradient(to bottom right, #3A1C1C, #5C2D2D); /* Используем новые цвета */
}

.bg-gradient-to-br.from-green-800.to-green-900 {
    background: linear-gradient(to bottom right, #5C2D2D, #3A1C1C); /* Используем новые цвета */
}

.bg-gradient-to-br.from-gray-900.to-black {
    background: linear-gradient(to bottom right, #2B1616, #1A0D0D); /* Еще темнее для контраста */
}

.bg-gradient-to-br.from-black.to-green-900 {
    background: linear-gradient(to bottom right, #1A0D0D, #3A1C1C); /* Темный к теплому */
}


/* Хедер */
header {
    background-color: #2B1616; /* Глубокий коричневый для хедера */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

header a.text-white {
    color: #E0DBCF; /* Светлый текст для названия сайта */
}

header a.hover\:text-yellow-400:hover {
    color: #D4AF37; /* Золотой акцент для навигации */
}

/* Кнопки и акцентные элементы */
.bg-yellow-600 {
    background-color: #D4AF37; /* Золотой цвет для кнопок */
}

.hover\:bg-yellow-700:hover {
    background-color: #C0A12E; /* Темнее золотой при наведении */
}

.text-yellow-400 {
    color: #D4AF37; /* Золотой цвет для акцентного текста */
}

.text-yellow-500 {
    color: #D4AF37; /* Золотой цвет для акцентного текста */
}

.border-yellow-700 {
    border-color: #C0A12E; /* Темно-золотой для рамок */
}

.focus\:ring-yellow-400:focus {
    --tw-ring-color: #D4AF37; /* Золотой для фокуса */
}

/* Карточки и блоки */
.bg-gray-800 {
    background-color: #3C2727; /* Темно-бордовый/коричневый для карточек */
    border-color: #6B4E4E; /* Бордовый для рамок */
}

.text-gray-100 {
    color: #E0DBCF; /* Светлый текст */
}

.text-gray-200 {
    color: #C2BCB3; /* Чуть темнее светлый текст */
}

.text-gray-300 {
    color: #A39E96; /* Еще темнее светлый текст */
}

.text-gray-400 {
    color: #858079; /* Серый текст, подходит для футера */
}

/* Мобильное меню */
@media (max-width: 767px) {
    #main-navigation {
        background-color: #1A0D0D !important; /* Очень темный фон для мобильного меню */
    }
}

/* Фон баннера Hero */
.hero-background {
    background-size: cover;
    background-position: center;
    transform: scale(1.0);
    transition: transform 0.5s ease-out;
}

.hero-background.scrolled {
    transform: scale(1.05);
}

.hero-overlay {
    background-color: #1A0D0D; /* Очень темный, почти черный, оверлей */
    opacity: 0.75;
}