/**
 * Performance Optimizations
 * CSS containment and content-visibility for better rendering performance
 * Requirements: 6.6
 */

/* ============================================================================
   CSS Containment
   ============================================================================ */

/**
 * CSS Containment isolates component rendering from the rest of the page,
 * allowing the browser to optimize layout, paint, and style calculations.
 */

/* Component containers */
.component-container {
    contain: layout style paint;
}

/* Card components */
.card,
[class*="card-"] {
    contain: layout style;
}

/* List items */
.list-item,
[class*="item-"] {
    contain: layout style;
}

/* Modal and dialog containers */
.modal,
.dialog,
.bottom-sheet {
    contain: layout style paint;
}

/* Navigation components */
.bottom-nav,
.top-bar,
.drawer {
    contain: layout style;
}

/* Form components */
.form-field,
.input-wrapper,
.select-wrapper {
    contain: layout style;
}

/* Button components */
.button,
[class*="btn-"] {
    contain: layout style;
}

/* Badge and chip components */
.badge,
.chip {
    contain: layout style paint;
}

/* ============================================================================
   Content Visibility
   ============================================================================ */

/**
 * content-visibility: auto allows the browser to skip rendering work for
 * off-screen content, significantly improving initial page load and scroll performance.
 */

/* Off-screen content sections */
.content-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px; /* Estimated height */
}

/* List items in long lists */
.virtualized-list > .list-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 80px; /* Estimated item height */
}

/* Cards in grid layouts */
.card-grid > .card {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px; /* Estimated card height */
}

/* Accordion/collapsible content */
.accordion-content {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

/* Tab panels */
.tab-panel:not(.active) {
    content-visibility: hidden;
}

/* Modal content when closed */
.modal:not(.open) {
    content-visibility: hidden;
}

/* ============================================================================
   Will-Change Optimization
   ============================================================================ */

/**
 * will-change hints to the browser which properties will animate,
 * allowing it to optimize ahead of time. Use sparingly!
 */

/* Animated components */
.animating {
    will-change: transform, opacity;
}

/* Remove will-change after animation */
.animated {
    will-change: auto;
}

/* Scrollable containers */
.scroll-container {
    will-change: scroll-position;
}

/* ============================================================================
   GPU Acceleration
   ============================================================================ */

/**
 * Force GPU acceleration for smooth animations
 */

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

/* Smooth scrolling with GPU */
.smooth-scroll {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
}

/* ============================================================================
   Reduce Paint Areas
   ============================================================================ */

/**
 * Isolate components that change frequently to reduce paint areas
 */

/* Animated elements */
.spinner,
.skeleton,
.progress-bar {
    isolation: isolate;
}

/* Interactive elements with hover effects */
.button:hover,
.card:hover {
    isolation: isolate;
}

/* ============================================================================
   Font Loading Optimization
   ============================================================================ */

/**
 * Optimize font rendering and prevent layout shift
 */

body {
    font-display: swap; /* Show fallback font immediately */
}

/* Prevent invisible text during font load */
.font-loading {
    font-display: swap;
}

/* ============================================================================
   Image Loading Optimization
   ============================================================================ */

/**
 * Prevent layout shift from images
 */

img {
    /* Reserve space for images */
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
}

/* Lazy loaded images */
img[loading="lazy"] {
    content-visibility: auto;
}

/* ============================================================================
   Reduce Reflows
   ============================================================================ */

/**
 * Minimize layout thrashing
 */

/* Fixed dimensions for known sizes */
.fixed-size {
    width: var(--fixed-width);
    height: var(--fixed-height);
}

/* Prevent layout shift from dynamic content */
.dynamic-content {
    min-height: var(--min-content-height, 100px);
}

/* ============================================================================
   Optimize Animations
   ============================================================================ */

/**
 * Only animate transform and opacity for 60fps performance
 */

@media (prefers-reduced-motion: no-preference) {
    .optimized-animation {
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }
}

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

/* ============================================================================
   Intersection Observer Targets
   ============================================================================ */

/**
 * Elements that should be observed for lazy loading or animations
 */

[data-observe] {
    content-visibility: auto;
}

/* ============================================================================
   Performance Monitoring Hints
   ============================================================================ */

/**
 * Mark performance-critical sections
 */

[data-performance-critical] {
    contain: strict;
    content-visibility: auto;
}

/* ============================================================================
   Mobile-Specific Optimizations
   ============================================================================ */

@media (max-width: 768px) {
    /* Reduce complexity on mobile */
    .complex-layout {
        contain: layout style;
    }

    /* Simplify shadows on mobile */
    .shadow-complex {
        box-shadow: var(--shadow-sm);
    }

    /* Reduce blur effects on mobile */
    .backdrop-blur {
        backdrop-filter: none;
        background-color: rgba(0, 0, 0, 0.5);
    }
}

/* ============================================================================
   Print Optimization
   ============================================================================ */

@media print {
    /* Remove unnecessary elements */
    .no-print {
        display: none !important;
    }

    /* Optimize for print */
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}