/**
 * Edge浏览器性能优化样式
 * 针对性降低渲染复杂度，提升Edge浏览器流畅度
 */

/* ═══════════════════════════════════════════════
   Edge浏览器专用优化
   ═══════════════════════════════════════════════ */

/* 1. 简化或移除backdrop-filter */
.edge-browser .navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(13, 12, 14, 0.96) !important; /* 改用纯色半透明 */
}

.edge-browser .modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.edge-browser .onboarding-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. 禁用或简化首屏复杂动画 */
.edge-browser .landing-bg::before,
.edge-browser .landing-bg::after {
  animation: none !important;
  opacity: 0.3 !important; /* 保留静态渐变，移除动画 */
  filter: blur(50px) !important; /* 减少模糊半径 */
}

.edge-browser .landing-sweep,
.edge-browser .landing-sweep-alt {
  display: none !important; /* 移除扫光动画 */
}

.edge-browser .landing-glow {
  animation: none !important;
  opacity: 0.4 !important;
  filter: blur(60px) !important; /* 减少模糊半径 */
}

.edge-browser .landing-particles {
  display: none !important; /* 移除粒子系统 */
}

/* 3. 优化卡片hover效果 */
.edge-browser .category-card,
.edge-browser .template-card {
  transition: transform 0.25s ease, border-color 0.25s ease !important; /* 简化transition属性 */
}

.edge-browser .category-card:hover,
.edge-browser .template-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; /* 简化阴影 */
}

.edge-browser .category-card::before,
.edge-browser .category-card::after {
  display: none !important; /* 移除hover时的渐变叠加层 */
}

/* 4. 简化加载动画 */
.edge-browser .loading-overlay::before,
.edge-browser .loading-overlay::after {
  animation-duration: 12s !important; /* 降低动画频率 */
}

.edge-browser .loading-stage-icon::before,
.edge-browser .loading-stage-icon::after {
  animation-duration: 4s !important;
}

/* 5. 禁用非关键的装饰动画 */
.edge-browser .landing-accent-line {
  box-shadow: none !important; /* 移除发光效果 */
}

.edge-browser .category-card-accent {
  display: none !important; /* 移除装饰点 */
}

.edge-browser .category-card-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(13, 12, 14, 0.85) !important;
}

/* ═══════════════════════════════════════════════
   通用GPU加速优化
   ═══════════════════════════════════════════════ */

/* 为需要动画的元素启用GPU加速 */
.landing-bg::before,
.landing-bg::after,
.landing-sweep,
.landing-sweep-alt,
.landing-glow,
.loading-stage-icon,
.loading-stage-icon svg,
.loading-progress-fill,
.category-card,
.template-card,
.modal-overlay,
.view {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 动画完成后移除will-change */
.view.active {
  will-change: auto;
}

.category-card:not(:hover),
.template-card:not(:hover) {
  will-change: auto;
}

/* ═══════════════════════════════════════════════
   降级方案 - 不支持backdrop-filter的浏览器
   ═══════════════════════════════════════════════ */

.no-backdrop-filter .navbar {
  background: rgba(13, 12, 14, 0.96);
}

.no-backdrop-filter .modal-overlay {
  background: rgba(8, 7, 9, 0.9);
}

.no-backdrop-filter .category-card-badge,
.no-backdrop-filter .fav-btn {
  background: rgba(13, 12, 14, 0.85);
}

/* ═══════════════════════════════════════════════
   Reduced Motion - 尊重用户偏好
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* 禁用所有动画 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 移除动画相关的transform */
  .landing-line,
  .landing-cta,
  .landing-subtle {
    opacity: 1 !important;
    transform: none !important;
  }

  .category-card,
  .template-card {
    animation: none !important;
    opacity: 1 !important;
  }

  /* 保持基本交互反馈 */
  .category-card:hover,
  .template-card:hover,
  .btn:hover {
    transition-duration: 0.15s !important;
  }
}

/* ═══════════════════════════════════════════════
   图片懒加载优化
   ═══════════════════════════════════════════════ */

/* 懒加载占位符 */
img[data-src],
[data-bg-src] {
  background: var(--surface);
  transition: opacity 0.3s ease;
}

/* 加载中状态 */
img[data-src]:not(.lazy-loaded) {
  opacity: 0.3;
  filter: blur(5px);
}

/* 加载完成 */
img.lazy-loaded {
  opacity: 1;
  filter: none;
}

/* ═══════════════════════════════════════════════
   滚动性能优化
   ═══════════════════════════════════════════════ */

/* 减少滚动时的重绘 */
.category-scroll,
.template-gallery {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

/* 优化fixed定位元素 */
.navbar,
.loading-overlay,
.modal-overlay {
  transform: translateZ(0);
}

/* ═══════════════════════════════════════════════
   文本渲染优化
   ═══════════════════════════════════════════════ */

body {
  text-rendering: optimizeSpeed; /* Edge可能在optimizeLegibility上性能较差 */
  -webkit-font-smoothing: subpixel-antialiased; /* 对某些系统友好 */
  -moz-osx-font-smoothing: auto;
}

/* 只对标题使用优化渲染 */
h1, h2, h3, h4, .serif {
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════
   渐变优化
   ═══════════════════════════════════════════════ */

/* Edge对复杂渐变性能较差，简化多层渐变 */
.edge-browser .category-card-body,
.edge-browser .template-info {
  background: linear-gradient(180deg, transparent 0%, #0d0c0e 60%) !important;
}

/* ═══════════════════════════════════════════════
   调试辅助（仅开发环境）
   ═══════════════════════════════════════════════ */

/* 显示性能优化状态 - 开发时可取消注释 */
/*
.edge-browser::after {
  content: "Edge优化已启用";
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(201, 169, 110, 0.9);
  color: #0d0c0e;
  font-size: 12px;
  border-radius: 4px;
  z-index: 10000;
  pointer-events: none;
}
*/

/* ═══════════════════════════════════════════════
   响应式性能优化
   ═══════════════════════════════════════════════ */

/* 移动设备上进一步简化 */
@media (max-width: 768px) {
  /* 移除所有伪元素装饰 */
  .category-card::before,
  .category-card::after,
  .template-card::after {
    display: none !important;
  }

  /* 简化动画 */
  .landing-bg::before,
  .landing-bg::after {
    display: none !important;
  }

  /* 降低模糊效果 */
  .landing-glow {
    filter: blur(40px) !important;
  }
}

/* 低性能设备检测（根据媒体查询） */
@media (prefers-reduced-data: reduce) {
  /* 用户设置了省流量模式，进一步简化 */
  .landing-bg,
  .landing-glow,
  .landing-particles {
    display: none !important;
  }

  img[data-src] {
    /* 等待用户手动触发加载 */
    pointer-events: auto;
    cursor: pointer;
  }
}