/**
 * 赛博朋克CSS - 性能优化补丁 v1.0
 * 
 * 在cyber.css之后引入
 * <link rel="stylesheet" href="/css/cyber.css">
 * <link rel="stylesheet" href="/css/cyber-perf.css">
 * 
 * 优化内容：
 * - 减少动画支持
 * - 移动端性能优化
 * - GPU加速优化
 * - 可访问性支持
 */

/* ==================== 减少动画偏好 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .cyber-glow,
  .scanline {
    display: none !important;
  }
  
  .glitch::before,
  .glitch::after {
    display: none !important;
  }
}

/* ==================== 移动端性能优化 ==================== */
@media (max-width: 768px) {
  /* 降低模糊效果 */
  .cyber-glow {
    filter: blur(80px);
    opacity: 0.25;
  }
  
  /* 减少毛玻璃效果的模糊程度 */
  .navbar,
  .bottom-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* 禁用扫描线（性能消耗大） */
  .scanline {
    display: none;
  }
  
  /* 简化box-shadow */
  .card:hover,
  .card-glow-cyan:hover,
  .card-glow-pink:hover,
  .card-glow-purple:hover {
    box-shadow: 0 0 15px currentColor;
  }
  
  /* 禁用glitch效果 */
  .glitch::before,
  .glitch::after {
    display: none;
  }
  
  /* 减少霓虹文字阴影层数 */
  .neon-text,
  .neon-text-cyan,
  .neon-text-pink {
    text-shadow: 0 0 10px currentColor;
  }
}

/* ==================== 低端设备检测 ==================== */
@media (max-width: 480px) and (hover: none) {
  /* 触屏设备，可能是低端手机 */
  .cyber-glow {
    display: none;
  }
  
  .cyber-bg::before {
    opacity: 0.5;
  }
  
  /* 完全禁用毛玻璃（某些低端设备不支持） */
  .card-glass {
    background: rgba(15, 15, 25, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ==================== GPU加速优化 ==================== */

/* 为频繁动画的元素启用GPU加速 */
.modal,
.bottom-sheet,
.toast,
.tab-content,
.pricing-card,
.feature-card,
.plan-card {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 动画结束后移除will-change（减少内存占用） */
.modal:not(.active),
.bottom-sheet:not(.active),
.tab-content:not(.active) {
  will-change: auto;
}

/* ==================== 滚动性能优化 ==================== */
.page-container,
.main-content,
.modal-body {
  /* 启用滚动优化 */
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  
  /* 防止滚动时重绘 */
  contain: content;
}

/* ==================== 字体加载优化 ==================== */
/* 字体加载前使用系统字体，避免FOIT */
.font-display-fallback {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 字体加载完成后的类（需要JS配合） */
.fonts-loaded .font-display-fallback {
  font-family: var(--font-display);
}

/* ==================== 图片懒加载占位 ==================== */
.lazy-image {
  background: var(--bg-card);
  min-height: 100px;
}

.lazy-image[data-loaded="true"] {
  background: none;
}

/* ==================== 触摸反馈优化 ==================== */
@media (hover: none) and (pointer: coarse) {
  /* 触屏设备 */
  .btn,
  .tab-btn,
  .pay-method,
  .recharge-item,
  .feature-card,
  .plan-card {
    /* 移除hover效果，使用active */
    transition: transform 0.1s;
  }
  
  .btn:active,
  .tab-btn:active,
  .pay-method:active,
  .recharge-item:active,
  .feature-card:active,
  .plan-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* 增大触摸区域 */
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==================== 可访问性增强 ==================== */

/* 焦点可见性 */
:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* 跳过焦点样式（鼠标用户） */
:focus:not(:focus-visible) {
  outline: none;
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root {
    --bg-card: rgba(0, 0, 0, 0.95);
    --border-color: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.7);
  }
  
  .btn-primary {
    border: 2px solid white;
  }
}

/* 暗色模式强制（如果系统是暗色但用户想要亮色） */
@media (prefers-color-scheme: light) {
  /* 本主题为暗色，不需要特别处理 */
  /* 但可以提供亮色变体开关 */
}

/* 屏幕阅读器专用内容 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== 打印优化 ==================== */
@media print {
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .navbar,
  .bottom-nav,
  .cyber-bg,
  .cyber-glow,
  .scanline,
  .btn {
    display: none !important;
  }
  
  .card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
}

/* ==================== 内容安全策略兼容 ==================== */
/* 避免使用内联样式，全部通过类控制 */

/* 动态颜色类 */
.color-cyan { color: var(--neon-cyan); }
.color-pink { color: var(--neon-pink); }
.color-green { color: var(--neon-green); }
.color-orange { color: var(--neon-orange); }

.bg-cyan { background-color: var(--neon-cyan); }
.bg-pink { background-color: var(--neon-pink); }
.bg-green { background-color: var(--neon-green); }

.border-cyan { border-color: var(--neon-cyan); }
.border-pink { border-color: var(--neon-pink); }