/* Aurora AI - Performance Optimized CSS */

/* Critical CSS - Load First */
.critical-css {
    /* Essential styles for immediate rendering */
    body {
        margin: 0;
        padding: 0;
        font-family: 'Inter', sans-serif;
        background: #0a0a0f;
        color: #ffffff;
        line-height: 1.6;
        overflow-x: hidden;
    }
    
    .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #050508 0%, #0a0a0f 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
    
    .loading-content {
        text-align: center;
        z-index: 10000;
    }
    
    .aurora-logo {
        width: 120px;
        height: 120px;
        margin: 0 auto 2rem;
    }
    
    .logo-animation {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .quantum-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        border: 2px solid #00ffcc;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: quantum-spin 2s linear infinite;
    }
    
    .neural-core {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        background: radial-gradient(circle, #00ffcc 0%, transparent 70%);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: neural-pulse 1.5s ease-in-out infinite;
    }
    
    .loading-content h2 {
        font-family: 'Orbitron', monospace;
        font-size: 1.5rem;
        margin-bottom: 2rem;
        color: #00ffcc;
    }
    
    .loading-progress {
        width: 300px;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #00ffcc, #0099ff);
        border-radius: 2px;
        transition: width 0.3s ease;
    }
    
    .progress-text {
        display: block;
        margin-top: 0.5rem;
        font-family: 'Space Mono', monospace;
        font-size: 0.875rem;
        color: #b0b0c0;
    }
}

/* Optimized Loading Animation */
@keyframes quantum-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes neural-pulse {
    0%, 100% { 
        opacity: 0.6; 
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Prevent Flash of Unstyled Content */
.no-js .loading-screen {
    display: none;
}

.no-js body {
    visibility: visible;
}

/* Optimized Font Loading */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular'), url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
}

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Orbitron Bold'), local('Orbitron-Bold'), url('https://fonts.gstatic.com/s/orbitron/v28/yMJMMIlzdpvBhQQLSc3.woff2') format('woff2');
}

/* GPU Acceleration for Smooth Animations */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .quantum-ring,
    .neural-core {
        animation: none;
    }
    
    .loading-screen {
        transition: none;
    }
}

/* Performance Optimizations */
.performance-optimized {
    contain: layout style paint;
}

/* Critical Rendering Path Optimization */
.critical-above-fold {
    contain: layout style paint;
}

/* Lazy Loading Placeholder */
.lazy-load-placeholder {
    background: linear-gradient(90deg, #1a1a2e 25%, #2a2a3e 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

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

/* Optimized Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Prevent Layout Shift */
.layout-stable {
    position: relative;
    min-height: 100vh;
}

/* Optimized Images */
.optimized-image {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Performance Monitoring */
.performance-monitor {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #00ffcc;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    z-index: 10000;
    display: none;
}

/* Show performance monitor in development */
.performance-debug .performance-monitor {
    display: block;
}