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

/* Базовые анимации появления */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Классы для анимаций */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* Анимация появления снизу */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Анимация появления слева */
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Анимация появления справа */
.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Анимация масштабирования */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-in.animated {
    opacity: 1;
    transform: scale(1);
}

/* Задержки для последовательной анимации */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* Анимация при загрузке страницы */
.hero__title {
    animation: fadeInUp 1s ease-out;
}

.hero__subtitle {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero__stats {
    animation: fadeInUp 1s ease-out 0.4s both;
}

.hero__btn {
    animation: scaleIn 0.8s ease-out 0.6s both;
}

.hero__badge {
    animation: fadeInUp 1s ease-out 0.8s both;
}

.hero__social {
    animation: fadeInUp 1s ease-out 1s both;
}

.hero__image {
    animation: fadeInRight 1s ease-out 0.3s both;
}

/* Анимация header при загрузке */
.header {
    animation: fadeInDown 0.8s ease-out;
}

/* Hover эффекты */
.advantages__card,
.categories__card,
.portfolio__card,
.fillings__card,
.reviews__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantages__card:hover,
.categories__card:hover,
.portfolio__card:hover,
.fillings__card:hover,
.reviews__card:hover {
    transform: translateY(-5px);
}

/* Плавное появление кнопок */
.hero__btn,
.categories__btn,
.help__btn {
    transition: all 0.3s ease;
}

.hero__btn:hover,
.categories__btn:hover,
.help__btn:hover {
    transform: scale(1.05);
}

/* Анимация для FAQ */
.faq__item {
    transition: all 0.3s ease;
}

/* Пульсация для важных элементов */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.hero__badge {
    animation: fadeInUp 1s ease-out 0.8s both, pulse 2s ease-in-out 2s infinite;
}