/**
 * Performance-Optimized CSS for Spaceship Simulator
 * 
 * Blazing fast animations using GPU acceleration, transform3d, and optimized properties
 * Maintains engaging space exploration aesthetics with 60fps performance
 */

/* === GPU ACCELERATION BASE === */
.hud-panel,
.control-panel,
.grid-panel,
.grid-object,
.market-item,
.cargo-item,
.service-button {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force GPU layer */
    backface-visibility: hidden;
}

/* === OPTIMIZED ANIMATIONS === */

/* High-performance pulse using opacity only */
@keyframes optimizedPulse {
    0%, 100% { 
        opacity: 0.92;
        filter: brightness(1);
    }
    50% { 
        opacity: 0.98;
        filter: brightness(1.05);
    }
}

/* GPU-accelerated glow using transform scale */
@keyframes optimizedGlow {
    0%, 100% { 
        transform: translateZ(0) scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: translateZ(0) scale(1.001);
        filter: brightness(1.1);
    }
}

/* Efficient shimmer using transform only */
@keyframes optimizedShimmer {
    0%, 100% { 
        transform: translateZ(0) translateX(0%);
    }
    50% { 
        transform: translateZ(0) translateX(100%);
    }
}

/* Smooth floating stars - optimized for performance */
@keyframes optimizedStarsFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -100px, 0); }
}

/* Lightning-fast hover transitions */
@keyframes optimizedHover {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(2px, -1px, 0) scale(1.005); }
}

/* === PERFORMANCE MODE STYLES === */

.performance-mode .hud-panel {
    animation: optimizedPulse 4s ease-in-out infinite;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.performance-mode .control-panel {
    animation: optimizedPulse 5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.performance-mode .grid-panel {
    animation: optimizedPulse 3s ease-in-out infinite;
    animation-delay: 1s;
}

.performance-mode .hud-title,
.performance-mode .control-title,
.performance-mode .grid-title {
    animation: optimizedShimmer 6s ease-in-out infinite;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(88, 166, 255, 0.8) 50%, 
        transparent 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.performance-mode .hud-value {
    animation: optimizedGlow 3s ease-in-out infinite alternate;
}

/* === OPTIMIZED HOVER EFFECTS === */

.performance-mode .grid-object {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.performance-mode .grid-object:hover {
    transform: translate3d(2px, 0, 0);
}

.performance-mode .service-button {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.15s ease;
}

.performance-mode .service-button:hover {
    transform: translate3d(2px, 0, 0);
}

.performance-mode button {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease,
                filter 0.2s ease;
}

.performance-mode button:hover {
    transform: translate3d(0, -1px, 0) scale(1.02);
}

.performance-mode button:active {
    transform: translate3d(0, 0, 0) scale(1);
}

/* === VIRTUAL SCROLLING OPTIMIZATION === */

.virtual-scroll-viewport {
    contain: layout style paint;
    overflow-anchor: none;
}

.virtual-scroll-content {
    contain: layout;
}

.virtual-scroll-visible {
    contain: layout style paint;
}

/* === OPTIMIZED STARFIELD === */

.performance-mode body::before {
    animation: optimizedStarsFloat 60s linear infinite;
    will-change: transform;
    contain: layout;
}

/* === CROSSHAIR OPTIMIZATION === */

.performance-mode .crosshair-line {
    animation: optimizedPulse 2s ease-in-out infinite;
    will-change: opacity;
}

/* === LOADING SCREEN OPTIMIZATION === */

.performance-mode .loading-text {
    animation: optimizedPulse 2.5s infinite ease-in-out;
    will-change: transform, opacity;
}

.performance-mode #loadingScreen::before {
    animation: optimizedStarsFloat 15s linear infinite;
    will-change: transform;
}

/* === CARGO PANEL OPTIMIZATION === */

.performance-mode .cargo-panel {
    animation: optimizedPulse 4s infinite ease-in-out;
    will-change: box-shadow, opacity;
}

.performance-mode .cargo-progress-fill {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

/* === STATION MODAL OPTIMIZATION === */

.performance-mode .station-modal-content {
    will-change: transform, opacity;
}

.performance-mode .market-item,
.performance-mode .cargo-item {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.15s ease;
    will-change: transform;
}

.performance-mode .market-item:hover,
.performance-mode .cargo-item:hover {
    transform: translate3d(1px, 0, 0);
}

/* === MOBILE OPTIMIZATION === */

@media (max-width: 768px) {
    .performance-mode * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.1s !important;
    }
    
    .performance-mode .hud-panel,
    .performance-mode .control-panel,
    .performance-mode .grid-panel {
        animation: none !important;
    }
}

/* === REDUCED MOTION SUPPORT === */

@media (prefers-reduced-motion: reduce) {
    .performance-mode *,
    .performance-mode *::before,
    .performance-mode *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === HIGH REFRESH RATE OPTIMIZATION === */

@media (min-resolution: 120dpi) {
    .performance-mode * {
        animation-timing-function: linear !important;
    }
}

/* === VISIBILITY OPTIMIZATION === */

.page-hidden * {
    animation-play-state: paused !important;
    will-change: auto !important;
}

/* === SCROLLBAR OPTIMIZATION === */

.performance-mode .grid-objects::-webkit-scrollbar,
.performance-mode .cargo-items::-webkit-scrollbar {
    will-change: auto;
}

/* === LOW-POWER MODE === */

.low-power-mode * {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
    filter: none !important;
}

.low-power-mode .hud-panel,
.low-power-mode .control-panel,
.low-power-mode .grid-panel {
    background: rgba(13, 17, 23, 0.95) !important;
    border: 1px solid #58A6FF !important;
    box-shadow: none !important;
}

/* === HIGH PERFORMANCE MODE === */

.high-performance-mode {
    contain: layout style paint;
}

.high-performance-mode .hud-panel,
.high-performance-mode .control-panel,
.high-performance-mode .grid-panel {
    animation-duration: 8s !important;
    animation-timing-function: linear !important;
}

.high-performance-mode .grid-object {
    transition-duration: 0.1s !important;
}

/* === FOCUS OPTIMIZATION === */

.performance-mode *:focus {
    outline: 2px solid #58A6FF;
    outline-offset: 2px;
    transition: outline 0.15s ease;
}

/* === FONT OPTIMIZATION === */

.performance-mode {
    font-display: swap;
    text-rendering: optimizeSpeed;
}

/* === PARTICLE EFFECTS OPTIMIZATION === */

.performance-mode .particle-effect {
    will-change: transform, opacity;
    contain: layout;
}

/* === GLOW EFFECTS OPTIMIZATION === */

.performance-mode .glow-effect {
    filter: brightness(1.1);
    transition: filter 0.2s ease;
    will-change: filter;
}

.performance-mode .glow-effect:hover {
    filter: brightness(1.2);
}

/* === SMOOTH SCROLLING === */

.performance-mode .grid-objects,
.performance-mode .cargo-items,
.performance-mode .market-content {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* === COMPOSITION LAYER OPTIMIZATION === */

.performance-mode .ui-layer {
    isolation: isolate;
    contain: layout style paint;
}

/* === ANIMATION BUDGET CONTROL === */

.animation-budget-exceeded * {
    animation-play-state: paused !important;
}

.animation-budget-exceeded .essential-animation {
    animation-play-state: running !important;
}

/* === RESPONSIVE PERFORMANCE === */

@media (max-width: 1024px) {
    .performance-mode .hud-panel,
    .performance-mode .control-panel {
        animation-duration: 6s !important;
    }
}

@media (max-width: 768px) {
    .performance-mode {
        animation-fill-mode: both !important;
    }
}

/* === DEBUG PERFORMANCE MODE === */

.debug-performance * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

.debug-performance .gpu-accelerated {
    outline-color: rgba(0, 255, 0, 0.5) !important;
}

/* === HARDWARE ACCELERATION INDICATORS === */

.performance-mode .gpu-layer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 4px;
    background: rgba(0, 255, 0, 0.5);
    z-index: 10000;
    pointer-events: none;
}

/* === MEMORY OPTIMIZATION === */

.performance-mode .offscreen {
    display: none !important;
    will-change: auto !important;
}

/* === BATTERY OPTIMIZATION === */

@media (prefers-reduced-motion: reduce) {
    .performance-mode {
        filter: none !important;
        backdrop-filter: none !important;
    }
}

/* === 60FPS GUARANTEE === */

.performance-mode.fps-60 * {
    animation-timing-function: steps(60, end) !important;
}

.performance-mode.fps-60 .smooth-animation {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}