/* ===================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Reduces GPU-intensive effects on mobile
   WITHOUT changing the visual appearance
   =================================== */

/* ============ MOBILE-ONLY OPTIMIZATIONS ============ */
@media (max-width: 767px) {

    /* Force GPU acceleration for smooth scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }

    body {
        /* Prevent scroll anchoring issues */
        overflow-anchor: none;
    }

    /* ============ REDUCE BACKDROP BLUR INTENSITY ============ */
    /* Lower blur values = less GPU work, visually nearly identical */

    .header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .bottom-nav {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .editor-header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .header-dropdown {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .popup-overlay {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .checkout-modal {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .glass-card,
    .editor-glass-card {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* ============ OPTIMIZE FIXED ELEMENTS ============ */
    /* Hardware acceleration for fixed positioned elements */

    .header,
    .bottom-nav,
    .editor-header {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* ============ REDUCE ANIMATION COMPLEXITY ============ */
    /* Simplify hero orb animations on mobile */

    .hero::before,
    .hero::after {
        /* Reduce blur for better performance */
        filter: blur(20px);
        /* Pause animation on mobile to save GPU cycles */
        animation-play-state: paused;
        /* Still show the visual effect, just not animated */
    }

    /* Simplify card hover animations */
    .card {
        will-change: auto;
    }

    .card:hover {
        transform: translateY(-4px);
    }

    .card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Reduce card image scale on hover */
    .card:hover .card-image {
        transform: scale(1.02);
    }

    /* ============ OPTIMIZE SHADOWS ============ */
    /* Simpler shadows = faster rendering */

    .card:hover {
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    }

    .header-btn-premium:hover,
    .header-btn-login:hover {
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
    }

    /* ============ OPTIMIZE SCROLL CONTAINERS ============ */

    .category-scroll {
        /* Momentum scrolling */
        -webkit-overflow-scrolling: touch;
        /* Prevent repaints during scroll */
        will-change: scroll-position;
    }

    /* ============ REDUCE TRANSITION COMPLEXITY ============ */
    /* Faster, simpler transitions for touch interactions */

    .nav-item,
    .category-item,
    .header-btn,
    .nav-btn,
    .upload-btn {
        transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    /* ============ CONTENT VISIBILITY OPTIMIZATION ============ */
    /* Skip rendering of off-screen content */

    .template-grid {
        content-visibility: auto;
        contain-intrinsic-size: auto 500px;
    }

    .templates {
        contain: layout style;
    }

    /* ============ TOUCH OPTIMIZATION ============ */
    /* Disable hover states that cause lag on touch */

    @media (hover: none) {
        .card:hover {
            transform: none;
            box-shadow: none;
        }

        .card:hover .card-image {
            transform: none;
        }

        .card:hover .card-overlay {
            padding-bottom: var(--space-3);
        }

        .card:hover .card-play {
            background: rgba(255, 255, 255, 0.15);
            transform: none;
            box-shadow: none;
        }

        .category-item:hover {
            transform: none;
        }

        .category-item:hover .category-image {
            box-shadow: none;
        }

        /* Keep active states for tap feedback */
        .card:active {
            transform: scale(0.98);
        }

        .category-item:active {
            transform: scale(0.95);
        }
    }

    /* ============ REDUCE SUCCESS ANIMATION ============ */

    .success-icon {
        animation: none;
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.3);
    }

    /* ============ IMAGE OPTIMIZATION ============ */

    .hero-bg-card,
    .card-image,
    .category-image {
        /* Prevent layout shifts */
        contain: strict;
    }

    img {
        /* Optimize image rendering */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============ REDUCED MOTION PREFERENCE ============ */
/* Respect user's reduced motion settings */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero::before,
    .hero::after {
        animation: none;
    }

    .success-icon {
        animation: none;
    }
}