/* Mobile-Only Scroll Animations for Areas We Serve Cards */

/* Only apply animations on mobile devices (max-width: 640px) */
@media (max-width: 640px) {
    /* Override existing animations and set initial state */
    .bento-item {
        animation: none !important; /* Override existing slideUp animation */
        opacity: 0 !important;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Slide from left (odd cards) */
    .bento-item:nth-child(odd) {
        transform: translateX(-120px) rotate(-5deg) !important;
    }

    /* Slide from right (even cards) */
    .bento-item:nth-child(even) {
        transform: translateX(120px) rotate(5deg) !important;
    }

    /* Animated state - cards slide into view */
    .bento-item.animate {
        opacity: 1 !important;
        transform: translateX(0) rotate(0deg) !important;
    }

    /* Individual card animation - no staggered delays needed since each card animates when it comes into view */
    .bento-item.animate { 
        transition-delay: 0s; 
    }

    /* Enhanced hover effects for mobile (touch-friendly) */
    .bento-item:hover,
    .bento-item:active {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    }

    /* Reduce animation distance for smaller screens */
    @media (max-width: 480px) {
        .bento-item:nth-child(odd) {
            transform: translateX(-80px) rotate(-3deg);
        }

        .bento-item:nth-child(even) {
            transform: translateX(80px) rotate(3deg);
        }
    }

    /* Extra small screens - minimal animation */
    @media (max-width: 360px) {
        .bento-item:nth-child(odd) {
            transform: translateX(-60px) rotate(-2deg);
        }

        .bento-item:nth-child(even) {
            transform: translateX(60px) rotate(2deg);
        }
    }
}

/* Ensure animations don't interfere with desktop layout */
@media (min-width: 641px) {
    .bento-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .bento-item.animate {
        opacity: 1 !important;
        transform: none !important;
    }
}