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

/* Critical CSS - Above the fold */
.hero {
    will-change: transform;
    contain: layout style paint;
}

/* Lazy loading images */
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[data-src].loaded {
    opacity: 1;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* GPU acceleration for animations */
.service-card,
.project-card,
.service-detailed-card,
.testimonial-card,
.team-member,
.partner-card {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize repaints */
.btn,
.nav-link,
.filter-tab {
    will-change: transform, background-color;
}

/* Reduce layout thrashing */
.hero-stats,
.services-grid,
.projects-container,
.services-detailed-grid {
    contain: layout;
}

/* Optimize font loading */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
}

/* Preload critical resources */
.hero::before {
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    background-size: 20px 20px;
    will-change: transform;
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
    .service-card:hover,
    .project-card:hover,
    .service-detailed-card:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

/* Critical path optimization */
.hero-content {
    contain: layout style;
}

/* Reduce paint complexity */
.gradient-bg {
    background-attachment: fixed;
}

/* Optimize text rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize box shadows */
.service-card,
.project-card,
.service-detailed-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-card:hover,
.project-card:hover,
.service-detailed-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Optimize transforms */
.btn:hover {
    transform: translateY(-2px);
}

/* Reduce composite layers */
.hero::before,
.services-page-header::before,
.projects-page-header::before,
.about-page-header::before,
.contact-page-header::before,
.partnerships-page-header::before {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize grid layouts */
.services-grid,
.projects-container,
.services-detailed-grid {
    contain: layout style;
}

/* Optimize flexbox */
.hero-stats,
.performance-simple {
    contain: layout;
}

/* Optimize form elements */
input,
select,
textarea {
    will-change: border-color, box-shadow;
}

/* Optimize button states */
.btn {
    will-change: transform, background-color, color;
}

/* Optimize navigation */
.nav {
    contain: layout style;
}

/* Optimize footer */
.footer {
    contain: layout style;
}

/* Optimize performance bars */
.performance-bar {
    will-change: width;
}

.performance-fill {
    will-change: width;
    transform: translateZ(0);
}

/* Optimize icons */
.fas,
.fab {
    will-change: transform;
}

/* Optimize hover states */
.service-card:hover .service-icon,
.project-card:hover .project-overlay {
    transform: scale(1.1);
}

/* Optimize loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Optimize critical rendering path */
.hero h1,
.hero p {
    contain: layout style;
}

/* Optimize animations for performance */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Optimize scroll performance */
.performance-simple {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Optimize image loading */
img {
    loading: lazy;
    decoding: async;
}

/* Optimize critical CSS */
.hero,
.services-page-header,
.projects-page-header,
.about-page-header,
.contact-page-header,
.partnerships-page-header {
    background-attachment: scroll;
}

/* Optimize mobile performance */
@media (max-width: 768px) {
    .hero::before,
    .services-page-header::before,
    .projects-page-header::before,
    .about-page-header::before,
    .contact-page-header::before,
    .partnerships-page-header::before {
        background-attachment: scroll;
    }
    
    .service-card,
    .project-card,
    .service-detailed-card {
        will-change: auto;
    }
}

/* Optimize for low-end devices */
@media (max-width: 480px) {
    .hero::before,
    .services-page-header::before,
    .projects-page-header::before,
    .about-page-header::before,
    .contact-page-header::before,
    .partnerships-page-header::before {
        display: none;
    }
    
    .service-card:hover,
    .project-card:hover,
    .service-detailed-card:hover {
        transform: none;
    }
}