/* ==============================================
   PERFORMANCE OPTIMIZATION STYLES
   ============================================== */

/* Image loading optimization */
img {
    /* Enable hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Lazy loading preparation */
    content-visibility: auto;
    contain: layout style paint;
}

/* Smooth scroll optimization */
.scroller {
    /* Use hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: transform;
    
    /* Optimize paint containment */
    contain: layout style paint;
    content-visibility: auto;
}

.scroller__inner {
    /* Enable GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
    
    /* Optimize animation performance */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Card hover optimization */
.group {
    /* Prepare for hover animations */
    will-change: transform;
    transform: translateZ(0);
}

/* Loading skeleton optimization */
.animate-pulse {
    /* Use GPU for pulse animation */
    will-change: opacity;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Spinner optimization */
.animate-spin {
    /* Optimize spin animation */
    will-change: transform;
    animation: spin 1s linear infinite;
}

/* AOS animation optimization */
[data-aos] {
    /* Prepare elements for AOS animations */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Critical CSS for above-the-fold content */
.hero-section, .navbar, .hero-content {
    /* Prioritize critical rendering */
    contain: layout style;
    content-visibility: auto;
}

/* Lazy loading sections */
.lazy-section {
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 1px 500px;
}

/* Optimize gradient overlays */
.gradient-overlay {
    /* Use GPU for gradient rendering */
    will-change: opacity;
    transform: translateZ(0);
}

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

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

/* Loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive image optimization */
@media (max-width: 768px) {
    img {
        /* Reduce image quality on mobile for faster loading */
        image-rendering: auto;
    }
}

/* Preload critical resources */
.preload-critical {
    /* Higher priority for critical content */
    content-visibility: visible;
    contain: none;
}

/* Intersection Observer optimization */
.observe-intersection {
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 1px 200px;
}