/* Mobile Performance & UX Optimizations */
/* This file contains mobile-specific optimizations for better performance and user experience */

/* Optimize scrolling performance on mobile */
@media only screen and (max-width: 768px) {
    
    /* Smooth scrolling with hardware acceleration */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Optimize animations for mobile */
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Optimize video for mobile */
    .hero-video {
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }
    
    /* Better tap targets */
    .service-item,
    .city-item,
    .cta-button,
    .nav-links a,
    .social-icon {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* Optimize image loading */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimizeQuality;
    }
    
    /* Better mobile typography */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Sticky elements optimization */
    .navbar {
        position: -webkit-sticky;
        position: sticky;
        will-change: transform;
    }
    
    /* Mobile-specific loading states */
    .service-item,
    .what-we-do-box,
    .city-item {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .service-item:active,
    .what-we-do-box:active,
    .city-item:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Optimize gallery scrolling */
    .cities-gallery-container {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .city-item {
        scroll-snap-align: center;
    }
    
    /* Better mobile spacing */
    section {
        scroll-margin-top: 80px; /* Account for fixed nav */
    }
    
    /* Mobile-friendly focus states */
    .cta-button:focus,
    .nav-links a:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* Mobile landscape specific optimizations */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    /* Adjust for smaller height in landscape */
    .navbar {
        padding: 15px 5%;
    }
    
    .hero {
        height: 100vh;
    }
    
    section {
        scroll-margin-top: 60px;
    }
}

/* iOS specific optimizations */
@supports (-webkit-touch-callout: none) {
    @media only screen and (max-width: 768px) {
        /* iOS Safari specific fixes */
        .hero {
            height: -webkit-fill-available;
            min-height: 100vh;
        }
        
        /* Fix for iOS Safari viewport units */
        .hero-content {
            bottom: max(80px, env(safe-area-inset-bottom, 20px));
        }
        
        /* Prevent rubber band scrolling on body */
        body {
            overscroll-behavior-y: none;
        }
    }
}

/* Android Chrome specific optimizations */
@media only screen and (max-width: 768px) {
    /* Better performance on Android */
    .hero-overlay,
    .service-image,
    .portfolio-image {
        will-change: opacity, transform;
    }
    
    /* Optimize for Android's address bar behavior */
    .hero {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height when supported */
    }
}

/* Progressive enhancement for modern mobile browsers */
@supports (backdrop-filter: blur(10px)) {
    @media only screen and (max-width: 768px) {
        .hero-text-container {
            backdrop-filter: blur(15px);
            background: rgba(0, 0, 0, 0.4);
        }
        
        .navbar.scrolled {
            backdrop-filter: blur(20px);
        }
    }
}

/* Accessibility improvements for mobile */
@media only screen and (max-width: 768px) {
    /* Better contrast in dark mode */
    @media (prefers-color-scheme: dark) {
        .hero-text-container {
            background: rgba(0, 0, 0, 0.7);
        }
        
        .city-name,
        .service-subtitle {
            color: #fff;
        }
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .hero-text-container {
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid white;
        }
        
        .service-item,
        .what-we-do-box {
            border: 1px solid #333;
        }
    }
}