/* Performance Optimization CSS for Core Web Vitals */

/* Optimize font loading */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
}

/* Reduce layout shift with aspect ratio boxes */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio */
}

.aspect-ratio-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optimize images for LCP */
.lcp-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

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

/* Optimize animations for performance */
.optimized-animation {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint operations */
.no-paint {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize transitions */
.fast-transition {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce layout thrashing */
.stable-layout {
    contain: layout style paint;
}

/* Optimize for mobile performance */
@media (max-width: 768px) {
    .mobile-optimized {
        transform: translateZ(0);
        will-change: auto;
    }
    
    .mobile-reduced-animations {
        animation: none !important;
        transition: none !important;
    }
}

/* Critical CSS for above-the-fold content */
.critical-content {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Optimize for Core Web Vitals */
.cls-optimized {
    contain: layout;
}

.fid-optimized {
    pointer-events: auto;
}

.lcp-optimized {
    fetchpriority: high;
}

/* Reduce JavaScript execution time */
.js-optimized {
    content-visibility: auto;
}

/* Optimize for Largest Contentful Paint */
.lcp-element {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* Optimize for First Input Delay */
.interactive-element {
    pointer-events: auto;
    touch-action: manipulation;
}

/* Optimize for Cumulative Layout Shift */
.stable-element {
    contain: layout style paint;
    transform: translateZ(0);
}

/* Reduce unused CSS */
@media (max-width: 480px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 481px) {
    .mobile-only {
        display: none !important;
    }
}

/* Optimize for print */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-optimized {
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
}

/* Optimize for accessibility and performance */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Optimize for reduced motion */
@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;
    }
}

/* Optimize for high contrast mode */
@media (prefers-contrast: high) {
    .high-contrast-optimized {
        border: 2px solid currentColor;
    }
}

/* Optimize for dark mode */
@media (prefers-color-scheme: dark) {
    .dark-mode-optimized {
        background-color: #1a1a1a;
        color: #ffffff;
    }
}

/* Optimize for light mode */
@media (prefers-color-scheme: light) {
    .light-mode-optimized {
        background-color: #ffffff;
        color: #000000;
    }
}