/* Mobile Rendering Boosts - Add after main stylesheet */
/* These hints tell the browser to optimize rendering for these properties */

/* Optimize animations */
.fade-in,
.animate-in {
    will-change: opacity, transform;
}

/* Once animation completes, remove the hint */
.fade-in.complete,
.animate-in.complete {
    will-change: auto;
}

/* Optimize hover states on desktop only */
@media (hover: hover) {
    .btn,
    .service-card,
    .portfolio-item {
        will-change: transform;
    }
    
    .btn:hover,
    .service-card:hover,
    .portfolio-item:hover {
        will-change: auto;
    }
}

/* Tell browser these elements contain isolated content */
.service-card,
.portfolio-item,
.faq-item {
    contain: layout style paint;
}

/* Performance hint for fixed header */
.header {
    will-change: transform;
    contain: layout style;
}