/* 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-open-sans { /* Updated to Open Sans */
    font-family: 'Open Sans', sans-serif;
}

.font-montserrat { /* Updated to Montserrat */
    font-family: 'Montserrat', serif;
}

/* Новая цветовая палитра: Фиолетово-белая */

body {
    /* Глубокий, богатый градиент из фиолетовых оттенков */
    background: linear-gradient(to bottom right, #4A0E4A, #6A1A6A, #3A0B3A); /* Оттенки глубокого фиолетового */
    background-attachment: fixed;
    color: #F8F8F8; /* Мягкий, почти белый текст */
}

/* Общие элементы для более темных фонов */
.bg-gradient-to-br.from-purple-900.to-indigo-950 { /* Обновленный класс из HTML */
    background: linear-gradient(to bottom right, #4A0E4A, #6A1A6A); /* Используем новые цвета */
}

.bg-gradient-to-br.from-purple-800.to-purple-900 { /* Обновленный класс из HTML */
    background: linear-gradient(to bottom right, #6A1A6A, #4A0E4A); /* Используем новые цвета */
}

.bg-gradient-to-br.from-gray-900.to-black { /* Сохраняем темный, но с фиолетовым оттенком */
    background: linear-gradient(to bottom right, #2A082A, #1A051A); /* Еще темнее для контраста */
}

.bg-gradient-to-br.from-black.to-purple-900 { /* Темный к теплому фиолетовому */
    background: linear-gradient(to bottom right, #1A051A, #4A0E4A); /* Темный к фиолетовому */
}


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

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

header a.hover\:text-purple-300:hover { /* Обновленный класс из HTML */
    color: #DDAADD; /* Светлый фиолетовый акцент для навигации */
}

/* Кнопки и акцентные элементы */
.bg-purple-600 { /* Обновленный класс из HTML */
    background-color: #8A2BE2; /* Средний фиолетовый для кнопок */
}

.hover\:bg-purple-700:hover { /* Обновленный класс из HTML */
    background-color: #6A1EBD; /* Темнее фиолетовый при наведении */
}

.text-purple-300 { /* Обновленный класс из HTML */
    color: #DDAADD; /* Светлый фиолетовый для акцентного текста */
}

.text-purple-400 { /* Обновленный класс из HTML */
    color: #AF7BFF; /* Немного ярче фиолетовый для акцентного текста */
}

.border-purple-700 { /* Обновленный класс из HTML */
    border-color: #6A1EBD; /* Темно-фиолетовый для рамок */
}

.focus\:ring-purple-400:focus { /* Обновленный класс из HTML */
    --tw-ring-color: #AF7BFF; /* Фиолетовый для фокуса */
}

/* Карточки и блоки */
.bg-purple-800 { /* Обновленный класс из HTML */
    background-color: #5A115A; /* Темный фиолетовый для карточек */
    border-color: #7B2F7B; /* Фиолетовый для рамок */
}

.text-white { /* Основной текст, уже белый в HTML */
    color: #F8F8F8; /* Почти белый текст */
}

.text-gray-100 { /* Переназначено для общей белой гаммы */
    color: #F8F8F8; /* Почти белый текст */
}

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

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

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

/* Мобильное меню */
@media (max-width: 767px) {
    #main-navigation {
        background-color: #1A051A !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: #1A051A; /* Очень темный, почти черный фиолетовый оверлей */
    opacity: 0.75;
}