/* ====== 移动端性能优化 CSS ====== */
/* 关键渲染路径优化、减少重排重绘、提升滚动性能 */

/* 1. 关键CSS - 首屏渲染优化 */
@media screen and (max-width: 768px) {
  /* 减少初始渲染阻塞 */
  * {
    /* 使用GPU加速 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* 优化合成层 */
    will-change: auto;
  }
  
  /* 根元素优化 */
  html {
    /* 移动端流畅滚动 */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* 防止字体膨胀 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  body {
    /* 减少回流 */
    min-height: 100vh;
    /* 优化渲染性能 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 触摸优化 */
    touch-action: manipulation;
  }
}

/* 2. 移动端字体优化 */
@media screen and (max-width: 768px) {
  /* 字体栈优化 - 减少字体加载时间 */
  body, .post-content {
    font-family: 
      /* 系统字体优先 */
      -apple-system, BlinkMacSystemFont,
      /* 中文字体 */
      "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", 
      "Microsoft YaHei", "微软雅黑",
      /* 通用回退 */
      Arial, sans-serif;
    
    /* 移动端字体大小优化 */
    font-size: 16px; /* 防止iOS缩放 */
    line-height: 1.6;
    
    /* 字体渲染优化 */
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
  }
  
  /* 标题字体优化 */
  h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    /* 减少字体加载 */
    font-weight: 600;
    /* 优化行高 */
    line-height: 1.3;
  }
}

/* 3. 布局性能优化 */
@media screen and (max-width: 768px) {
  /* 容器查询优化 */
  .main {
    /* 使用flexbox减少布局计算 */
    display: flex;
    flex-direction: column;
    /* 减少宽度计算 */
    width: 100%;
    max-width: 100vw;
    /* 减少padding计算 */
    padding: 0 16px;
    box-sizing: border-box;
  }
  
  /* 文章列表优化 */
  .post-entry {
    /* 减少重排 */
    contain: layout style paint;
    /* GPU合成 */
    transform: translateZ(0);
    /* 减少阴影计算 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
  }
  
  .post-entry:hover {
    /* 只改变transform，避免重排 */
    transform: translateZ(0) translateY(-2px);
  }
}

/* 4. 图片性能优化 */
@media screen and (max-width: 768px) {
  /* 响应式图片 */
  img, picture {
    /* 减少布局抖动 */
    max-width: 100%;
    height: auto;
    /* 优化渲染 */
    display: block;
    /* GPU加速 */
    transform: translateZ(0);
    /* 防止图片闪烁 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  /* 懒加载图片优化 */
  img[loading="lazy"] {
    /* 减少重排 */
    contain: layout;
    /* 占位符优化 */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: mobile-shimmer 1.5s ease-in-out infinite;
  }
  
  @keyframes mobile-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
  }
  
  /* WebP图片优化 */
  .webp img {
    /* 启用硬件解码 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 5. 动画性能优化 */
@media screen and (max-width: 768px) {
  /* 减少动画复杂度 */
  * {
    /* 限制动画属性 */
    animation-fill-mode: both;
    animation-duration: 0.3s !important;
  }
  
  /* 关键动画保留 */
  .post-entry,
  .category-card,
  .toc {
    /* 使用transform和opacity，避免重排 */
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  /* 禁用复杂动画 */
  .post-entry:hover {
    transform: translateY(-2px) !important;
    /* 移除复杂的3D变换 */
    animation: none !important;
  }
  
  /* 滚动动画优化 */
  .scroll-reveal {
    /* 简化动画 */
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .scroll-reveal.revealed {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 6. 交互性能优化 */
@media screen and (max-width: 768px) {
  /* 触摸优化 */
  .post-entry,
  .category-card,
  button,
  .btn,
  a {
    /* 提升触摸响应 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    tap-highlight-color: rgba(0, 0, 0, 0.1);
    /* 优化点击区域 */
    min-height: 44px;
    /* 防止双击缩放 */
    touch-action: manipulation;
  }
  
  /* 滚动性能优化 */
  .main,
  .post-content,
  .toc {
    /* 启用硬件加速滚动 */
    -webkit-overflow-scrolling: touch;
    /* 滚动条优化 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  
  /* 输入框优化 */
  input,
  textarea,
  .search-input {
    /* 防止viewport缩放 */
    font-size: 16px;
    /* 优化输入体验 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
  }
}

/* 7. 内存优化 */
@media screen and (max-width: 768px) {
  /* 减少CSS选择器复杂度 */
  .post-content p,
  .post-content li,
  .post-content h1,
  .post-content h2,
  .post-content h3 {
    /* 简化样式 */
    margin-bottom: 1rem;
    /* 减少重排 */
    contain: layout;
  }
  
  /* 大图片列表优化 */
  .posts-by-category .post-card:nth-child(n+20) {
    /* 延迟渲染 */
    content-visibility: auto;
    contain-intrinsic-size: 200px;
  }
  
  /* 长列表优化 */
  .category-posts-grid {
    /* 虚拟滚动优化 */
    contain: layout style paint;
    /* 减少子元素重排影响 */
    isolation: isolate;
  }
}

/* 8. 网络优化相关CSS */
@media screen and (max-width: 768px) {
  /* 关键字体预加载 */
  @font-face {
    font-family: 'system-ui';
    src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont');
    font-display: swap; /* 文本立即显示 */
  }
  
  /* 图标字体优化 */
  .icon {
    /* 使用CSS图标替代字体图标 */
    width: 1em;
    height: 1em;
    display: inline-block;
    /* 减少重绘 */
    contain: strict;
  }
  
  /* 减少不必要的阴影 */
  .post-entry,
  .category-card {
    /* 简化阴影 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .post-entry:hover,
  .category-card:hover {
    /* 避免复杂阴影 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

/* 9. 代码块移动端优化 */
@media screen and (max-width: 768px) {
  pre,
  code,
  .highlight {
    /* 减少渲染复杂度 */
    contain: layout style paint;
    /* 优化滚动性能 */
    -webkit-overflow-scrolling: touch;
    /* 字体优化 */
    font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* 长代码块优化 */
  pre {
    /* 虚拟滚动 */
    max-height: 400px;
    overflow-y: auto;
    /* 减少重排 */
    white-space: pre;
    word-wrap: normal;
  }
}

/* 10. Mermaid图表移动端优化 */
@media screen and (max-width: 768px) {
  .mermaid-container {
    /* 减少复杂交互 */
    overflow: hidden;
    /* 优化渲染 */
    contain: layout style paint;
    /* 简化样式 */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .mermaid svg {
    /* GPU加速 */
    transform: translateZ(0);
    /* 优化渲染 */
    shape-rendering: geometricPrecision;
    text-rendering: optimizeSpeed;
  }
  
  /* 缩放控制简化 */
  .mermaid-zoom-controls {
    /* 减少按钮数量 */
    opacity: 0.8;
  }
  
  .mermaid-zoom-btn {
    /* 简化样式 */
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    width: 36px;
    height: 36px;
  }
}

/* 11. 表格移动端优化 */
@media screen and (max-width: 768px) {
  table {
    /* 响应式表格 */
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    /* 滚动优化 */
    -webkit-overflow-scrolling: touch;
    /* 减少重排 */
    contain: layout;
  }
  
  thead, tbody, th, td, tr {
    display: block;
  }
  
  th, td {
    /* 简化样式 */
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #eee;
  }
}

/* 12. 性能监控CSS */
@media screen and (max-width: 768px) {
  /* 性能指标 */
  .perf-monitor {
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    z-index: 10000;
    display: none; /* 生产环境隐藏 */
  }
  
  /* 调试模式显示 */
  .debug .perf-monitor {
    display: block;
  }
}

/* 13. 打印样式优化 */
@media print {
  /* 移除不必要元素 */
  .header,
  .toc,
  .mermaid-zoom-controls,
  .social-icons,
  .pagi {
    display: none !important;
  }
  
  /* 优化打印布局 */
  .main {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  
  .post-content {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
  }
}

/* 14. 高对比度模式支持 */
@media (prefers-contrast: high) {
  .post-entry,
  .category-card {
    border: 2px solid currentColor;
    background: white;
    color: black;
  }
  
  .post-entry:hover,
  .category-card:hover {
    background: black;
    color: white;
  }
}

/* 15. 低性能设备优化 */
@media screen and (max-width: 768px) and (max-device-pixel-ratio: 1.5) {
  /* 低DPI设备优化 */
  * {
    /* 禁用复杂动画 */
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
  }
  
  .post-entry:hover,
  .category-card:hover {
    /* 移除变换 */
    transform: none !important;
  }
  
  /* 简化阴影 */
  .post-entry,
  .category-card,
  .toc {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }
}

/* 16. 省电模式优化 */
@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;
  }
}

/* 17. 容器查询支持 */
@supports (container-type: inline-size) {
  .post-entry {
    container-type: inline-size;
  }
  
  @container (max-width: 300px) {
    .post-entry .entry-header {
      font-size: 1rem;
    }
  }
}

/* 18. 现代CSS功能优化 */
@supports (content-visibility: auto) {
  /* 长列表虚拟化 */
  .post-entry:nth-child(n+10) {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
  }
}

@supports (aspect-ratio: 16/9) {
  /* 图片纵横比优化 */
  .post-image {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}