/* Performance Optimizations CSS
 * Styles for performance features and loading states
 */

/* Loading animation for performance monitoring */
.performance-loading {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Critical CSS for above-the-fold content */
.critical-content {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.critical-content.loading {
    opacity: 0;
    transform: translateY(20px);
}

/* Lazy loading image styles */
.lazy-image {
    opacity: 0;
    transition: opacity 0.5s ease;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

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

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

/* Optimized viewport handling */
.performance-viewport {
    will-change: transform;
    contain: layout style paint;
}

/* Memory efficient animations */
.efficient-animation {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Preload indicators */
.preload-indicator {
    position: relative;
    overflow: hidden;
}

.preload-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: preload-sweep 2s infinite;
}

@keyframes preload-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Reduced motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    .lazy-image,
    .critical-content,
    .preload-indicator::before {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode optimizations */
@media (prefers-contrast: high) {
    .lazy-image {
        background: #808080;
    }
}

/* Touch optimizations for mobile devices */
@media (pointer: coarse) {
    .performance-viewport {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Print optimizations */
@media print {
    .lazy-image,
    .preload-indicator {
        animation: none !important;
        background: none !important;
    }
    
    .performance-loading {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}