/* Performance Optimization CSS */

/* Critical CSS for above-the-fold content */
.critical-css {
    /* Ensure critical content renders immediately */
    contain: layout style paint;
}

/* Image optimization */
img {
    /* Improve image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Prevent layout shift - set via HTML attributes */
    aspect-ratio: attr(width) / attr(height);
    
    /* Note: Add loading="lazy" attribute to img tags in HTML for native lazy loading */
}

/* Font loading optimization - add font-display: swap to your @font-face rules */
/* Example:
@font-face {
    font-family: 'YourFontName';
    src: url('path-to-font.woff2') format('woff2');
    font-display: swap;
}
*/

/* Reduce paint on scroll */
.will-change-transform {
    will-change: transform;
}

/* GPU acceleration for smooth animations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Content visibility for long lists */
.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* Optimize iframe loading */
iframe {
    contain: strict;
}

/* Reduce reflows */
.no-reflow {
    contain: layout;
}

/* Smooth scrolling with performance */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Image placeholder to prevent CLS */
.img-placeholder {
    background-color: #f0f0f0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lazy load fade-in effect */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Optimize video loading - set preload attribute in HTML: <video preload="metadata"> */

/* Reduce paint complexity */
.reduce-paint {
    will-change: auto;
}

/* Optimize text rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "kern";
    font-feature-settings: "kern";
}

/* Prevent layout shift on dynamic content */
.dynamic-content {
    min-height: 100px;
}

/* Optimize table rendering */
table {
    table-layout: fixed;
    border-collapse: collapse;
}

/* Reduce repaints on hover */
.no-repaint-hover:hover {
    will-change: auto;
}