/* ========================
   基础设计系统变量
   ======================== */

@font-face {
  font-family: "HarmonyOS_Sans_SC";
  src: url("../fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2"),
    url("../fonts/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-weight: 400;
  /* 明确字重数值 */
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 字体系统 ===== */
  --font-sans: "HarmonyOS_Sans_SC", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* 主字体 */
  --font-serif: Georgia, "Times New Roman", serif;

  /*--color-text-primary: #fff;*/
  /*--color-text-secondary: hsl(210, 12%, 65%);*/
  /*--color-main: rgb(255 255 255);*/
  /*--color-tinge: #6b6b6bfc;*/
  /*--primary-color: #f4f3d3;*/
  /*--secondary-color: #ffd7ff;*/
  
  
  
    /* 品牌主色 */
  --color-primary: #c97bf6;    /* 主要颜色（深） */
  --color-primary-light: #ffd7ff; /* 主要颜色（浅） */
  
  /* 辅助色/点缀色 */
  --color-accent: #f4f3d3;     /* 次要颜色 */

  /* 背景色 */
  --color-background: #ffffff; /* 亮背景 */
  --color-background-muted: #c5c5c5; /* 亮背景 */
  --color-background-alt: #2c2c2c; /* 浅背景（作为默认背景的替代/衬托） */
  --color-background-inverse: #212121; /* 深背景（与默认背景相反）*/

  /* 文本色 (通常与背景色配对出现，可作为扩展) */
  --color-text: #ffffff;
  --color-text-alt: #333333; /* 在深色背景上使用的文本色 */
  --color-text-muted: #aeb6bd;
  
  /* 圆角 */
  --border-radius-sm: 0.5rem;  /* 小圆角，用于按钮、标签等小元素 */
  --border-radius-md: 0.75rem; /* 中圆角，默认圆角，用途最广 */
  --border-radius-lg: 1rem;   /* 大圆角，用于卡片、模态框等大容器 */
  --border-radius-xl: 2rem;     /* 超大圆角 (如果需要可以额外添加) */
  --border-radius-pill: 50rem;  /*  pill 形状 (可用于椭圆按钮) */
}

/* ========================
     基础元素样式
     ======================== */
*{
    margin: 0;
    padding: 0;
    color:var(--color-text);
}
html {
  font-size: 14px;
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}
body {
  font-family: var(--font-sans);
  line-height: 1.6;
  background-color: #000;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  position: relative;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
}
body > section {
  flex: 1;
}
body > footer {
  margin-top: auto;
}
img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

/* 基础字号（基于 body 默认字体大小） */
/* 文本阶梯系统 (基于 16px = 1rem) */
/* 辅助文本：表单标签、图例说明 */
.text-aux {
  font-size: 0.75rem;
}
/* 说明文字：图表标注、版权信息 */
.text-caption {
  font-size: 0.875rem;
}
/* 正文内容：段落文本、列表项 */
.text-body {
  font-size: 1rem;
}
/* 引导文本：摘要、引言段落 */
.text-lead {
  font-size: 1.125rem;
}
/* 子标题：区块标题、卡片标题 */
.text-subtitle {
  font-size: 1.25rem;
}
/* 标题：页面章节标题 */
.text-title {
  font-size: 1.5rem;
}
/* 主标题：页面主标题、Banner标题 */
.text-headline {
  font-size: 1.875rem;
}
/* 超大标题 */
.text-huge {
  font-size: 2.25rem;
}


/* 基础字体类（默认PC） */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 1.075rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.1rem; line-height: 1.75rem; color:#999;}
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.55rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-8xl { font-size: 6rem; line-height: 1; }
.text-9xl { font-size: 8rem; line-height: 1; }

/* 固定尺寸类 */
.text-12px { font-size: 12px; }
.text-13px { font-size: 13px; }
.text-14px { font-size: 14px; }
.text-15px { font-size: 15px; }
.text-16px { font-size: 16px; }
.text-17px { font-size: 17px; }
.text-18px { font-size: 18px; }
.text-19px { font-size: 19px; }
.text-20px { font-size: 20px; }
.text-21px { font-size: 21px; }
.text-22px { font-size: 22px; }
.text-23px { font-size: 23px; }
.text-24px { font-size: 24px; }
.text-25px { font-size: 25px; }
.text-26px { font-size: 26px; }
.text-27px { font-size: 27px; }
.text-28px { font-size: 28px; }
.text-29px { font-size: 29px; }
.text-30px { font-size: 30px; }
.text-31px { font-size: 31px; }
.text-32px { font-size: 32px; }
.text-33px { font-size: 33px; }
.text-34px { font-size: 34px; }
.text-35px { font-size: 35px; }
.text-36px { font-size: 36px; }
.text-37px { font-size: 37px; }
.text-38px { font-size: 38px; }
.text-39px { font-size: 39px; }
.text-40px { font-size: 40px; }
.text-41px { font-size: 41px; }
.text-42px { font-size: 42px; }
.text-43px { font-size: 43px; }
.text-44px { font-size: 44px; }
.text-45px { font-size: 45px; }
.text-46px { font-size: 46px; }
.text-47px { font-size: 47px; }
.text-48px { font-size: 48px; }
.text-49px { font-size: 49px; }


/* 移动端覆盖（max-width: 768px） */
@media not all and (min-width: 768px) {
    .max-md\:text-xs { font-size: 0.75rem; line-height: 1rem; }
    .max-md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-sm { font-size: 0.875rem; }
    .max-md\:text-base { font-size: 1rem; line-height: 1.5rem; color:#999;}
    .max-md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .max-md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .max-md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .max-md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .max-md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .max-md\:text-5xl { font-size: 3rem; line-height: 1; }
    .max-md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .max-md\:text-7xl { font-size: 4.5rem; line-height: 1; }
    .max-md\:text-8xl { font-size: 6rem; line-height: 1; }
    .max-md\:text-9xl { font-size: 8rem; line-height: 1; }
  
  .max-md\:text-12px { font-size: 12px !important; }
  .max-md\:text-13px { font-size: 13px !important; }
  .max-md\:text-14px { font-size: 14px !important; }
  .max-md\:text-15px { font-size: 15px !important; }
  .max-md\:text-16px { font-size: 16px !important; }
  .max-md\:text-17px { font-size: 17px !important; }
  .max-md\:text-18px { font-size: 18px !important; }
  .max-md\:text-19px { font-size: 19px !important; }
  .max-md\:text-20px { font-size: 20px !important; }
  .max-md\:text-21px { font-size: 21px !important; }
  .max-md\:text-22px { font-size: 22px !important; }
  .max-md\:text-23px { font-size: 23px !important; }
  .max-md\:text-24px { font-size: 24px !important; }
  .max-md\:text-25px { font-size: 25px !important; }
  .max-md\:text-26px { font-size: 26px !important; }
  .max-md\:text-27px { font-size: 27px !important; }
  .max-md\:text-28px { font-size: 28px !important; }
  .max-md\:text-29px { font-size: 29px !important; }
  .max-md\:text-30px { font-size: 30px !important; }
  .max-md\:text-31px { font-size: 31px !important; }
  .max-md\:text-32px { font-size: 32px !important; }
  .max-md\:text-33px { font-size: 33px !important; }
  .max-md\:text-34px { font-size: 34px !important; }
  .max-md\:text-35px { font-size: 35px !important; }
  .max-md\:text-36px { font-size: 36px !important; }
  .max-md\:text-37px { font-size: 37px !important; }
  .max-md\:text-38px { font-size: 38px !important; }
  .max-md\:text-39px { font-size: 39px !important; }
  .max-md\:text-40px { font-size: 40px !important; }
  .max-md\:text-41px { font-size: 41px !important; }
  .max-md\:text-42px { font-size: 42px !important; }
  .max-md\:text-43px { font-size: 43px !important; }
  .max-md\:text-44px { font-size: 44px !important; }
  .max-md\:text-45px { font-size: 45px !important; }
  .max-md\:text-46px { font-size: 46px !important; }
  .max-md\:text-47px { font-size: 47px !important; }
  .max-md\:text-48px { font-size: 48px !important; }
  .max-md\:text-49px { font-size: 49px !important; }
}

/* 隐藏 */
.hide {
  opacity: 0;
  display: none;
}
.show {
  opacity: 1;
  display: block;
}


.maxW {
  max-width: min(1600px, 95vw);
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 3vw, 1rem);
}
.maxW2 {
  max-width: min(1300px, 95vw);
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 3vw, 1rem);
}

/* 入场动画 */
/* 动画元素的初始状态 */
/*.animated-element {*/
/*    opacity: 0;*/
/*    transform: translateY(100px);*/
/*    transition: opacity 0.5s ease, transform 0.5s ease;*/
/*}*/
/* 动画激活时的状态 */
/*.animated-element.active {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/

.animated-element {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-element.ae-m {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-element.ae-t {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-element.ae-l {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-element.ae-r {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 动画激活时的状态 */
.animated-element.active,
.animated-element.ae-t.active,
.animated-element.ae-m.active,
.animated-element.ae-l.active,
.animated-element.ae-r.active
 {
  opacity: 1;
  transform: translateY(0);
}


/* 呼吸动画 */

.breathing-effect {
  animation: breathe var(--duration, 4.2s) ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* ===== 交互增强 ===== */

a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

a.active {
    color: var(--color-text);
    font-weight: bold;
}
a:hover{
    color: var(--color-text-alt);
}

/*a:hover {*/
/*  color: var(---color-text-muted-hover);*/
/*}*/

/* ======================== 响应式微调 ======================== */

/* @media (max-width: 768px) {
    body {
        line-height: 1.5;
    }
} */

/* ======================== 滚动条 ======================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 适用于Firefox */
@supports (scrollbar-color: #888 #f1f1f1) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  }
}