/**
 * Performance Optimization Styles
 * Includes lazy loading, image optimization, and general performance improvements
 */

/* Lazy Loading Styles */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-loaded {
    opacity: 1;
}

.lazy-loading {
    opacity: 0.7;
    filter: blur(1px);
    transform: scale(1.01);
    transition: all 0.3s ease-in-out;
}

.lazy-error {
    opacity: 1;
    border: 2px solid #dc3545;
}

/* Progressive Image Loading */
.blur-up {
    filter: blur(10px);
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}

.low-quality {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

/* Image Optimization */
.img-optimized {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
}

/* WebP Fallback */
.webp-supported .webp-image {
    display: block;
}

.webp-supported .fallback-image {
    display: none;
}

.no-webp .webp-image {
    display: none;
}

.no-webp .fallback-image {
    display: block;
}

/* Performance Optimizations */
.performance-optimized {
    /* Force hardware acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce paint on scroll */
.scroll-optimized {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize animations */
.animated-optimized {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 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;
    }
}

/* Critical CSS for Above-the-Fold Content */
.critical-above-fold {
    /* Ensure critical content loads first */
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* Font Loading Optimization */
.font-optimized {
    font-display: swap;
}

/* Reduce Reflows */
.reflow-optimized {
    /* Fix dimensions to prevent reflow */
    min-height: 200px;
    /* Use transform instead of changing dimensions */
    transition: transform 0.3s ease;
}

/* Memory Optimization */
.memory-optimized img {
    /* Limit image size */
    max-width: 100%;
    height: auto;
}

/* Network Optimization */
/* Preload critical resources */
/* Use data URIs for small images */

/* Cache Optimization */
/* Styles for cache-friendly elements */

/* JavaScript Loading Optimization */
.js-optimized {
    /* Hide content until JS loads */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.js-loaded {
    opacity: 1;
}

/* Intersection Observer Fallback */
.no-intersection-observer .lazy {
    opacity: 1;
}

/* Print Optimization */
@media print {
    .lazy-loading,
    .loading-skeleton {
        display: none !important;
    }

    .lazy {
        opacity: 1 !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .lazy-loading,
    .blur-up,
    .low-quality {
        transition: none;
        animation: none;
        filter: none;
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .lazy-loading {
        border: 2px solid currentColor;
    }
}

/* Performance Monitoring */
.performance-monitor {
    /* Add performance tracking styles */
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    display: none; /* Only show in development */
}

/* Core Web Vitals Optimization */
/* Largest Contentful Paint optimization */
/* First Input Delay optimization */
/* Cumulative Layout Shift prevention */

/* Image Aspect Ratio Optimization */
.aspect-ratio-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.aspect-ratio-container::before {
    content: '';
    display: block;
    padding-bottom: calc(100% / (16/9)); /* 16:9 aspect ratio */
}

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

/* Responsive Image Optimization */
.responsive-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Modern Image Formats */
@supports (image-set: url('test.webp') 1x) {
    .modern-image {
        background-image: image-set(
            url('image.webp') 1x,
            url('image.avif') 2x
        );
    }
}

/* Critical Resource Loading */
/* Load these resources first */

/* Non-Critical Resource Loading */
/* Load these resources later */

/* Bundle Splitting Optimization */
/* Styles for code-split components */

/* Service Worker Cache */
/* Styles for when service worker is active */

/* Performance Budget Indicators */
/* Visual indicators for performance budgets */

.performance-budget.good {
    border-left: 4px solid #28a745;
}

.performance-budget.warning {
    border-left: 4px solid #ffc107;
}

.performance-budget.critical {
    border-left: 4px solid #dc3545;
}