/**
 * Performance Optimization CSS
 * Prevents forced reflows and improves rendering performance
 */

/* Use transform and opacity for animations instead of layout properties */
.performance-optimized {
    /* Enable hardware acceleration */
    transform: translateZ(0);
    will-change: transform, opacity;
    
    /* Prevent layout thrashing */
    contain: layout style paint;
}

/* Optimize animations to use transform instead of layout properties */
.animate-transform {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.animate-transform:hover {
    transform: translateY(-2px) scale(1.02);
}

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

/* Optimize table rendering */
.optimized-table {
    /* Use table-layout: fixed for better performance */
    table-layout: fixed;
    
    /* Prevent layout shifts */
    contain: layout style;
}

.optimized-table td,
.optimized-table th {
    /* Prevent text wrapping from causing layout shifts */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optimize image loading */
.optimized-image {
    /* Prevent layout shifts during image loading */
    aspect-ratio: attr(width) / attr(height);
    
    /* Use object-fit for responsive images */
    object-fit: cover;
    object-position: center;
}

/* Optimize form elements */
.optimized-form {
    /* Prevent layout shifts during focus states */
    contain: layout style;
}

.optimized-form input,
.optimized-form textarea,
.optimized-form select {
    /* Prevent layout shifts during input */
    box-sizing: border-box;
    min-height: 2.5rem;
}

/* Optimize navigation */
.optimized-nav {
    /* Use transform for navigation animations */
    transition: transform 0.3s ease-out;
}

.optimized-nav.sticky {
    position: fixed;
    top: 0;
    z-index: 1000;
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize modal/dialog performance */
.optimized-modal {
    /* Use transform for modal animations */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.optimized-modal.show {
    transform: translateZ(0) scale(1);
    opacity: 1;
}

.optimized-modal.hide {
    transform: translateZ(0) scale(0.9);
    opacity: 0;
}

/* Optimize carousel/slider performance */
.optimized-carousel {
    /* Use transform for slide transitions */
    transition: transform 0.3s ease-out;
    transform: translateZ(0);
    will-change: transform;
}

.optimized-carousel .slide {
    /* Prevent layout shifts during slide transitions */
    contain: layout style paint;
    transform: translateZ(0);
}

/* Optimize lazy loading */
.lazy-load {
    /* Prevent layout shifts during lazy loading */
    min-height: 200px;
    background: #f0f0f0;
    contain: layout style;
}

.lazy-load.loaded {
    background: none;
}

/* Optimize text rendering */
.optimized-text {
    /* Improve text rendering performance */
    text-rendering: optimizeSpeed;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* Optimize button interactions */
.optimized-button {
    /* Use transform for button animations */
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
    transform: translateZ(0);
    will-change: transform;
}

.optimized-button:hover {
    transform: translateZ(0) translateY(-1px);
}

.optimized-button:active {
    transform: translateZ(0) translateY(0);
}

/* Optimize card animations */
.optimized-card {
    /* Use transform for card animations */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.optimized-card:hover {
    transform: translateZ(0) translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Optimize list animations */
.optimized-list {
    /* Use transform for list item animations */
    contain: layout style;
}

.optimized-list-item {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.optimized-list-item:hover {
    transform: translateZ(0) translateX(4px);
}

/* Optimize grid layouts */
.optimized-grid {
    /* Use CSS Grid for better performance */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    contain: layout style;
}

/* Optimize flexbox layouts */
.optimized-flex {
    /* Use flexbox with contain for better performance */
    display: flex;
    contain: layout style;
}

/* Optimize responsive images */
.optimized-responsive-image {
    /* Prevent layout shifts with responsive images */
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    object-fit: cover;
}

/* Optimize video elements */
.optimized-video {
    /* Prevent layout shifts with video elements */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Optimize iframe elements */
.optimized-iframe {
    /* Prevent layout shifts with iframe elements */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Optimize SVG elements */
.optimized-svg {
    /* Optimize SVG rendering */
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
}

/* Optimize canvas elements */
.optimized-canvas {
    /* Optimize canvas rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Optimize print styles */
@media print {
    .performance-optimized {
        /* Disable animations for print */
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Optimize reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .performance-optimized,
    .animate-transform,
    .optimized-nav,
    .optimized-modal,
    .optimized-carousel,
    .optimized-button,
    .optimized-card,
    .optimized-list-item {
        /* Disable animations for users who prefer reduced motion */
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Optimize high contrast mode */
@media (prefers-contrast: high) {
    .performance-optimized {
        /* Ensure good contrast in high contrast mode */
        border: 1px solid currentColor;
    }
}

/* Optimize dark mode */
@media (prefers-color-scheme: dark) {
    .lazy-load {
        background: #2a2a2a;
    }
}

/* Optimize mobile performance */
@media (max-width: 768px) {
    .performance-optimized {
        /* Reduce animation complexity on mobile */
        transition-duration: 0.2s;
    }
    
    .optimized-grid {
        /* Use single column on mobile for better performance */
        grid-template-columns: 1fr;
    }
}

/* Optimize tablet performance */
@media (min-width: 769px) and (max-width: 1024px) {
    .optimized-grid {
        /* Use 2 columns on tablet */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Optimize desktop performance */
@media (min-width: 1025px) {
    .optimized-grid {
        /* Use 3+ columns on desktop */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}