/* ===== 手机端性能优化CSS ===== */

/* 手机端禁用所有非必要动画 */
@media (max-width: 768px) {
  /* 禁用所有CSS动画，改用opacity过渡 */
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html, body {
    /* 移动端隐藏overflow hidden，允许滚动 */
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* ===== 视频背景优化 - 禁用视频，改用静态背景 ===== */
  .video-bg {
    display: none !important; /* 隐藏视频节点 */
  }

  /* 使用静态渐变背景替代视频 */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0F0F17 0%, #1a1a2e 50%, #0F0F17 100%);
    z-index: -2;
    pointer-events: none;
  }

  /* ===== 毛玻璃效果优化 - 移动端完全移除 ===== */
  .bg-blur {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 改用纯色背景 */
    background-color: rgba(30, 30, 40, 0.9) !important;
  }

  .ad-slide .absolute.inset-0 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(108, 99, 255, 0.3) !important;
  }

  /* ===== Box-shadow优化 - 简化或移除 ===== */
  .text-glow {
    text-shadow: none !important;
  }

  .text-glow-green {
    text-shadow: none !important;
  }

  .avatar-glow {
    box-shadow: 0 0 5px rgba(108, 99, 255, 0.5) !important;
  }

  .avatar-glow:hover {
    box-shadow: 0 0 8px rgba(108, 99, 255, 0.6) !important;
    animation: none !important;
    transform: none !important;
  }

  .quote {
    box-shadow: none !important;
  }

  .decor-dot {
    box-shadow: none !important;
    animation: none !important;
  }

  .skill-card:hover {
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2) !important;
    transform: none !important; /* 移除transform */
  }

  .skill-card::before {
    display: none !important; /* 隐藏光线动画 */
  }

  .skill-level-fill::after {
    animation: none !important;
  }

  /* ===== 自定义光标禁用 ===== */
  .custom-cursor,
  .cursor-dot,
  .cursor-click {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  /* ===== Transform优化 - 移除hover变形 ===== */
  .card-hover:hover {
    transform: none !important;
  }

  .social-icon:hover {
    transform: none !important;
  }

  .theme-toggle:hover {
    transform: none !important;
  }

  /* ===== Transition优化 ===== */
  .card-pages {
    transition: transform 0.3s ease; /* 从0.5s改为0.3s */
  }

  .page-indicator {
    transition: all 0.2s ease; /* 从0.3s改为0.2s */
  }

  .ad-slide:hover .absolute.inset-0 {
    transition: opacity 0.2s ease; /* 简化过渡 */
  }

  /* ===== 新增: GPU加速优化 ===== */
  .card-pages,
  .card-hover,
  .skill-card,
  .social-icon {
    transform: translateZ(0); /* 启用GPU加速 */
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* ===== 防止重排（Layout Thrashing） ===== */
  .ad-container {
    contain: layout style paint;
  }

  .skill-card {
    contain: layout style paint;
  }

  .card-page {
    contain: layout style;
  }

  /* ===== 禁用Scroll Behavior ===== */
  html {
    scroll-behavior: auto !important;
  }

  /* ===== 优化字体加载 ===== */
  @font-face {
    font-family: 'Orbitron';
    font-display: swap; /* 立即显示备用字体，后续替换 */
  }

  /* ===== 优化Will-Change ===== */
  .custom-cursor,
  .cursor-dot {
    will-change: auto !important; /* 移除will-change */
  }

  /* ===== 最大化性能: 禁用某些视觉特效 ===== */
  .year-text {
    text-shadow: none !important;
  }

  .page-indicator.active {
    box-shadow: 0 0 4px rgba(108, 99, 255, 0.4) !important; /* 从0.8改为0.4 */
  }
}

/* ===== 超小屏幕优化 (375px以下) ===== */
@media (max-width: 375px) {
  /* 进一步简化布局 */
  .ad-container {
    height: 60px !important;
  }

  /* 减少外边距 */
  .skill-card {
    padding: 0.6rem !important;
    gap: 0.3rem !important;
  }

  /* 字体优化 */
  .text-glow,
  .text-glow-green {
    text-shadow: none !important;
  }
}

/* ===== 网络不好时的优化 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
