/* ============================================================
   全局样式文件
   所有页面统一引用，控制主题色、字体、间距、通用样式
   ============================================================ */

/* ============================================================
   1. 字体声明
   ============================================================ */

/* ----- 苹方系列 ----- */

@font-face {
  font-family: 'PingFang-Regular';
  src: url('fonts/PingFang-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
  font-family: 'PingFang-Semibold';
  src: url('../home-web/fonts/PingFang-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
} */

/* ----- 思源黑体-Medium ----- */
/* @font-face {
  font-family: '思源黑体-Medium';
  src: url('../home-web/fonts/477e0d18-b577-4d5c-abda-39b986c3e16d.woff') format('woff');
  font-weight: 500;
  font-style: normal;
} */

/* ----- PlusJakartaSans 系列 ----- */
/* @font-face {
  font-family: 'PlusJakartaSans-SemiBold';
  src: url('../home-web/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PlusJakartaSans-Medium';
  src: url('../index/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
} */


/* ============================================================
   2. CSS 变量（主题）
   ============================================================ */

:root {
  /* 字体大小限制 */
  --font-size-40px: 40px;
  --font-size-30px: 30px;
  --font-size-20px: 20px;
  --font-size-18px: 18px;
  --font-size-16px: 16px;
  --font-size-14px: 14px;
  --font-size-12px: 12px;

  /* ----- 限制内容宽度 ----- */
  --limit-content-width: 1200px;

  /* ----- 主题色 ----- */
  --color-primary: #1F2329;
  /* --color-primary: pink; */
  /* color: red; */
  /* 主色，标题/重要文字 */
  --color-primary-light: #646A73;
  /* --color-primary-light: red;  */
  /* 辅助色，描述文字 */
  /* --color-accent: #646A73; */
  /* --color-accent: pink; */


  /* ----- 字体族 ----- */
  --font-base: 'PingFang-Regular';
  /* --font-heading: 'PingFang-Semibold', 'Microsoft YaHei', sans-serif;
  --font-en: 'PlusJakartaSans-SemiBold', sans-serif; */

  /* ----- 字号缩放变量（用于 calc() 断点缩放）----- */
  --font-scale-46px: 1;
  /* 大标题 */
  --font-scale-30px: 1;
  /* 模块标题 */
  --font-scale-26px: 1;
  /* 轮播标签 */
  --font-scale-24px: 1;
  /* 卡片标题 */
  --font-scale-20px: 1;
  /* 描述文字 */
  --font-scale-18px: 1;
  /* 小字 */
  --font-scale-16px: 1;
  /* 更小字 */

  /* ----- 模块间距 ----- */
  --section-second-margin-top: 240px;
  --section-margin-top: 180px;
  --section-margin-bottom: 180px;
  --section-margin-120px: 200px;
  --section-margin-60px: 30px;
  --section-first-margin-top: 80px;
  --section-first-margin-bottom: 80px;

  /* ----- 圆角 ----- */
  --radius-lg: 12px;

  /* ----- 阴影 ----- */
  --shadow-card: -8px -8px 16px 0 rgba(255, 255, 255, 1);
  --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* ----- 布局 ----- */
  --max-content-width: 1440px;

  /* ----- 过渡动画 ----- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ============================================================
   3. 响应式变量覆盖
   ============================================================ */

/* 1200px */
@media (max-width: 1200px) {
  :root {
    --font-scale-46px: 0.7;
    --font-scale-26px: 0.85;
    --font-scale-20px: 0.85;
    --font-scale-30px: 0.8;
    --font-scale-16px: 0.85;
  }
}

/* 768px */
@media (max-width: 768px) {
  :root {
    --limit-content-width: 300px;

    /* 字体大小限制 */
    --font-size-40px: 20px;
    --font-size-30px: 20px;
    --font-size-20px: 16px;
    --font-size-18px: 16px;
    --font-size-16px: 13px;
    --font-size-14px: 13px;
    --font-size-12px: 13px;

  }

  .section-title-link {
    color: var(--color-primary);
    /* width: 200px; */
    margin: 0 auto;
    text-align: center;
    cursor: default;
  }
}



/* ============================================================
   4. 全局通用样式类
   ============================================================ */

/* ----- home通用间距类 ----- */
.section-margin {
  margin-top: var(--section-margin-120px);
  margin-bottom: var(--section-margin-60px);
}

.section-margin-first {
  margin-top: var(--section-first-margin-top);
  margin-bottom: var(--section-first-margin-bottom);
}

.section-margin-second {
  margin-top: var(--section-second-margin-top);
}

.section-margin-advantages {
  margin-bottom: var(--section-margin-60px);
}

/* ----- 模块标题通用样式 ----- */
/* 使用方式：<a class="section-title-link section-margin">标题</a> */
.section-title-link {
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

/* ----- 卡片容器通用 ----- */
.card-bg {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
}

/* ----- 字号缩放工具类 ----- */
.text-16 {
  font-size: calc(16px * var(--font-scale-16px));
}

.text-18 {
  font-size: calc(18px * var(--font-scale-18px));
}

.text-20 {
  font-size: calc(20px * var(--font-scale-20px));
}

.text-24 {
  font-size: calc(24px * var(--font-scale-24px));
}

/* ----- 颜色工具类 ----- */
.color-primary {
  color: var(--color-primary);
}

.color-primary-light {
  color: var(--color-primary-light);
}

/* ----- 全局基础重置补充 ----- */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

.hover-card {
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 10px 0 rgba(44, 50, 83, .01), 0 4px 48px 0 rgba(44, 50, 83, .08);
}

.link-p{
  display: inline-block; 
  margin-top: 10px;
}


/* 480px 小屏手机 */
@media (max-width: 480px) {
  :root {
    --limit-content-width: 340px;

    /* 字体大小限制 */
    --font-size-40px: 20px;
    --font-size-30px: 20px;
    --font-size-20px: 18px;
    --font-size-18px: 14px;
    --font-size-16px: 14px;
    --font-size-14px: 12px;
    --font-size-12px: 12px;

    --section-second-margin-top: 80px;
    --section-margin-120px: 80px !important;
    --section-margin-top: 30px;
    --section-margin-bottom: 30px;
    --section-margin-60px: 30px;
    --section-first-margin-top: 60px;
    --section-first-margin-bottom: 30px;

    /* --section-second-margin-top: 1px;
    --section-margin-120px: 1px;
    --section-margin-top: 1px;
    --section-margin-bottom: 1px;
    --section-margin-60px: 1px;
    --section-first-margin-top: 1px;
    --section-first-margin-bottom: 1px; */

    --font-scale-46px: 0.52;
    --font-scale-26px: 0.62;
    --font-scale-20px: 0.7;
  }

  .hover-card:hover {
    transform: none;
    /* box-shadow: none; */
  }
}

/* ============================================================
   通用入场动画：文字到达可视区后从 50% 平缓放大到 100%
   用法：给元素添加 class="text-animate"，JS 中用 IntersectionObserver 触发 .is-visible
   ============================================================ */
.text-animate {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}

.text-animate.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* ============================================================
   通用入场动画：从左向右滑入（slide-in-left）
   用法：给元素添加 class="slide-in-left"，JS 中用 IntersectionObserver 触发 .is-visible
   ============================================================ */
.slide-in-left {
    transform: translateX(-60px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}

.slide-in-left.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* ============================================================
   通用入场动画：从右向左滑入（slide-in-right）
   用法：给元素添加 class="slide-in-right"，JS 中用 IntersectionObserver 触发 .is-visible
   ============================================================ */
.slide-in-right {
    transform: translateX(60px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}

.slide-in-right.is-visible {
    transform: translateX(0);
    opacity: 1;
}