/* 
 * Performance Hints CSS
 * Desktop & mobile optimizations loaded after critical CSS
 */

/* ===========================================
   DESKTOP PERFORMANCE ENHANCEMENTS
   =========================================== */

/* CSS Containment for better rendering performance */
section,
.hero,
.services,
.pricing,
.portfolio,
.about,
.faq,
.footer {
    contain: layout style;
    content-visibility: auto;
}

/* Optimize card rendering with GPU acceleration */
.service-card,
.benefit-card,
.pricing-card,
.portfolio-item,
.faq-item {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
    /* Desktop smooth transitions */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hardware acceleration for interactive elements */
.btn,
.hamburger,
.nav-link,
.floating-contact-btn {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Desktop-only smooth interactions */
@media (min-width: 769px) {
    /* Optimize hover states for 60fps */
    .service-card:hover,
    .portfolio-item:hover,
    .pricing-card:hover {
        transform: translate3d(0, -8px, 0);
    }
    
    /* Optimize image loading */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Parallax-ready elements */
    .hero::before,
    .hero::after {
        transform: translate3d(0, 0, 0);
    }
    
    /* Smooth scrolling optimizations */\n    html {\n        scroll-behavior: smooth;\n        scroll-padding-top: 80px;\n    }\n    \n    /* Prefetch hover states */\n    @media (hover: hover) {\n        *:hover {\n            \n        }\n    }\n}\n\n/* Optimize animations to use only transform and opacity */\n@media (hover: hover) and (pointer: fine) {\n    .service-card:hover,\n    .portfolio-item:hover {\n        \n    }\n}

/* Progressive enhancement for modern browsers */
@supports (content-visibility: auto) {
    .service-card,
    .portfolio-item,
    .pricing-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 500px;
    }
}

/* Optimize font rendering */
body {
    font-display: swap;
    text-rendering: optimizeSpeed;
}

@media (min-width: 769px) {
    body {
        text-rendering: optimizeLegibility;
    }
}

/* Skeleton loading animation for images */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.img-loading,
img[src=""],
img:not([src]) {
    background: linear-gradient(
        90deg,
        #1a1f35 0px,
        #242b45 40px,
        #1a1f35 80px
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Optimize background images for mobile */
@media (max-width: 768px) {
    [style*="background: url"],
    [style*="background-image: url"] {
        background-size: cover !important;
        background-attachment: scroll !important;
    }
}

/* Reduce paint complexity on scroll */
.navbar {
    contain: layout style paint;
}

/* Battery-saving mode support */
@media (prefers-reduced-data: reduce) {
    * {
        background-image: none !important;
        font-family: system-ui, sans-serif !important;
    }
}

/* Optimize for high refresh rate displays */
@media (min-resolution: 120dpi) {
    * {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Fade in sections as they become visible */
section {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

section:not(.section-visible) {
    opacity: 0.98;
}

.section-visible {
    opacity: 1;
}

/* Optimize grid layouts for paint */
.services-grid,
.portfolio-grid,
.pricing-grid {
    contain: layout style;
}

/* ============================================
   CROSS-DEVICE COMPATIBILITY
   ============================================ */

/* Fallbacks for older browsers (iOS 12+, Android 6+) */
@supports not (backdrop-filter: blur(10px)) {
    .navbar {
        background: rgba(10, 14, 26, 0.98) !important;
    }
}

@supports not (content-visibility: auto) {
    section,
    .service-card,
    .portfolio-item,
    .pricing-card {
        display: block !important;
    }
}

@supports not (contain: layout) {
    body {
        overflow-x: hidden;
    }
}

/* Tablet optimizations (iPad, Android tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    .tablet-device .hero-title {
        font-size: 2.8rem;
    }
    
    .tablet-device .section-title {
        font-size: 2.5rem;
    }
    
    .tablet-device .services-grid,
    .tablet-device .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .tablet-device .btn {
        padding: 18px 45px;
        font-size: 1.1rem;
    }
    
    .tablet-device .nav-container {
        padding: 0 3rem;
    }
}

/* iPad Pro and large tablets */
@media (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 1200px;
    }
    
    .services-grid,
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Low-end device optimizations */
.low-end-device * {
    animation-duration: 0.1s !important;
    transition-duration: 0.15s !important;
}

.low-end-device .service-card:hover,
.low-end-device .portfolio-item:hover {
    transform: none !important;
}

.low-end-device img {
    image-rendering: auto;
}

/* Disable expensive effects on low-end devices */
.low-end-device .hero::before,
.low-end-device .hero::after {
    display: none;
}

/* Small phones (iPhone SE, Android phones < 375px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .nav-container {
        padding: 0 1rem;
    }
}

/* Large phones (iPhone Pro Max, Android > 414px) */
@media (min-width: 414px) and (max-width: 767px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.9rem;
    }
}

/* Landscape phone optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 80px 20px 40px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .navbar {
        padding: 0.5rem 0;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari 100vh issue */
    .hero {
        min-height: calc(var(--vh, 1vh) * 100);
    }
    
    /* Prevent bounce scroll in iOS */
    body {
        position: fixed;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    html {
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    
    body {
        position: relative;
        height: 100%;
        overflow-y: auto;
    }
}

/* Android Chrome specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px !important;
    }
}

/* Samsung Internet Browser */
@supports (-webkit-appearance: none) {
    .btn,
    input[type="submit"],
    input[type="button"],
    button[type="submit"] {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 12px;
    }
}

/* High DPI displays (Retina, AMOLED) */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* OLED/Dark mode optimization (battery saving) */
@media (prefers-color-scheme: dark) {
    body {
        background: #000000;
    }
}

/* Older WebKit browsers */
@supports not (gap: 1rem) {
    .services-grid > *,
    .portfolio-grid > * {
        margin: 1rem;
    }
}

/* Print styles (bonus) */
@media print {
    .navbar,
    .floating-contact-btn,
    .sticky-cta-mobile,
    .cookie-banner {
        display: none !important;
    }
}

/* ============================================
   MOBILE: Disable contain/content-visibility on sections
   These can interfere with fixed-navbar layout on mobile
   ============================================ */
@media (max-width: 768px) {
    section,
    .hero,
    .services,
    .pricing,
    .portfolio,
    .about,
    .faq,
    .footer {
        contain: none !important;
        content-visibility: visible !important;
    }
}