/* ============================================
   HERO SECTION - DESKTOP & MOBILE ANIMATIONS
   ============================================ */

/* ============================================
   KEYFRAMES - IMAGE ANIMATIONS
   ============================================ */

@keyframes slideInImageDesktop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@keyframes slideInImageMobile {
    from {
        opacity: 0;
        transform: scale(0.85); 
    }
    to {
        opacity: 1;
    }
}

@keyframes scalePopInDesktop {
    from {
        opacity: 0;
        transform: scale(0.75);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scalePopInMobile {
    from {
        opacity: 0;
        transform: scale(0.65) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   KEYFRAMES - CONTENT ANIMATIONS
   ============================================ */

/* Desktop: Content slides up from below */
@keyframes slideUpContentDesktop {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: Content fades in from center */
@keyframes slideUpContentMobile {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* ============================================
   BASE STATES - Initialize before animation
   ============================================ */

.hero-main-products-images[data-animate],
.hero-img-price[data-animate],
.products-details-state[data-animate],
.products-details-title[data-animate],
.products-details-desciption[data-animate],
.products-details-actions[data-animate] {
    opacity: 0;
}

/* ============================================
   DESKTOP ANIMATIONS (1024px and above)
   ============================================ */

@media (min-width: 1024px) {
    /* Image animations - slide from right */
    .hero-main-products-images.is-animated {
        animation: slideInImageDesktop 0.9s ease-out forwards;
    }   
    /* Price badge - scale pop in with slight delay */
    .hero-img-price.is-animated {
        animation: scalePopInDesktop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 200ms;
    }

    /* Eyebrow tag - fade in from top */
    .products-details-state.is-animated {
        animation: fadeInDownDesktop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 100ms;
    }

    /* Title and description - slide up with stagger */
    .products-details-title.is-animated {
        animation: slideUpContentDesktop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 250ms;
    }

    .products-details-desciption.is-animated {
        animation: slideUpContentDesktop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 400ms;
    }

    /* Buttons - slide up last */
    .products-details-actions.is-animated {
        animation: slideUpContentDesktop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 550ms;
    }
}

/* ============================================
   MOBILE ANIMATIONS (Below 1024px)
   ============================================ */

@media (max-width: 1023px) {
    /* Image animations - scale up from center */
    .hero-main-products-images.is-animated {
        animation: slideInImageMobile 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* Price badge - scale pop in mobile version */
    .hero-img-price.is-animated {
        animation: scalePopInMobile 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 150ms;
    }

    /* Eyebrow tag - simpler fade for mobile */
    .products-details-state.is-animated {
        animation: fadeInDownMobile 0.5s ease forwards;
        animation-delay: 80ms;
    }

    /* Title and description - slide up with shorter stagger */
    .products-details-title.is-animated {
        animation: slideUpContentMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 200ms;
    }

    .products-details-desciption.is-animated {
        animation: slideUpContentMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 320ms;
    }

    /* Buttons - slide up last */
    .products-details-actions.is-animated {
        animation: slideUpContentMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        animation-delay: 420ms;
    }
}

/* ============================================
   SMALL MOBILE (Below 640px)
   ============================================ */

@media (max-width: 639px) {
    /* Faster animations for small devices */
    .hero-main-products-images.is-animated {
        animation-duration: 0.6s;
    }

    .hero-img-price.is-animated {
        animation-duration: 0.45s;
        animation-delay: 120ms;
    }

    .products-details-state.is-animated {
        animation-duration: 0.4s;
        animation-delay: 60ms;
    }

    .products-details-title.is-animated {
        animation-duration: 0.5s;
        animation-delay: 160ms;
    }

    .products-details-desciption.is-animated {
        animation-duration: 0.5s;
        animation-delay: 260ms;
    }

    .products-details-actions.is-animated {
        animation-duration: 0.5s;
        animation-delay: 340ms;
    }
}

/* ============================================
   ACCESSIBILITY - Respect prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .hero-main-products-images,
    .hero-img-price,
    .products-details-state,
    .products-details-title,
    .products-details-desciption,
    .products-details-actions {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================
   SWIPER SLIDE RESET - Remove old animations
   ============================================ */

.swiper-slide-prev .hero-main-products-images,
.swiper-slide-prev .hero-img-price,
.swiper-slide-prev .products-details-state,
.swiper-slide-prev .products-details-title,
.swiper-slide-prev .products-details-desciption,
.swiper-slide-prev .products-details-actions {
    opacity: 0 !important;
    animation: none !important;
}

.swiper-slide-next .hero-main-products-images,
.swiper-slide-next .hero-img-price,
.swiper-slide-next .products-details-state,
.swiper-slide-next .products-details-title,
.swiper-slide-next .products-details-desciption,
.swiper-slide-next .products-details-actions {
    opacity: 0 !important;
    animation: none !important;
}