/**
 * perf.css — 全站性能与移动端增强
 * 适用于根目录所有 HTML 页面
 * 2026-03 生成
 */

/* ===== 1. 字体渲染优化 ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* ===== 2. 图片性能 ===== */
img {
  max-width: 100%;
  height: auto;
  /* 避免 CLS（累计布局偏移）*/
  content-visibility: auto;
}

/* 懒加载图片占位（防止布局抖动）*/
img[loading="lazy"] {
  background: #f3f4f6;
}

/* ===== 3. 触控优化（移动端） ===== */
a, button, [role="button"], label, input, select, textarea {
  touch-action: manipulation;
}

/* 点击反馈 */
a, button {
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15);
}

/* ===== 4. 移动端可访问性 ===== */
@media (max-width: 768px) {
  /* 最小点击区域 44×44px（Apple/Google 规范）*/
  a, button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* 内联文字链接不强制 44px 触控目标，避免撞开行高 */
  p a, span a, div a:not(.block):not(.inline-flex):not(.flex):not(.grid) {
    min-height: auto;
    min-width: auto;
  }

  /* 防止 iOS Safari 输入框自动放大 */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ===== 5. 关键渲染路径优化 ===== */

/* 减少 repaint：使用 transform 代替 top/left 的动画由各页面自行处理 */
/* 提升合成层（仅对有动画的元素启用，防止过度提升）*/
.hero, .hero-section, #hero {
  will-change: auto; /* 避免不必要的合成层 */
}

/* ===== 6. 滚动条优化（减少布局偏移）===== */
html {
  overflow-y: scroll; /* 固定滚动条宽度，防止内容抖动 */
}

/* ===== 7. 图片懒加载 aspect-ratio 防 CLS ===== */
.img-wrapper {
  position: relative;
  overflow: hidden;
}

/* 常见图片比例占位 */
.img-16-9 { aspect-ratio: 16/9; }
.img-4-3  { aspect-ratio: 4/3; }
.img-1-1  { aspect-ratio: 1/1; }

/* ===== 8. 字体加载闪烁优化 ===== */
body {
  font-display: swap; /* 字体加载时先显示系统字体 */
}

/* ===== 9. 选区与拖拽 ===== */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* ===== 10. 打印优化 ===== */
@media print {
  /* 隐藏不必要的元素 */
  header, footer, nav, .no-print,
  [class*="fixed"], [class*="sticky"] {
    display: none !important;
  }

  /* 避免跨页断行 */
  h1, h2, h3, h4, p, li {
    page-break-inside: avoid;
  }

  /* 打印背景白色 */
  * {
    background: white !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
  }
}

/* ===== 11. 核心内容优先渲染（content-visibility）===== */
/* 非首屏重型区域延迟渲染，节省 GPU */
.section-below-fold,
footer,
.faq-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ===== 12. 资源预加载提示（由 JS 动态插入，此处提供样式基础）===== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}