/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide down animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation classes */
.animate-fade-in {
    animation: fadeIn var(--transition-base);
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-slide-down {
    animation: slideDown 0.6s ease-out;
}

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

/* Scroll reveal classes */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Секции всегда должны быть видны, даже если случайно получили класс scroll-reveal */
section.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: если JavaScript не загрузился, показываем элементы */
.no-js .scroll-reveal,
.no-js .scroll-reveal-fade {
    opacity: 1;
    transform: translateY(0);
}

/* Показываем элементы, которые уже видны при загрузке */
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-fade.revealed {
    opacity: 1;
}

.scroll-reveal-fade {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.scroll-reveal-fade.revealed {
    opacity: 1;
}

/* Stagger animation delay */
.scroll-reveal:nth-child(1) { transition-delay: 0s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal:nth-child(6) { transition-delay: 0.5s; }

/* Wave appear animation */
@keyframes waveAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scaleY(0.7);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Wave divider animation classes - используем scroll-reveal для появления при скролле */
.section-divider--wave.scroll-reveal-fade,
.section-divider--wave-reverse.scroll-reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.section-divider--wave.scroll-reveal-fade.revealed,
.section-divider--wave-reverse.scroll-reveal-fade.revealed {
    opacity: 1;
}

/* Fallback: если JavaScript не загрузился, показываем волны */
.no-js .section-divider--wave.scroll-reveal-fade,
.no-js .section-divider--wave-reverse.scroll-reveal-fade {
    opacity: 1;
}