/* custom-slider-animations.css */

/* ===== ANIMACIONES AUTOMÁTICAS PARA SLIDER ===== */

/* ===== ESTADOS INICIALES ===== */
.swiper-slide .elementor-slide-heading,
.swiper-slide .elementor-slide-description {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* ===== ANIMACIONES PARA SLIDE ACTIVO ===== */
.swiper-slide-active .elementor-slide-heading {
    opacity: 1;
    transform: translateY(0);
    animation: slideHeadingIn 0.8s ease-out forwards;
}

.swiper-slide-active .elementor-slide-description {
    opacity: 1;
    transform: translateY(0);
    animation: slideDescriptionIn 0.8s ease-out 0.3s forwards;
}

/* ===== ANIMACIONES PARA SLIDES INACTIVOS ===== */
.swiper-slide:not(.swiper-slide-active) .elementor-slide-heading,
.swiper-slide:not(.swiper-slide-active) .elementor-slide-description {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s ease-in;
}

/* ===== KEYFRAMES ===== */
@keyframes slideHeadingIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    50% {
        opacity: 0.8;
        transform: translateY(15px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideDescriptionIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: translateY(15px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== ANIMACIONES ESPECÍFICAS POR DISPOSITIVO ===== */

/* Desktop: Animaciones más elaboradas */
@media (min-width: 1025px) {
    .swiper-slide-active .elementor-slide-heading {
        animation: slideHeadingInDesktop 1s ease-out forwards;
    }

    .swiper-slide-active .elementor-slide-description {
        animation: slideDescriptionInDesktop 1s ease-out 0.4s forwards;
    }

    @keyframes slideHeadingInDesktop {
        0% {
            opacity: 0;
            transform: translateY(40px) scale(0.9) rotateX(10deg);
        }
        50% {
            opacity: 0.8;
            transform: translateY(20px) scale(0.95) rotateX(5deg);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotateX(0deg);
        }
    }

    @keyframes slideDescriptionInDesktop {
        0% {
            opacity: 0;
            transform: translateY(40px) scale(0.85);
        }
        50% {
            opacity: 0.7;
            transform: translateY(20px) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* Tablet: Animaciones intermedias */
@media (min-width: 768px) and (max-width: 1024px) {
    .swiper-slide-active .elementor-slide-heading {
        animation: slideHeadingInTablet 0.9s ease-out forwards;
    }

    .swiper-slide-active .elementor-slide-description {
        animation: slideDescriptionInTablet 0.9s ease-out 0.3s forwards;
    }

    @keyframes slideHeadingInTablet {
        0% {
            opacity: 0;
            transform: translateY(35px) scale(0.92);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes slideDescriptionInTablet {
        0% {
            opacity: 0;
            transform: translateY(35px) scale(0.88);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* Móvil: Animaciones simples y rápidas */
@media (max-width: 767px) {
    .swiper-slide-active .elementor-slide-heading {
        animation: slideHeadingInMobile 0.6s ease-out forwards;
    }

    .swiper-slide-active .elementor-slide-description {
        animation: slideDescriptionInMobile 0.6s ease-out 0.2s forwards;
    }

    @keyframes slideHeadingInMobile {
        0% {
            opacity: 0;
            transform: translateY(25px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideDescriptionInMobile {
        0% {
            opacity: 0;
            transform: translateY(25px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===== ANIMACIONES PARA ELEMENTOS ESPECÍFICOS ===== */

/* Botones si existen */
.swiper-slide .elementor-button {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s ease-out;
}

.swiper-slide-active .elementor-button {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: buttonIn 0.6s ease-out 0.6s forwards;
}

@keyframes buttonIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== EFECTOS ESPECIALES ===== */

/* Efecto de brillo en slide activo */
.swiper-slide-active .elementor-slide-heading {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Efecto de sombra en descripción */
.swiper-slide-active .elementor-slide-description {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== TRANSICIONES SUAVES ===== */

/* Transiciones para cambios de slide */
.swiper-slide {
    transition: opacity 0.3s ease-in-out;
}

/* ===== UTILIDADES ===== */

/* Clase para pausar animaciones */
.animation-paused {
    animation-play-state: paused;
}

/* Clase para acelerar animaciones */
.animation-fast {
    animation-duration: 0.4s !important;
}

/* Clase para ralentizar animaciones */
.animation-slow {
    animation-duration: 1.2s !important;
}

/* ===== COMPATIBILIDAD ===== */

/* Fallback para navegadores que no soportan animaciones */
@supports not (animation: slideHeadingIn 0.8s ease-out) {
    .swiper-slide-active .elementor-slide-heading,
    .swiper-slide-active .elementor-slide-description {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== OPTIMIZACIONES ===== */

/* Reducir motion para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .swiper-slide .elementor-slide-heading,
    .swiper-slide .elementor-slide-description {
        animation: none;
        transition: opacity 0.3s ease-out;
    }

    .swiper-slide-active .elementor-slide-heading,
    .swiper-slide-active .elementor-slide-description {
        opacity: 1;
        transform: none;
    }
}