/* ==================== ELEGANT ANIMATIONS ==================== */

/* Очень тонкая fade-in анимация только при загрузке */
@keyframes subtleFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Очень тонкое появление элементов */
.card, 
.grid-item, 
.news-card,
.info-box,
.feature-card {
    animation: subtleFadeIn 0.4s ease-out;
}

.feature-card:nth-child(1) { animation-delay: 0.05s; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.15s; }
.feature-card:nth-child(4) { animation-delay: 0.2s; }

/* ==================== SMOOTH TRANSITIONS ==================== */

/* Гладкие переходы для всех интерактивных элементов */
.btn-primary,
.btn-secondary,
.donate-btn,
.card,
.grid-item,
.news-card,
.feature-card,
.main-nav a,
.logo-section img,
a {
    transition: all 0.25s ease;
}

/* Очень гладкое изменение теней при наведении */
.card:hover,
.grid-item:hover,
.news-card:hover,
.feature-card:hover {
    box-shadow: 0 8px 20px rgba(158, 27, 50, 0.2);
    transform: translateY(-2px);
    transition: all 0.25s ease;
}

/* Элегантное изменение цвета ссылок */
.main-nav a {
    color: var(--text-dark);
}

.main-nav a:after {
    background: var(--burgundy);
    height: 2px;
}

.main-nav a:hover {
    color: var(--burgundy);
}

/* Кнопки - только легкое изменение тени и позиции */
.btn-primary:hover,
.btn-secondary:hover,
.donate-btn:hover {
    box-shadow: 0 6px 18px rgba(158, 27, 50, 0.3);
    transform: translateY(-1px);
}

/* Логотип - легкое увеличение при наведении */
.logo-section img:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 3px 8px rgba(212, 175, 55, 0.3));
}

/* ==================== HERO ANIMATIONS ==================== */

.hero {
    animation: subtleFadeIn 0.5s ease-out;
}

.hero h1 {
    animation: subtleFadeIn 0.6s ease-out 0.1s both;
}

.hero p {
    animation: subtleFadeIn 0.6s ease-out 0.15s both;
}

.hero-buttons {
    animation: subtleFadeIn 0.6s ease-out 0.2s both;
}

/* ==================== SMOOTH COLOR CHANGES ==================== */

/* Мягкие цветовые переходы */
.info-box {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.info-box:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

/* ==================== SCROLL ANIMATIONS ==================== */

/* Гладкая прокрутка */
html {
    scroll-behavior: smooth;
}

/* Плавное появление кнопки вверх */
.scroll-top-btn {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-top-btn:hover {
    box-shadow: 0 6px 16px rgba(158, 27, 50, 0.25);
    transform: translateY(-1px);
    transition: all 0.25s ease;
}

/* ==================== FORM ANIMATIONS ==================== */

.form-group input,
.form-group textarea {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--burgundy);
    box-shadow: 0 0 0 3px rgba(158, 27, 50, 0.1);
}

/* ==================== DROPDOWN ANIMATIONS ==================== */

.dropdown-menu {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown-menu a {
    transition: all 0.2s ease;
}

.dropdown-menu a:hover {
    background: var(--light-bg);
    padding-left: 18px;
}

/* ==================== MODAL ANIMATIONS ==================== */

.modal {
    transition: opacity 0.3s ease;
}

.modal-content {
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    animation: subtleFadeIn 0.3s ease-out;
}

/* ==================== HOVER EFFECTS ==================== */

/* Тонкое изменение контраста на наведении */
.card h3,
.grid-item h3,
.news-card h3 {
    transition: color 0.25s ease;
}

.card:hover h3,
.grid-item:hover h3,
.news-card:hover h3 {
    color: var(--burgundy);
}

/* ==================== FOOTER ANIMATIONS ==================== */

footer {
    animation: subtleFadeIn 0.5s ease-out;
}

.footer-section h3 {
    animation: subtleFadeIn 0.5s ease-out;
}

/* ==================== IMAGE LOADING ==================== */

img {
    animation: subtleFadeIn 0.3s ease-out;
}

/* ==================== GENERAL HIGHLIGHT BLOCKS ==================== */

.general-highlight,
.president-highlight {
    animation: subtleFadeIn 0.4s ease-out;
    transition: all 0.25s ease;
}

.general-highlight:hover,
.president-highlight:hover {
    box-shadow: 0 8px 20px rgba(158, 27, 50, 0.15);
}

/* ==================== STAT BOXES ==================== */

.stat-box {
    animation: subtleFadeIn 0.3s ease-out;
    transition: all 0.25s ease;
}

.stat-box:hover {
    transform: scale(1.02);
}

/* ==================== BADGE ANIMATIONS ==================== */

.general-badge {
    transition: all 0.25s ease;
}

.general-badge:hover {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
    transform: scale(1.05);
}

/* ==================== ACCESSIBILITY ==================== */

/* Отключаем анимации для пользователей, предпочитающих меньше движения */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    html {
        scroll-behavior: auto !important;
    }
}

/* ==================== OPTIMIZED FOR PERFORMANCE ==================== */

/* Используем GPU для оптимизации */
.card,
.grid-item,
.news-card,
.feature-card,
.btn-primary,
.btn-secondary,
.donate-btn {
    will-change: transform, box-shadow;
    transform: translateZ(0);
}