/**
 * assets/css/main.css
 * Легка сучасна дизайн-система + делікатні анімації
 * Стиль: Light + Modern + Subtle Animations
 */

:root {
    --accent: #0ea5e9;
    --accent-dark: #0284c8;
}

/* === Базова типографіка === */
body {
    font-family: 'Inter', system_ui, sans-serif;
}

.heading-font {
    font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* === Легкі анімації === */
.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-slide-up {
    animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Stagger animation для списків */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: staggerFade 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 80ms; }
.stagger-item:nth-child(2) { animation-delay: 160ms; }
.stagger-item:nth-child(3) { animation-delay: 240ms; }
.stagger-item:nth-child(4) { animation-delay: 320ms; }
.stagger-item:nth-child(5) { animation-delay: 400ms; }
.stagger-item:nth-child(6) { animation-delay: 480ms; }

@keyframes staggerFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Картки з легкими ефектами === */
.card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
}

/* === Кнопки === */
.btn {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: scale(0.985);
}

/* === Hero градієнт === */
.hero-gradient {
    background: linear-gradient(145deg, #0f172a 0%, #1e2937 100%);
}

/* === Мобільне меню анімація === */
#mobile-menu {
    animation: mobileMenuEnter 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

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

/* === Мовний перемикач === */
.language-dropdown {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
}

/* === Плавні переходи для посилань === */
a {
    transition: color 0.15s ease;
}

/* === Секції === */
.section {
    scroll-margin-top: 80px;
}

/* === Легка тінь для хедера === */
header {
    box-shadow: 0 1px 0 0 rgb(15 23 42 / 0.04);
}