/**
 * FINAL OPTIMIZATION ENHANCEMENTS
 * Consolidates all 2026 best practices for performance, SEO, and UX
 * Final polish for production-ready website
 */

/* ====== PERFORMANCE OPTIMIZATIONS ====== */

/* GPU Acceleration for Animations */
.will-change-transform,
.will-change-opacity,
.will-change-scroll {
    will-change: transform, opacity, scroll-position;
}

/* Optimize rendering */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce paint complexity */
.optimize-paint {
    contain: layout style paint;
}

/* ====== IMAGE OPTIMIZATION ====== */

/* Ensure images don't cause layout shift */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loaded images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ====== FONT LOADING OPTIMIZATION ====== */

/* Prevent FOIT (Flash of Invisible Text) */
@font-face {
    font-display: swap;
}

/* ====== CONTENT VISIBILITY ====== */

/* Use content-visibility for off-screen content */
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ====== SCROLL OPTIMIZATION ====== */

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Optimize scroll performance */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* ====== INTERACTION OPTIMIZATION ====== */

/* Reduce layout thrashing */
.interactive-element {
    contain: layout style;
}

/* Optimize hover states */
@media (hover: hover) {
    .hover-optimized {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
}

/* ====== LOADING STATES ====== */

/* Skeleton screens */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--background-secondary, #f0f0f0) 0%,
        var(--background-color, #fff) 50%,
        var(--background-secondary, #f0f0f0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ====== RESPONSIVE IMAGES ====== */

/* Responsive image container */
.responsive-image {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.responsive-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====== CRITICAL RENDERING PATH ====== */

/* Above-the-fold content */
.above-fold {
    contain: layout style paint;
}

/* Below-the-fold content */
.below-fold {
    content-visibility: auto;
}

/* ====== MEMORY OPTIMIZATION ====== */

/* Clean up animations */
.animation-cleanup {
    animation-fill-mode: forwards;
}

/* ====== NETWORK OPTIMIZATION ====== */

/* Preload critical resources */
.preload-critical {
    font-display: swap;
    font-weight: 400;
}

/* ====== ACCESSIBILITY + PERFORMANCE ====== */

/* Reduce motion for performance and accessibility */
@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;
    }
}

/* ====== PRINT OPTIMIZATION ====== */

@media print {
    /* Remove non-essential elements */
    .no-print,
    nav,
    .sidebar,
    .skip-link,
    button,
    .btn {
        display: none !important;
    }
    
    /* Optimize page breaks */
    section,
    article {
        page-break-inside: avoid;
    }
    
    /* Remove backgrounds for printing */
    * {
        background: white !important;
        color: black !important;
    }
}

/* ====== MOBILE PERFORMANCE ====== */

@media (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Optimize touch scrolling */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}

/* ====== DARK MODE OPTIMIZATION ====== */

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ====== HIGH CONTRAST MODE ====== */

@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }
    
    button,
    a {
        border: 2px solid currentColor;
    }
}