/**
 * PERFORMANCE OPTIMIZATION CSS
 * Solo optimizaciones de rendimiento, sin estilos de diseño
 * 
 * @author MrGreen Development Team
 * @version 2.0.0
 * @since 2025-01-08
 */

/* =====================================================
   LAZY LOADING CONTAINERS
   ===================================================== */
.lazy-container {
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
}

.lazy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
    opacity: 1;
}

/* Placeholder mientras carga */
.lazy-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.lazy-placeholder.loaded {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* =====================================================
   PERFORMANCE OPTIMIZATIONS
   ===================================================== */
.feed-post {
    will-change: transform;
}

.post-image {
    will-change: opacity;
}

/* =====================================================
   DARK MODE SUPPORT (Para futuras implementaciones)
   ===================================================== */
@media (prefers-color-scheme: dark) {
    .lazy-placeholder {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }
}