/*
============================================================================
  style.css — 企业官网 全局样式
============================================================================
  用途：项目全部 CSS，包括 CSS 变量、reset、栅格、所有区块样式、响应式
  依赖：无（纯 CSS，可独立使用）
  组织方式：
    - 第一节：CSS 变量
    - 第二节：自托管字体 — Alibaba PuHuiTi 3.0
    - 第三节：Reset / 基础
    - 第四节：栅格系统
    - 第五节：工具类
    - 第六节：加载画面
    - 第七节：背景层 + 遮罩
    - 第八节：导航栏（含语言切换按钮）
    - 第九节：Hero 标题区
    - 第十节：正文 + 按钮
    - 第十一节：团队区
    - 第十二节：招聘职位区
    - 第十三节：页脚
    - 第十四节：Contact 联络信息区
    - 第十五节：响应式断点
    - 第十六节：无障碍 — 减少动画
  自定义指南：
    - 修改颜色：在 :root 变量区改
    - 修改字体：在 :root 变量区改 --font-serif / --font-mono
    - 修改断点值：搜索 "@media" 按需调整
    - 修改动画速度：搜索 "--motion-" 前缀变量
============================================================================
*/

/* =========================================================================
   第一节：CSS 自定义属性
   ========================================================================= */
:root {
  /* 调色板 */
  --color-black: #000;
  --color-white: #f8f8f8;
  --color-gray:  #b0b0b0;

  /* 边框（基于 --color-white 的透明度） */
  --color-border:       rgba(248, 248, 248, 0.12);
  --color-border-hover: rgba(248, 248, 248, 0.30);
  --color-bg-hover:     rgba(248, 248, 248, 0.05);

  /* 字体 */
  --font-serif: 'Alibaba PuHuiTi 3.0', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono:  'Alibaba PuHuiTi 3.0', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;

  /* 间距基准 */
  --spacing: 0.25rem;   /* 4px */

  /* 动画缓动函数 */
  --ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);
  --ease-standard:    cubic-bezier(0.23, 1, 0.32, 1);

  /* 动画时长 */
  --duration-fast:    0.15s;
  --duration-normal:  0.28s;
  --duration-slow:    0.4s;

  /* Z-Index 层级表 */
  --z-canvas:  0;
  --z-overlay: 10;
  --z-content: 20;
  --z-nav:     30;
  --z-loader:  50;
  --z-dialog:  60;

  /* 导航尺寸（CSS 变量便于响应式覆盖） */
  --nav-padding-inline: 1.5rem;
  --nav-padding-top:    0.75rem;
  --nav-padding-bottom: 0.75rem;
  --nav-height:         calc(var(--nav-padding-top) + var(--nav-padding-bottom) + 7rem);
  --top-clearance:      calc(var(--nav-height) + 0.5rem);

  /* 断点触发类（与媒体查询保持一致） */
  /* sm: 640px / md: 768px / lg: 1152px */
}

/* =========================================================================
   第二节：自托管字体 — Alibaba PuHuiTi 3.0
   ========================================================================= */
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-35-Thin/AlibabaPuHuiTi-3-35-Thin.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-35-Thin/AlibabaPuHuiTi-3-35-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-45-Light/AlibabaPuHuiTi-3-45-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-RegularL3/AlibabaPuHuiTi-3-55-RegularL3.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-RegularL3/AlibabaPuHuiTi-3-55-RegularL3.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-95-ExtraBold/AlibabaPuHuiTi-3-95-ExtraBold.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-95-ExtraBold/AlibabaPuHuiTi-3-95-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-105-Heavy/AlibabaPuHuiTi-3-105-Heavy.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-105-Heavy/AlibabaPuHuiTi-3-105-Heavy.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-115-Black/AlibabaPuHuiTi-3-115-Black.woff2') format('woff2'),
       url('../assets/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-115-Black/AlibabaPuHuiTi-3-115-Black.woff') format('woff');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   第三节：CSS Reset + 基础设置
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  /* 隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  /* svh = small viewport height，处理移动端地址栏 */
  min-height: 100svh;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}

p, li, blockquote {
  text-wrap: pretty;
}

/* 选中文字高亮 */
::selection {
  background: rgba(248, 248, 248, 0.15);
  color: var(--color-white);
}

/* =========================================================================
   第四节：栅格系统
   ========================================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}

/* =========================================================================
   第五节：通用工具类
   ========================================================================= */

/* 字体家族 */
.font-serif { font-family: var(--font-serif); }
.font-mono  { font-family: var(--font-mono);  }

/* 占满整行 */
.block { display: block; }

/* 文字阴影 — 在动画背景上提升可读性 */
.drop-shadow-text {
  filter: drop-shadow(0 4px 32px var(--color-black));
}

/* Outline 按钮（多个区块复用） */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
  cursor: pointer;
}

.btn-outline:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-hover);
}

/* =========================================================================
   第六节：加载画面
   ========================================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  pointer-events: none;  /* 加载期间不阻挡交互（百分比显示完即移除） */
  transition: opacity var(--duration-slow) var(--ease-decelerate);
  opacity: 1;
}

.loader.is-done {
  opacity: 0;
}

.loader__counter {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: rgba(248, 248, 248, 0.9);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   第七节：背景层 + 渐变遮罩
   ========================================================================= */

/* Canvas 粒子容器 */
.orb-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* 底部渐变：从黑色渐变到透明（模拟粒子消失在远处） */
.overlay-bottom {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.1) 5%,
    transparent 18%
  );
}

/* 侧角渐变（移动端/平板可见，桌面端隐藏 — 见响应式区块） */
.overlay-corner {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background: linear-gradient(
    225deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.29) 14%,
    rgba(0, 0, 0, 0.20) 29%,
    rgba(0, 0, 0, 0.13) 43%,
    rgba(0, 0, 0, 0.07) 57%,
    rgba(0, 0, 0, 0.03) 71%,
    rgba(0, 0, 0, 0.01) 86%,
    transparent 100%
  );
}

/* =========================================================================
   第八节：导航栏
   ========================================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:
    var(--nav-padding-top)
    var(--nav-padding-inline)
    var(--nav-padding-bottom);
  transition: background-color var(--duration-normal) var(--ease-decelerate);
}

/* 滚动后添加的背景 */
.nav.is-scrolled {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__logo-img {
  height: 7rem;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-size: 1rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.7);
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav__link:hover {
  color: var(--color-white);
}

/* 语言切换按钮 — 与导航链接同风格，带细线边框 */
.nav__lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.7);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.65rem;
  line-height: 1.4;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.nav__lang-toggle:hover {
  color: var(--color-white);
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-hover);
}

/* =========================================================================
   第九节：Hero 标题区
   ========================================================================= */
.hero {
  /* 顶部留出导航空间，Hero + About 共占首屏 */
  padding:
    calc(var(--top-clearance) + 1.5rem)
    var(--nav-padding-inline)
    2.5rem;
  align-content: end;  /* 标题靠 Hero 区底部 */
}

.hero__title {
  grid-column: span 6;
  font-size: clamp(3.2rem, 7.2vw, 5.4rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--color-white);
  filter: drop-shadow(0 4px 32px #000);
}

/* =========================================================================
   第十节：正文 + 按钮
   ========================================================================= */
.content {
  padding: 0 var(--nav-padding-inline) 4rem;
  row-gap: 1.5rem;
  column-gap: 0;
}

.body-copy {
  grid-column: 1 / -1;
  max-width: 32rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-gray);
}

.body-copy p + p {
  margin-top: 1.25rem;
}

.body-copy__cta {
  margin-top: 2rem;
}

/* =========================================================================
   第十一节：团队区
   ========================================================================= */
.team {
  grid-column: 1 / -1;
  justify-self: center;
  display: grid;
  justify-items: center;  /* 团队名单水平居中 */
  padding-top: 2rem;
}

.team__label {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.team__grid {
  display: flex;
  gap: 0 3rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-gray);
}

.team__col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team__name {
  white-space: nowrap;
}

.team__role {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(176, 176, 176, 0.6);
  white-space: nowrap;
}

/* 第三列默认隐藏，桌面端显示 */
.team__col--desktop {
  display: none;
}

/* =========================================================================
   第十二节：招聘职位区
   ========================================================================= */
.jobs {
  padding: 4rem var(--nav-padding-inline);
  min-height: 100svh;
  align-content: center;
}

.jobs__title {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 2rem;
}

.jobs__list {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 36rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.jobs__card {
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.jobs__card:hover {
  border-color: var(--color-border-hover);
}

.jobs__card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.jobs__card-meta {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-gray);
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

.jobs__card-type {
  color: var(--color-white);
}

.jobs__card-desc {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray);
  margin-bottom: 1rem;
}

.jobs__card-requirements {
  padding-top: 0.75rem;
}

.jobs__card-req-title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.jobs__card-req-list {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-gray);
  padding-left: 1.25rem;
  list-style: disc;
}

.jobs__card-req-list li {
  margin-bottom: 0.25rem;
}

/* 岗位要求折叠按钮 */
.jobs__card-req-toggle {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.7);
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color var(--duration-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.jobs__card-req-toggle:hover {
  color: var(--color-white);
}

/* 折叠容器 */
.jobs__card-req-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease-standard);
}

.jobs__card-req-collapse.is-open {
  margin-bottom: 0.5rem;
}

.jobs__card-apply {
  margin-top: 1rem;
}

/* =========================================================================
   第十三节：页脚
   ========================================================================= */
.footer {
  padding-top: 4rem;
  padding-bottom: 2rem;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  text-align: center;
}

/* =========================================================================
   第十四节：Contact 联络信息区
   ========================================================================= */
.contact-info {
  padding: 4rem var(--nav-padding-inline);
  min-height: 100svh;
  align-content: center;
}

.contact-info__title {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.contact-info__content {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray);
}

.contact-info__content p {
  margin-bottom: 0.5rem;
}

.contact-info__content a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(248, 248, 248, 0.3);
  transition: text-decoration-color var(--duration-fast);
}

.contact-info__content a:hover {
  text-decoration-color: var(--color-white);
}

/* =========================================================================
   第十五节：响应式断点
   ========================================================================= */

/* ── sm: ≥ 640px ── */
@media (min-width: 40rem) {
  .hero {
    min-height: 18rem;
  }
}

/* ── md: ≥ 768px ── */
@media (min-width: 48rem) {
  :root {
    --nav-padding-inline: 1.75rem;
    --nav-padding-top:    1rem;
    --nav-padding-bottom: 1rem;
  }

  /* 切换到 12 列栅格 */
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* 调整遮罩渐变 */
  .overlay-bottom {
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.1) 5%,
      transparent 18%
    );
  }

  /* Hero 适配 12 列 */
  .hero__title {
    grid-column: span 12;
    font-size: clamp(3.5rem, 6vw, 4.8rem);
  }

  /* 正文放宽 */
  .body-copy {
    max-width: 36rem;
    font-size: 1.125rem;
  }

  /* 显示第三列 */
  .team__col--desktop {
    display: flex;
  }

  /* 团队字号增大 */
  .team__grid {
    font-size: 1.125rem;
    gap: 0 2rem;
  }

  .team__role {
    font-size: 0.8125rem;
  }

  .footer {
    grid-column: span 12;
  }

  .contact-info__title {
    /* 继承 base 的居中 */
  }

  .contact-info__content {
    /* 继承 base 的居中 */
  }

  /* 招聘板块 */
  .jobs__list {
    max-width: 42rem;
  }

  .jobs__card {
    padding: 2rem;
  }

  .jobs__card-title {
    font-size: 1.375rem;
  }
}

/* ── lg: ≥ 1152px (≈72rem) ── */
@media (min-width: 72rem) {
  :root {
    --nav-padding-inline: 2.5rem;
    --nav-padding-top:    1.25rem;
    --nav-padding-bottom: 1.25rem;
  }

  /* 桌面端隐藏侧角遮罩 */
  .overlay-corner {
    display: none;
  }

  /* Hero 仅占 11 列（留白美学） */
  .hero__title {
    grid-column: span 11;
    font-size: 4.5rem;
  }

  /* 正文居中，保持阅读舒适宽度 */
  .body-copy {
    max-width: 36rem;
  }

}

/* ── xl: ≥ 1280px (≈80rem) ── */
@media (min-width: 80rem) {
  .hero__title {
    font-size: 5rem;
  }
}

/* =========================================================================
   第十六节：无障碍 — 减少动画
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader.is-done {
    transition: none;
  }
}