/* static/css/performance.css */

/**
 * Performance optimizations CSS
 */

/* Lazy loading placeholders */
img[data-src] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

img[data-src].loaded {
    animation: none;
    background: none;
}

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

/* Component loading states */
[data-lazy-component] {
    opacity: 0.5;
    pointer-events: none;
}

[data-lazy-component].loaded {
    opacity: 1;
    pointer-events: auto;
}

/* Intersection observer performance */
.lazy {
    will-change: opacity;
}

.lazy.loaded {
    will-change: auto;
}

/* Reduce paint operations */
.recipe-card {
    contain: layout style paint;
}

.search-result {
    contain: layout style;
}

/* GPU acceleration for animations */
.fade-in {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize scrolling */
.infinite-scroll-container {
    contain: layout style paint;
    overscroll-behavior: contain;
}

/* Defer non-critical CSS */
@media print {
    .no-print {
        display: none;
    }
}