/* ============================================
   全局样式总表 - 结构清晰版
   1. CSS变量定义（主题色/阴影/动画）
   2. 基础样式重置
   3. 全局链接/图片/文字基础设置
   4. 标题通用样式
   5. 布局通用样式
   6. 无障碍适配
   7. 骨架屏加载动画
   8. 全局通用动画
============================================= */

/* ========== 1. CSS 根变量定义（全站统一主题配置） ========== */
/* 定义全站复用的颜色、阴影、过渡动画，方便统一修改主题 */
:root {
  /* 颜色系统 */
  --primary-color: #333;            /* 主文字色 */
  --secondary-color: #666;          /* 次要文字色 */
  --light-color: #f9f9f9;           /* 浅背景色 */
  --white-color: #fff;               /* 纯白色 */
  --black-color: #1a1a1a;            /* 纯黑色 */

  /* 阴影系统 */
  --shadow-sm: 0 1px 5px rgba(0,0,0,0.02);     /* 小阴影 */
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);    /* 中阴影 */
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.15);   /* 大阴影 */

  /* 过渡动画 */
  --transition-base: all 0.3s ease;             /* 基础快速过渡 */
  --transition-slow: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);  /* 慢速平滑过渡 */
}

/* ========== 2. 全局基础样式重置 ========== */
/* 清除所有元素默认内外边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;  /* 清除移动端点击高亮 */
  outline: none;                              /* 清除默认焦点边框 */
}

/* 清除列表默认样式 */
ul, li {
  list-style: none;
}

/* 链接统一样式：无下划线、继承父级颜色 */
a {
  text-decoration: none;
  color: inherit;
}

/* 图片统一样式：块级元素、最大宽度100%、自适应高度 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ========== 3. body 全局默认样式 ========== */
body {
  font-family: "Microsoft Yahei", "PingFang SC", sans-serif;  /* 全站默认字体 */
  color: var(--primary-color);       /* 默认文字颜色 */
  background-color: var(--white-color);/* 默认背景色 */
  overflow-x: hidden;                 /* 禁止水平滚动 */
  font-size: 16px;                   /* 默认字体大小 */
  line-height: 1.6;                  /* 默认行高 */
  scroll-behavior: smooth;           /* 页面平滑滚动 */
}

/* ========== 4. 标题通用样式（全站标题复用） ========== */
/* 副标题（英文小标题） */
.section-sub {
  font-size: clamp(0.8rem, 1.5vw, 1rem);  /* 响应式字体大小 */
  margin-bottom: clamp(0.5rem, 1vw, 1rem);/* 响应式底部间距 */
  margin-top: 0 !important;               /* 清除顶部间距 */
  text-transform: uppercase;              /* 大写 */
  color: #999;                            /* 灰色文字 */
  letter-spacing: 2px;                     /* 字间距 */
}

/* 主标题（模块大标题） */
.sec-title {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);  /* 响应式字体大小 */
  margin-bottom: clamp(1.5rem, 3vw, 3rem); /* 响应式底部间距 */
  color: var(--primary-color);              /* 主文字色 */
  margin-top: 0.5rem !important;            /* 顶部小间距 */
}

/* ========== 5. 布局容器通用样式 ========== */
/* 页面内容主容器：居中、内边距、最大宽度 */
.section {
  padding: 80px 1rem 2rem !important;   /* 上下内边距 + 左右安全边距 */
  max-width: 1200px;                    /* 内容最大宽度 */
  margin: 0 auto;                       /* 水平居中 */
}

/* ========== 6. 无障碍访问优化 ========== */
/* 用户开启“减少动画”时，禁用所有动画，提升体验 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ========== 7. 骨架屏加载动画 ========== */
/* 内容加载前的占位加载效果 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;  /* 循环流动动画 */
}

/* 骨架屏流动关键帧 */
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }   /* 初始位置 */
  100% { background-position: -200% 0; }/* 结束位置（形成流动效果） */
}

/* ========== 8. 全局通用动画类 ========== */
/* 淡入动画 */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
  opacity: 0;  /* 初始透明 */
}

@keyframes fadeIn {
  to { opacity: 1; }  /* 最终完全显示 */
}

/* 淡入+上移动画 */
.fade-up {
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;               /* 初始透明 */
  transform: translateY(30px);/* 初始向下偏移30px */
}

@keyframes fadeUp {
  to { 
    opacity: 1;             /* 最终显示 */
    transform: translateY(0);/* 最终回到原位 */
  }
}