/* Smooth Scroll Performance Fixes */

/* 1. Contain layout to prevent reflows */
section {
    contain: layout style;
}

/* 2. Optimize animations */
@keyframes fadeInUpSmooth {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftSmooth {
    from {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRightSmooth {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 3. Use transform3d for hardware acceleration */
.animate-on-scroll.visible {
    animation: fadeInUpSmooth 0.5s ease-out forwards;
}

.animate-left.visible {
    animation: fadeInLeftSmooth 0.5s ease-out forwards;
}

.animate-right.visible {
    animation: fadeInRightSmooth 0.5s ease-out forwards;
}

/* 4. Optimize service cards */
.service-card,
.cta-card,
.testimonial-card {
    transform: translate3d(0, 0, 0);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: auto;
}

.service-card:hover,
.cta-card:hover {
    transform: translate3d(0, -5px, 0);
}

/* 5. Fix nav performance */
nav {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: auto;
}

nav.scrolled {
    backdrop-filter: none; /* Remove expensive blur */
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* 6. Optimize buttons */
.btn {
    transform: translate3d(0, 0, 0);
    transition: transform 0.15s ease-out, background-color 0.15s ease-out;
    will-change: auto;
}

.btn:hover {
    transform: translate3d(0, -2px, 0);
}

.btn:active {
    transform: translate3d(0, 0, 0);
}

/* 7. Reduce paint areas */
.hero-content,
.hero-image {
    isolation: isolate;
}

/* 8. Optimize images */
img {
    will-change: auto;
    transform: translate3d(0, 0, 0);
}

/* 9. Reduce composite layers */
.features-grid,
.services-grid {
    transform: translate3d(0, 0, 0);
}

/* 10. Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Disable parallax effects on mobile */
    .hero {
        background-attachment: scroll !important;
    }
    
    /* Simplify animations */
    .animate-on-scroll.visible,
    .animate-left.visible,
    .animate-right.visible {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    /* Reduce shadows on mobile */
    .service-card,
    .cta-card,
    nav.scrolled {
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
}

/* 11. Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 12. Fix overflow issues */
body {
    overflow-x: hidden;
    scroll-behavior: auto; /* Let JS handle smooth scroll */
}

/* 13. Optimize background images */
.hero,
.cta-section {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

@supports (background-attachment: fixed) {
    @media (max-width: 768px) {
        .hero,
        .cta-section {
            background-attachment: scroll;
        }
    }
}

/* 14. Force GPU layers for smooth scroll */
.container {
    transform: translate3d(0, 0, 0);
}