/* Performance Override Styles */ /* These classes are applied to to disable GPU-intensive effects */ /* ================================================================= SMOOTH TRANSITIONS FOR TIER CHANGES Applied when switching between performance tiers ================================================================= */ body.perf-transitioning * { transition: opacity 0.2s ease-out, filter 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out !important; } /* Prevent layout shift during transitions */ body.perf-transitioning { overflow-anchor: auto; } /* Toggle Button Styles */ .perf-toggle-button { position: fixed; bottom: 20px; right: 20px; z-index: 999998; background: linear-gradient(135deg, rgb(15 15 35 / 95%), rgb(25 25 50 / 95%)); border: 1px solid rgb(255 107 0 / 30%); color: rgb(255 255 255 / 90%); padding: 12px 18px; border-radius: 30px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: var(--font-display, system-ui); font-size: 0.85rem; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 10%); transition: all 0.3s ease; } /* Pulse animation for button reminder */ @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 10%); } 50% { transform: scale(1.1); box-shadow: 0 4px 30px rgb(255 107 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 20%); } } .perf-toggle-button:hover { background: linear-gradient(135deg, rgb(20 20 45 / 95%), rgb(35 35 70 / 95%)); border-color: rgb(255 107 0 / 50%); transform: translateY(-2px); box-shadow: 0 6px 25px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 15%); } .perf-toggle-button svg { width: 20px; height: 20px; stroke: rgb(255 107 0); } .perf-mode-indicator { color: rgb(255 149 0); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; } /* Mode Panel Styles */ .perf-mode-panel { position: fixed; z-index: 999999; background: linear-gradient(135deg, rgb(15 15 35 / 98%), rgb(25 25 50 / 98%)); border: 1px solid rgb(255 107 0 / 20%); border-radius: 12px; padding: 0; min-width: 320px; backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgb(0 0 0 / 50%), inset 0 1px 0 rgb(255 255 255 / 10%); font-family: var(--font-display, system-ui); animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .perf-panel-header { padding: 15px 20px; border-bottom: 1px solid rgb(255 107 0 / 10%); color: rgb(255 255 255 / 90%); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .perf-mode-list { padding: 10px; } .perf-mode-item { width: calc(100% - 10px); background: rgb(255 255 255 / 2%); border: 1px solid rgb(255 107 0 / 10%); color: rgb(255 255 255 / 70%); padding: 12px 15px; margin: 5px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transition: all 0.2s ease; text-align: left; position: relative; user-select: none; } .perf-mode-item:hover { background: rgb(255 107 0 / 5%); border-color: rgb(255 107 0 / 20%); color: rgb(255 255 255 / 90%); } .perf-mode-item.active { background: rgb(255 107 0 / 10%); border-color: rgb(255 107 0 / 40%); color: rgb(255 149 0); } .mode-name { font-size: 0.85rem; font-weight: 500; } .mode-desc { font-size: 0.7rem; opacity: 0.7; } .perf-panel-footer { padding: 15px 20px; border-top: 1px solid rgb(255 107 0 / 10%); display: flex; justify-content: space-between; align-items: center; } .perf-hide-btn { display: inline-block; background: rgb(255 107 0 / 10%); border: 1px solid rgb(255 107 0 / 20%); color: rgb(255 255 255 / 70%); padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; user-select: none; } .perf-hide-btn:hover { background: rgb(255 107 0 / 20%); color: rgb(255 255 255 / 90%); } .perf-shortcut { font-size: 0.65rem; color: rgb(255 255 255 / 50%); } /* Toggle Switch Styles */ .perf-toggles-list { padding: 15px; } .perf-toggle-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin: 5px 0; background: rgb(255 255 255 / 2%); border: 1px solid rgb(255 107 0 / 10%); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; user-select: none; } .perf-toggle-item:hover { background: rgb(255 107 0 / 5%); border-color: rgb(255 107 0 / 20%); } .perf-toggle-info { display: flex; flex-direction: column; gap: 2px; flex: 1; } .toggle-name { font-size: 0.85rem; font-weight: 500; color: rgb(255 255 255 / 90%); } .toggle-desc { font-size: 0.65rem; color: rgb(255 255 255 / 60%); } .perf-toggle-switch { position: relative; width: 44px; height: 24px; background: rgb(255 255 255 / 10%); border-radius: 12px; transition: background 0.3s ease; cursor: pointer; } .perf-toggle-switch.on { background: rgb(255 107 0 / 50%); } .toggle-slider { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: rgb(255 255 255 / 90%); border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); } .perf-toggle-switch.on .toggle-slider { transform: translateX(20px); background: white; } /* Auto-controlled toggle indicators */ .perf-toggle-item.auto-controlled { background: rgb(255 200 0 / 5%); border: 1px solid rgb(255 200 0 / 15%); position: relative; } .perf-toggle-item.auto-controlled .toggle-desc { color: rgb(255 255 255 / 60%); } .perf-toggle-item.auto-controlled .perf-toggle-switch { opacity: 0.6; cursor: not-allowed; } .perf-toggle-item.auto-controlled .perf-toggle-switch.disabled { pointer-events: none; } /* Auto badge */ .auto-badge { display: inline-block; margin-left: 8px; padding: 2px 6px; background: rgb(255 200 0 / 20%); color: rgb(255 200 0); border: 1px solid rgb(255 200 0 / 30%); border-radius: 3px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Lock icon for auto-controlled toggles */ .perf-toggle-switch .lock-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75rem; opacity: 0.7; pointer-events: none; } /* Animation for blocked click attempt */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .perf-toggle-item.auto-blocked { animation: shake 0.3s ease-in-out; border-color: rgb(255 50 50 / 50%); } /* Performance Status Bar */ .perf-status-bar { padding: 10px 15px; background: rgb(0 0 0 / 20%); border-bottom: 1px solid rgb(255 107 0 / 10%); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; } .perf-fps-indicator { font-weight: 600; padding: 3px 8px; border-radius: 4px; background: rgb(0 0 0 / 30%); } .perf-fps-indicator.perf-high { color: rgb(0 255 100); border: 1px solid rgb(0 255 100 / 30%); } .perf-fps-indicator.perf-medium { color: rgb(255 200 0); border: 1px solid rgb(255 200 0 / 30%); } .perf-fps-indicator.perf-low { color: rgb(255 50 50); border: 1px solid rgb(255 50 50 / 30%); } .perf-device-score { color: rgb(255 255 255 / 60%); font-size: 0.7rem; } /* Section Labels */ .perf-section-label { padding: 8px 12px 4px; margin: 8px 0 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 107 0 / 70%); border-bottom: 1px solid rgb(255 107 0 / 15%); } /* Scrollable Panel */ .perf-scrollable .perf-toggles-list { max-height: 450px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgb(255 107 0 / 20%) transparent; } .perf-scrollable .perf-toggles-list::-webkit-scrollbar { width: 6px; } .perf-scrollable .perf-toggles-list::-webkit-scrollbar-track { background: transparent; } .perf-scrollable .perf-toggles-list::-webkit-scrollbar-thumb { background: rgb(255 107 0 / 20%); border-radius: 3px; } .perf-scrollable .perf-toggles-list::-webkit-scrollbar-thumb:hover { background: rgb(255 107 0 / 30%); } /* ================================================================= PERFORMANCE MODE: NO BLUR Disables all blur effects (backdrop-filter and filter blur) ================================================================= */ body.perf-no-blur * { backdrop-filter: none !important; } body.perf-no-blur *[style*='backdrop-filter'] { backdrop-filter: none !important; } /* Remove blur filters but keep other filters */ body.perf-no-blur * { filter: drop-shadow(var(--drop-shadow, none)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) saturate(var(--saturate, 1)) !important; } /* Specific blur removals */ body.perf-no-blur .orbit-glow-left, body.perf-no-blur .orbit-glow-right, body.perf-no-blur .cockpit-glow, body.perf-no-blur .panel-reflection, body.perf-no-blur .horizon-glow, body.perf-no-blur #stars, body.perf-no-blur .perf-toggle-button { filter: none !important; } /* Panel adjustments without blur */ body.perf-no-blur .panel-bar, body.perf-no-blur .panel-menu { background: linear-gradient( 180deg, rgb(5 5 16 / 90%) 0%, rgb(0 0 0 / 95%) 100% ) !important; } /* ================================================================= PERFORMANCE MODE: NO ANIMATIONS Disables all continuous animations ================================================================= */ body.perf-no-animations *, body.perf-no-animations *::before, body.perf-no-animations *::after { animation: none !important; animation-play-state: paused !important; } /* Keep essential transitions but remove animations */ body.perf-no-animations * { transition-duration: 0.1s !important; } /* Stop will-change optimizations */ body.perf-no-animations * { will-change: auto !important; } /* ================================================================= PERFORMANCE MODE: REDUCED SHADOWS Reduces shadow complexity for better performance ================================================================= */ body.perf-reduced-shadows * { /* Reduce box-shadow blur radius by 50% and remove spread */ box-shadow: var(--reduced-box-shadow, none) !important; /* Simplify text shadows - single shadow only */ text-shadow: var( --reduced-text-shadow, 0 1px 1px rgb(0 0 0 / 50%) ) !important; } /* Specific reduced shadow overrides for common elements */ body.perf-reduced-shadows .instrument { box-shadow: 0 2px 8px rgb(0 0 0 / 30%) !important; } body.perf-reduced-shadows .instrument-label, body.perf-reduced-shadows .propulsion-label-front, body.perf-reduced-shadows .propulsion-label-rear, body.perf-reduced-shadows .propulsion-label-turbo { text-shadow: 0 1px 1px rgb(0 0 0 / 60%) !important; } /* Reduce drop-shadow filters */ body.perf-reduced-shadows [style*='drop-shadow'], body.perf-reduced-shadows .battery-svg, body.perf-reduced-shadows .hydrogen-svg, body.perf-reduced-shadows .route-line, body.perf-reduced-shadows .city-marker { filter: drop-shadow(0 0 2px currentcolor) !important; } /* Disable glow shadows but keep functional shadows */ body.perf-reduced-shadows [class*='glow'] { box-shadow: none !important; text-shadow: none !important; } /* Keep critical UI shadows but simplified */ body.perf-reduced-shadows .perf-toggle-button { box-shadow: 0 2px 10px rgb(0 0 0 / 25%) !important; } body.perf-reduced-shadows .perf-mode-panel { box-shadow: 0 5px 20px rgb(0 0 0 / 40%) !important; } /* ================================================================= PERFORMANCE MODE: NO SHADOWS Disables all box and text shadows ================================================================= */ body.perf-no-shadows * { box-shadow: none !important; text-shadow: none !important; } /* ================================================================= PERFORMANCE MODE: NO PARALLAX Disables parallax background effects ================================================================= */ body.perf-no-parallax .parallax-layer { transform: none !important; } body.perf-no-parallax .parallax-container { position: static !important; } /* ================================================================= PERFORMANCE MODE: NO BACKGROUND Hides animated background completely ================================================================= */ body.perf-no-background .parallax-container { display: none !important; } body.perf-no-background { background: #000 !important; } /* ================================================================= PERFORMANCE MODE: NO GLOWS Removes decorative glow effects ================================================================= */ body.perf-no-glows .orbit-glow-left, body.perf-no-glows .orbit-glow-right, body.perf-no-glows .cockpit-glow, body.perf-no-glows .panel-reflection, body.perf-no-glows .horizon-glow, body.perf-no-glows [class*='glow'] { display: none !important; } /* ================================================================= GRANULAR ANIMATION CONTROLS Disable specific animation categories ================================================================= */ /* Stars Animation (twinkle, drift) - Specific toggle for stars only */ body.perf-no-stars-anim #stars { animation: none !important; } /* Background Animations (all background effects including stars) */ body.perf-no-background-anim #stars, body.perf-no-background-anim .parallax-layer { animation: none !important; } /* UI Animations (pulse, glow, orbit) */ body.perf-no-ui-anim .loading-text, body.perf-no-ui-anim .loading-text::before, body.perf-no-ui-anim .orbit-glow-left, body.perf-no-ui-anim .orbit-glow-right, body.perf-no-ui-anim .logo-img { animation: none !important; } /* Shake Animations (panel & dashboard vibration) */ body.perf-no-shake-anim .panel-bar, body.perf-no-shake-anim .dashboard { animation: none !important; } /* Hydrogen Gauge Animations - Complete list */ body.perf-no-hydrogen-anim .containment-field, body.perf-no-hydrogen-anim .field-rings, body.perf-no-hydrogen-anim .field-ring, body.perf-no-hydrogen-anim .plasma-sphere, body.perf-no-hydrogen-anim .plasma-core, body.perf-no-hydrogen-anim .plasma-swirl, body.perf-no-hydrogen-anim .frost-particle, body.perf-no-hydrogen-anim .energy-bolt, body.perf-no-hydrogen-anim .indicator-ring circle, body.perf-no-hydrogen-anim [data-gauge='hydrogen'] *, body.perf-no-hydrogen-anim [class*='hydrogen-'] * { animation: none !important; animation-play-state: paused !important; } /* Battery Gauge Animations - Complete list */ body.perf-no-battery-anim .arc-segment, body.perf-no-battery-anim .core-center, body.perf-no-battery-anim .core-pulse, body.perf-no-battery-anim .plasma-swirl, body.perf-no-battery-anim .particle, body.perf-no-battery-anim .energy-core, body.perf-no-battery-anim .arc-outer-ring, body.perf-no-battery-anim .battery-arc-reactor *, body.perf-no-battery-anim [data-gauge='battery'] *, body.perf-no-battery-anim [class*='battery-'] * { animation: none !important; animation-play-state: paused !important; } /* Airspeed Animations - Fixed selectors */ body.perf-no-airspeed-anim .flow-line, body.perf-no-airspeed-anim .flow-line-top, body.perf-no-airspeed-anim .flow-line-right, body.perf-no-airspeed-anim .flow-line-bottom, body.perf-no-airspeed-anim .flow-line-left, body.perf-no-airspeed-anim .pressure-rings, body.perf-no-airspeed-anim .sonic-ring, body.perf-no-airspeed-anim .sonic-waves, body.perf-no-airspeed-anim .vortex, body.perf-no-airspeed-anim .vortex-spiral, body.perf-no-airspeed-anim .arc-indicator, body.perf-no-airspeed-anim .ias-rect-indicator, body.perf-no-airspeed-anim .ias-rect, body.perf-no-airspeed-anim .ias-digital, body.perf-no-airspeed-anim [class*='airspeed-'] *, body.perf-no-airspeed-anim [data-gauge='airspeed'] * { animation: none !important; animation-play-state: paused !important; } /* Groundspeed Animations - Separate from Airspeed */ body.perf-no-groundspeed-anim .gs-rect-indicator, body.perf-no-groundspeed-anim .gs-rect, body.perf-no-groundspeed-anim .gs-digital, body.perf-no-groundspeed-anim .progress-bar, body.perf-no-groundspeed-anim [class*='groundspeed-'] *, body.perf-no-groundspeed-anim [data-gauge='groundspeed'] * { animation: none !important; animation-play-state: paused !important; } /* VSI Arrow Animations */ body.perf-no-vsi-anim .vsi-arrow, body.perf-no-vsi-anim [class*='vsi-'] { animation: none !important; } /* Altitude Animations */ body.perf-no-altitude-anim .altitude-center-ref, body.perf-no-altitude-anim [class*='altitude-'] { animation: none !important; } /* PFD Star Animations */ body.perf-no-pfd-anim .pfd-star, body.perf-no-pfd-anim [class*='star-'] { animation: none !important; } /* Propulsion Animations */ body.perf-no-propulsion-anim .propulsion-arc, body.perf-no-propulsion-anim .propulsion-status-dot, body.perf-no-propulsion-anim [data-gauge='propulsion'] *, body.perf-no-propulsion-anim [class*='propulsion-'] * { animation: none !important; animation-play-state: paused !important; } /* Map Animations - Fixed selectors */ body.perf-no-map-anim .compass-rose, body.perf-no-map-anim .route-line, body.perf-no-map-anim .city-marker, body.perf-no-map-anim .city-marker-outer, body.perf-no-map-anim .range-ring, body.perf-no-map-anim [data-gauge='airmap'] *, body.perf-no-map-anim [class*='compass-'] *, body.perf-no-map-anim [class*='route-'] *, body.perf-no-map-anim [class*='city-'] * { animation: none !important; animation-play-state: paused !important; } /* ================================================================= PERFORMANCE MODE: MINIMAL Disables blur, animations, and shadows ================================================================= */ body.perf-minimal * { /* No blur */ backdrop-filter: none !important; filter: none !important; /* No animations */ animation: none !important; animation-play-state: paused !important; /* No shadows */ box-shadow: none !important; text-shadow: none !important; /* Fast transitions */ transition-duration: 0.05s !important; /* No will-change */ will-change: auto !important; } /* Simplify gradients */ body.perf-minimal .orbit-glow-left, body.perf-minimal .orbit-glow-right, body.perf-minimal .cockpit-glow { display: none !important; } /* Remove decorative elements */ body.perf-minimal .panel-reflection, body.perf-minimal .horizon-glow { display: none !important; } /* Solid backgrounds for panels */ body.perf-minimal .panel-bar, body.perf-minimal .panel-menu { background: rgb(10 10 25) !important; } /* ================================================================= PERFORMANCE MODE: ULTRA MINIMAL Maximum performance - removes everything non-essential ================================================================= */ body.perf-ultra * { /* Remove all effects */ backdrop-filter: none !important; filter: none !important; box-shadow: none !important; text-shadow: none !important; /* No animations or transitions */ animation: none !important; transition: none !important; /* No transforms */ transform: none !important; /* No will-change */ will-change: auto !important; /* Disable blend modes */ mix-blend-mode: normal !important; /* Remove masks */ mask: none !important; mask-image: none !important; /* Disable clip paths */ clip-path: none !important; } /* Remove all decorative elements */ body.perf-ultra .parallax-container, body.perf-ultra .orbit-glow-left, body.perf-ultra .orbit-glow-right, body.perf-ultra .cockpit-glow, body.perf-ultra .panel-reflection, body.perf-ultra .horizon-glow, body.perf-ultra .decorative, body.perf-ultra [class*='glow'], body.perf-ultra [class*='shadow'] { display: none !important; } /* Simplify backgrounds */ body.perf-ultra { background: #000 !important; } body.perf-ultra .panel-bar, body.perf-ultra .panel-menu, body.perf-ultra .instrument { background: rgb(10 10 20) !important; border: 1px solid rgb(255 107 0 / 20%) !important; } /* Disable opacity animations */ body.perf-ultra * { opacity: 1 !important; } /* Keep only essential hover states */ body.perf-ultra a:hover, body.perf-ultra button:hover { opacity: 0.8 !important; } /* Preserve layout but remove visual effects */ body.perf-ultra .dashboard { background: #000 !important; } /* Keep performance toggle visible in all modes */ .perf-toggle-button, .perf-mode-panel { /* These retain their styles even in ultra mode */ animation: slideUp 0.3s ease-out !important; }