/* Mobile Performance Optimizations */

/* Reduce animations on mobile */
@media (max-width: 768px) {
    /* Disable heavy animations on mobile (exclude polaroid) */
    .bubble,
    .sticker {
        animation: none !important;
    }
    
    /* Preserve polaroid bounce animations */
    .polaroid:nth-child(1) {
        animation: bounceNatural 1.8s ease-in-out infinite !important;
        animation-delay: 0.2s !important;
    }
    
    .polaroid:nth-child(2) {
        animation: bounceNaturalEven 1.8s ease-in-out infinite !important;
        animation-delay: -0.3s !important;
    }
    
    .polaroid:nth-child(3) {
        animation: bounceNatural 1.8s ease-in-out infinite !important;
        animation-delay: -0.8s !important;
    }
    
    .polaroid:nth-child(4) {
        animation: bounceNaturalEven 1.8s ease-in-out infinite !important;
        animation-delay: -1.3s !important;
    }
    
    /* Simplify glassmorphism effects */
    .glass-strong,
    .glass-gradient,
    .glass-primary,
    .glass-secondary {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1) !important;
    }
    
    /* Reduce neomorphic shadows */
    .neomorphic-card {
        box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.15),
                   -4px -4px 8px rgba(255, 255, 255, 0.4) !important;
    }
    
    /* Optimize scroll performance */
    .grid {
        will-change: auto !important;
        transform: translateZ(0);
    }
    
    /* Reduce hover effects on mobile */
    .group:hover .group-hover\:scale-105 {
        transform: none !important;
    }
    
    /* Optimize images for mobile scrolling */
    img {
        will-change: auto;
        transform: translateZ(0);
    }
}

/* Scroll optimization */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* GPU acceleration for smooth scrolling */
.frame-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}