/* =============================================
   MOBILE PERFORMANCE OPTIMIZATION - BALANCED
   Optimizes performance while maintaining visual design
   ============================================= */

/* MOBILE OPTIMIZATIONS - Keep visual design intact */
@media (max-width: 768px) {

    /* ===================================
       KEEP VISUAL DESIGN - Don't remove these
       =================================== */

    /* Keep backdrop-filter but reduce blur amount for performance */
    .sticky-card,
    .glass-card,
    .process-content-wrapper {
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    /* Keep box-shadows but slightly reduce for performance */
    .sticky-card,
    .mock-process-card,
    .glass-card,
    .bento-item {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    /* Keep pseudo-elements for visual design */
    /* Don't disable ::before and ::after - they're part of the design */

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

    /* Reduce animation duration for snappier feel */
    /* Animation durations restored to original values for natural feel */


    /* Keep essential transitions smooth */
    .tab-btn,
    .nav-link,
    button,
    .sticky-card {
        transition-duration: 0.25s !important;
    }

    /* GPU acceleration for better performance */
    .sticky-card {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
    }

    /* Optimize text rendering */
    body {
        text-rendering: optimizeSpeed !important;
        -webkit-font-smoothing: subpixel-antialiased !important;
    }

    /* Use CSS containment for better paint performance */
    .section {
        contain: layout style !important;
    }

    /* Optimize overflow scrolling */
    .editor-body,
    .code-block {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Disable hover effects on touch devices (no point on mobile) */
    @media (hover: none) {

        .sticky-card:hover,
        .bento-item:hover,
        .integration-card:hover {
            transform: translateZ(0) !important;
        }
    }
}

/* Very small mobile - minimal additional optimizations */
@media (max-width: 480px) {

    /* Reduce backdrop blur even more on very small screens */
    .sticky-card,
    .glass-card {
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }

    /* Slightly faster animations on small screens */
    /* Animation durations restored to original values */

}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover states on touch devices */
    *:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Faster tap response */
    button,
    a,
    .btn {
        -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);
        touch-action: manipulation;
    }
}

/* Performance: GPU acceleration for fixed/sticky elements */
.navbar,
.sticky-card[style*="position: sticky"],
.sticky-card[style*="position: -webkit-sticky"] {
    transform: translateZ(0) !important;
    will-change: transform !important;
}