/* ========================================
   Cyberpunk Performance Optimizations
   GPU acceleration and rendering isolation
   ======================================== */

/* ========== GPU Acceleration Hints ========== */
.cyber-category,
.stat-card,
.category-card,
.subitem-link,
.btn-primary,
.btn-secondary,
.btn-hud,
.btn-view,
.cyber-btn {
    will-change: transform;
    contain: layout style paint;
}

/* Optimize animations */
@keyframes float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(1deg); 
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.6),
                    0 0 40px rgba(0, 255, 136, 0.3);
    }
}

/* Promote to own layer for smooth animations */
.blob,
.blink-cursor,
.cyber-glitch,
.login-icon {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========== Lazy Loading Backgrounds ========== */
.cyber-grid-bg,
.cyber-gradient-mesh {
    content-visibility: auto;
}

/* ========== Efficient Transitions ========== */
* {
    /* Use transform and opacity for better performance */
    transition-property: transform, opacity, box-shadow, border-color, color, background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on large elements during scroll */
@media (prefers-reduced-motion: no-preference) {
    .cyber-category,
    .stat-card {
        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ========== Touch Target Optimization ========== */
@media (pointer: coarse) {
    /* Ensure minimum 44px touch targets on mobile */
    .sidebar-menu a,
    .subitem-link,
    .btn-primary,
    .btn-secondary,
    .btn-hud,
    .btn-view,
    .btn-icon,
    .search-result {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase spacing for easier tapping */
    .sidebar-menu li {
        margin-bottom: 8px;
    }
    
    .subitems-container {
        gap: 8px;
    }
}

/* ========== Print Styles ========== */
@media print {
    /* Hide decorative elements when printing */
    .cyber-grid-bg,
    .cyber-gradient-mesh,
    body::after,
    .blob,
    .blink-cursor,
    .sound-toggle,
    .audio-visualizer {
        display: none !important;
    }
    
    /* Simplify colors for printing */
    body {
        background: white !important;
        color: black !important;
    }
    
    .cyber-category,
    .stat-card,
    .category-card {
        background: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        clip-path: none !important;
        border-radius: 4px !important;
    }
}

/* ========== High Contrast Mode ========== */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(255, 255, 255, 0.3);
        --fg-muted: rgba(255, 255, 255, 0.8);
    }
    
    .cyber-category,
    .stat-card,
    .category-card {
        border-width: 2px;
    }
    
    .neon-text-green {
        text-shadow: 0 0 10px var(--neon-green);
    }
}

/* ========== Data Saver Mode ========== */
@media (prefers-reduced-data: reduce) {
    /* Disable animated backgrounds */
    .blob {
        animation: none;
    }
    
    .cyber-grid-bg,
    .cyber-gradient-mesh {
        display: none;
    }
}