/*===========================
    SCROLL-TRIGGERED MOTION SYSTEM
    Forest Green Edition - Premium Animations
===========================*/

/* ========================================
   SCROLL ANIMATION BASE CLASSES
======================================== */

/* Elements waiting to animate - Fade Up */
.scroll-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Up (alias with shorter distance for section headers) */
.scroll-animate-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
.scroll-animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
.scroll-animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In */
.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Section-level animation */
.scroll-animate-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Heading animation */
.scroll-animate-heading {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-heading.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   STAGGERED GRID ANIMATIONS
======================================== */

.scroll-animate-stagger {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate-stagger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.scroll-animate-stagger:nth-child(1) { transition-delay: 0s; }
.scroll-animate-stagger:nth-child(2) { transition-delay: 0.1s; }
.scroll-animate-stagger:nth-child(3) { transition-delay: 0.2s; }
.scroll-animate-stagger:nth-child(4) { transition-delay: 0.3s; }
.scroll-animate-stagger:nth-child(5) { transition-delay: 0.4s; }
.scroll-animate-stagger:nth-child(6) { transition-delay: 0.5s; }
.scroll-animate-stagger:nth-child(7) { transition-delay: 0.6s; }
.scroll-animate-stagger:nth-child(8) { transition-delay: 0.7s; }
.scroll-animate-stagger:nth-child(9) { transition-delay: 0.8s; }

/* ========================================
   ELEMENT-SPECIFIC ANIMATIONS
======================================== */

/* Feature Items */
.features-item,
.service-item,
.work-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-item.is-visible,
.service-item.is-visible,
.work-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Feature items stagger within section */
/* NOTE: .features-item is NOT a direct child of .row -- each is wrapped
   in a .col-lg-4. The :nth-child selectors below target the column
   wrappers and then reach the .features-item inside them. The original
   selectors targeting .features-item:nth-child(N) are kept as fallbacks
   for any non-wrapped layouts. */

/* Fallback: direct nth-child on .features-item */
.features-item:nth-child(1) { transition-delay: 0s; }
.features-item:nth-child(2) { transition-delay: 0.12s; }
.features-item:nth-child(3) { transition-delay: 0.24s; }
.features-item:nth-child(4) { transition-delay: 0.36s; }
.features-item:nth-child(5) { transition-delay: 0.48s; }
.features-item:nth-child(6) { transition-delay: 0.6s; }

/* Correct selectors: target .col-lg-4 wrappers in .saas-features */
.saas-features .row:last-child > .col-lg-4:nth-child(1) .features-item { transition-delay: 0s; }
.saas-features .row:last-child > .col-lg-4:nth-child(2) .features-item { transition-delay: 0.12s; }
.saas-features .row:last-child > .col-lg-4:nth-child(3) .features-item { transition-delay: 0.24s; }
.saas-features .row:last-child > .col-lg-4:nth-child(4) .features-item { transition-delay: 0.36s; }
.saas-features .row:last-child > .col-lg-4:nth-child(5) .features-item { transition-delay: 0.48s; }
.saas-features .row:last-child > .col-lg-4:nth-child(6) .features-item { transition-delay: 0.60s; }

/* Templates Preview cards stagger (6 cards in 3x2 grid, rows share delay) */
.saas-features-2 .templates-grid > .col-lg-4:nth-child(1) .features-item { transition-delay: 0s; }
.saas-features-2 .templates-grid > .col-lg-4:nth-child(2) .features-item { transition-delay: 0.12s; }
.saas-features-2 .templates-grid > .col-lg-4:nth-child(3) .features-item { transition-delay: 0.12s; }
.saas-features-2 .templates-grid > .col-lg-4:nth-child(4) .features-item { transition-delay: 0.24s; }
.saas-features-2 .templates-grid > .col-lg-4:nth-child(5) .features-item { transition-delay: 0.24s; }
.saas-features-2 .templates-grid > .col-lg-4:nth-child(6) .features-item { transition-delay: 0.36s; }

/* Pricing Cards */
.pricing-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure pricing cards in active Bootstrap tab are visible
   (IntersectionObserver may not re-trigger on tab switch) */
.saas-pricing .tab-pane.show.active .pricing-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Pricing stagger */
.col-lg-4:nth-child(1) .pricing-item { transition-delay: 0s; }
.col-lg-4:nth-child(2) .pricing-item { transition-delay: 0.15s; }
.col-lg-4:nth-child(3) .pricing-item { transition-delay: 0.3s; }

/* Testimonial Items */
.testimonial-item,
.user-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-item.is-visible,
.user-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blog/News Items */
.blog-item,
.news-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-item.is-visible,
.news-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blog cards stagger (2 cards in 2-col grid) */
.saas-blog .row > .col-lg-6:nth-child(1) .blog-item { transition-delay: 0s; }
.saas-blog .row > .col-lg-6:nth-child(2) .blog-item { transition-delay: 0.15s; }

/* ========================================
   SLICK CAROUSEL ITEM OVERRIDES
   Items inside Slick sliders must NOT have per-item
   opacity:0 animations (Slick clones break them).
   The wrapper-level animations handle entrance instead.
======================================== */
.saas-project .work-slide .work-item,
.saas-featured-users .user-slide .user-item,
.saas-testimonial .testimonial-slide .testimonial-item {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   CAROUSEL WRAPPER ANIMATIONS
   Slick sliders animate at wrapper level, not per-slide
======================================== */

/* Work Process carousel wrapper */
.saas-project .work-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.saas-project .work-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured Users carousel wrapper */
.saas-featured-users .user-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.saas-featured-users .user-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Testimonials carousel wrapper */
.saas-testimonial .testimonial-slide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.saas-testimonial .testimonial-slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   MICRO-INTERACTIONS - PREMIUM HOVER
======================================== */

/* Card Hover - Smooth Lift with Green Shadow */
.features-item:hover,
.service-item:hover,
.work-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(122, 185, 41, 0.12);
}

.pricing-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(122, 185, 41, 0.15);
}

.blog-item:hover,
.user-item:hover,
.testimonial-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 50px rgba(122, 185, 41, 0.1);
}

/* Feature icon bounce on card hover */
.features-item:hover i {
    animation: iconBounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-4px); }
}

/* Image Hover - Soft Scale */
.blog-item img:hover,
.user-item img:hover {
    transform: scale(1.03);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   SECTION TITLE ANIMATIONS
======================================== */

.section-title,
.section-title-one {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title.is-visible,
.section-title-one.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.section-subtitle,
.section-description {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.section-subtitle.is-visible,
.section-description.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   CTA & FOOTER ANIMATIONS
======================================== */

.cta-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer-section {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer widget stagger */
.saas-footer .footer-widget .row > .col-lg-4:nth-child(1) .widget { transition-delay: 0s; }
.saas-footer .footer-widget .row > .col-lg-4:nth-child(2) .widget { transition-delay: 0.1s; }
.saas-footer .footer-widget .row > .col-lg-4:nth-child(3) .widget { transition-delay: 0.2s; }

/* ========================================
   PARALLAX SUBTLE DEPTH EFFECTS
======================================== */

@media (min-width: 992px) {
    .parallax-light {
        transform: translateZ(0);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Gradient background shift */
    .gradient-shift {
        background-size: 200% 200%;
        animation: gradientShift 18s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    }

    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
    }
}

/* ========================================
   COUNTER / NUMBER ANIMATIONS
======================================== */

.counter-animate {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.counter-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate-left,
    .scroll-animate-right,
    .scroll-animate-scale,
    .scroll-animate-section,
    .scroll-animate-heading,
    .scroll-animate-stagger,
    .features-item,
    .service-item,
    .work-item,
    .pricing-item,
    .testimonial-item,
    .user-item,
    .blog-item,
    .news-item,
    .section-title,
    .section-title-one,
    .section-subtitle,
    .section-description,
    .cta-section,
    .footer-section,
    .counter-animate,
    .saas-project .work-slide,
    .saas-featured-users .user-slide,
    .saas-testimonial .testimonial-slide,
    .saas-footer .widget {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .gradient-shift {
        animation: none !important;
    }

    /* Keep hover effects but instant */
    .features-item:hover,
    .service-item:hover,
    .work-item:hover,
    .pricing-item:hover,
    .blog-item:hover,
    .user-item:hover,
    .testimonial-item:hover {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */

/* GPU Acceleration */
.scroll-animate,
.scroll-animate-left,
.scroll-animate-right,
.scroll-animate-scale,
.scroll-animate-section,
.scroll-animate-heading,
.scroll-animate-stagger,
.features-item,
.service-item,
.work-item,
.pricing-item,
.blog-item,
.user-item,
.testimonial-item,
.saas-project .work-slide,
.saas-featured-users .user-slide,
.saas-testimonial .testimonial-slide {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Remove will-change after animation */
.scroll-animate.is-visible,
.scroll-animate-left.is-visible,
.scroll-animate-right.is-visible,
.scroll-animate-scale.is-visible,
.scroll-animate-section.is-visible,
.scroll-animate-heading.is-visible,
.scroll-animate-stagger.is-visible {
    will-change: auto;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .scroll-animate,
    .scroll-animate-stagger,
    .features-item,
    .pricing-item,
    .blog-item,
    .user-item {
        transform: translateY(16px);
    }

    .scroll-animate-section {
        transform: translateY(12px);
    }

    /* Faster animations */
    .scroll-animate,
    .scroll-animate-section,
    .scroll-animate-heading,
    .scroll-animate-stagger,
    .features-item,
    .pricing-item,
    .blog-item,
    .user-item {
        transition-duration: 0.5s;
    }

    /* Reduced hover effects */
    .features-item:hover,
    .pricing-item:hover,
    .blog-item:hover,
    .user-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(122, 185, 41, 0.08);
    }
}