/**
 * Scroll Animations CSS
 * Estilos para animaciones de entrada de secciones
 */

/* Keyframes para diferentes tipos de animaciones */

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

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

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

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

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

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

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

/* Clase base para secciones con scroll animation */
section.reveal-section {
    opacity: 0;
}

/* Animación por defecto al entrar al viewport */
section.animate-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Variantes de animación según posición en la página */

/* Primeras secciones: entrada desde arriba */
section:nth-of-type(1).animate-in,
section:nth-of-type(2).animate-in {
    animation: fadeInDown 0.8s ease-out forwards;
}

/* Secciones del medio: entrada lateral alternada */
section:nth-of-type(3).animate-in,
section:nth-of-type(5).animate-in,
section:nth-of-type(7).animate-in {
    animation: fadeInLeft 0.8s ease-out forwards;
}

section:nth-of-type(4).animate-in,
section:nth-of-type(6).animate-in,
section:nth-of-type(8).animate-in {
    animation: fadeInRight 0.8s ease-out forwards;
}

/* Últimas secciones: escala */
section:nth-of-type(n + 9).animate-in {
    animation: scaleIn 0.8s ease-out forwards;
}

/* Efecto de stagger para elementos dentro de secciones */
section.animate-in > * {
    animation: inherit;
}

/* Delay escalonado para elementos hijos */
section.animate-in > :nth-child(1) { animation-delay: 0s; }
section.animate-in > :nth-child(2) { animation-delay: 0.1s; }
section.animate-in > :nth-child(3) { animation-delay: 0.2s; }
section.animate-in > :nth-child(4) { animation-delay: 0.3s; }
section.animate-in > :nth-child(5) { animation-delay: 0.4s; }

/* Animación para elementos con data-scroll-animate */
[data-scroll-animate].animate-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Opciones personalizadas con data attributes */

[data-scroll-animate="fade"].animate-in {
    animation: fadeIn 0.8s ease-out forwards;
}

[data-scroll-animate="slide-up"].animate-in {
    animation: slideInUp 0.8s ease-out forwards;
}

[data-scroll-animate="scale"].animate-in {
    animation: scaleIn 0.8s ease-out forwards;
}

[data-scroll-animate="left"].animate-in {
    animation: fadeInLeft 0.8s ease-out forwards;
}

[data-scroll-animate="right"].animate-in {
    animation: fadeInRight 0.8s ease-out forwards;
}

[data-scroll-animate="up"].animate-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

[data-scroll-animate="down"].animate-in {
    animation: fadeInDown 0.8s ease-out forwards;
}

/* Duraciones personalizadas */

[data-scroll-duration="fast"].animate-in {
    animation-duration: 0.4s;
}

[data-scroll-duration="slow"].animate-in {
    animation-duration: 1.2s;
}

/* Delays personalizados */

[data-scroll-delay="1"].animate-in {
    animation-delay: 0.1s;
}

[data-scroll-delay="2"].animate-in {
    animation-delay: 0.2s;
}

[data-scroll-delay="3"].animate-in {
    animation-delay: 0.3s;
}

/* Responsive: Desactivar animaciones en móviles si es necesario */
@media (prefers-reduced-motion: reduce) {
    section.reveal-section,
    [data-scroll-animate] {
        opacity: 1;
    }

    section.animate-in,
    [data-scroll-animate].animate-in {
        animation: none !important;
        animation-delay: 0 !important;
    }
}