/* ============================================================
   About KV / Hero（about.html Section 1）
   共享组件：about / products / markets / about-rd / contact（5 页同结构）
   Figma newkv#section-pc（1920×850）/ newkv#section-mobile（375×200）

   结构（PC）：
   section.ab-kv（1920×850，背景照片铺满，右侧 580px 为主体画面）
   └─ .ab-kv__bg           背景照片（z1）
   └─ .ab-kv__content      左侧文字区，width 1340/1920 = 69.79%，高 100%（z2）
      ├─ .ab-kv__deco--pc    SVG 装饰层 content-bg：1320×850 = 区宽 98.51%（1320/1340）
      ├─ .ab-kv__deco--mobile SVG 装饰层 bg-sharpe：285×200（仅 ≤992 显示）
      └─ .ab-kv__copy        文字组 words-group：x 91/1340 = 6.79%，y 257/850 = 30.24%
         ├─ 标题 96px ExtraBold / lh 100 / -0.02em / 白
         └─ 段落 32px Regular / lh 48 / -0.02em / 白，宽 810px

   结构（Mobile ≤992）：
   section.ab-kv（375×200，背景照片铺满，右侧 90/375 = 24% 让位）
   └─ .ab-kv__content      全宽
      ├─ .ab-kv__deco--mobile 285/375 = 76% 宽，高 100%
      └─ .ab-kv__copy        x 16/375 = 4.27%，y 83/200 = 41.5%（垂直居中），标题 24px
   ============================================================ */

.ab-kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 850;
  overflow: hidden;
  background: var(--color-primary-dark);
}

/* 分层 1：背景照片（Figma IMAGE fill，STRETCH 铺满，cover 等比裁切） */
.ab-kv__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ab-kv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kv-fade-in var(--duration-xl) var(--ease-standard) 0.1s forwards;
}

/* 分层 2：左侧文字内容区（Figma content-have-words）
   width = 1340/1920 = 69.79%，右侧剩余 580px 露出照片主体画面 */
.ab-kv__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 69.79%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* SVG 装饰层（Figma content-bg，1320×850 绝对定位在文字区内）
   width = 1320/1340 = 98.51% */
.ab-kv__deco {
  position: absolute;
  left: 0;
  top: 0;
  width: 98.51%;
  height: 100%;
}

.ab-kv__deco img {
  width: 100%;
  height: 100%;
  display: block;
  animation: kv-fade-in var(--duration-xl) var(--ease-standard) 0.2s forwards;
}

.ab-kv__deco--mobile {
  display: none;
}

/* 文字组（Figma words-group）
   left = 91/1340 = 6.79%（不变）；垂直方向基于 KV 高度上下居中 */
.ab-kv__copy {
  position: absolute;
  left: 6.79%;
  top: 50%;
  transform: translateY(-50%);
}

.ab-kv__title {
  font-family: var(--font-primary);
  font-size: min(5vw, 96px);          /* 96/1920 */
  font-weight: 800;
  line-height: min(5.208vw, 100px);   /* 100/1920 */
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  white-space: nowrap;
  animation: kv-slide-up var(--duration-xl) var(--ease-decelerate) 0.4s forwards;
}

/* 段落：y 相对标题 = 30/850 = 3.53%，宽 810/1920 = 42.19% */
.ab-kv__subtitle {
  font-family: var(--font-primary);
  font-size: min(1.667vw, 32px);      /* 32/1920 */
  font-weight: 400;
  line-height: min(2.5vw, 48px);      /* 48/1920 */
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: min(1.5625vw, 30px) 0 0;    /* 30/1920 */
  max-width: min(42.19vw, 810px);
  animation: kv-slide-up var(--duration-xl) var(--ease-decelerate) 0.6s forwards;
}

/* 入场动画 */
@keyframes kv-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes kv-slide-up {
  from {
    opacity: 0;
    transform: translateY(var(--translate-lg));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== 响应式 ==================== */
/* 993px 以上保持 PC 版式，min(vw,px) 公式自动等比缩放 */

/* ≤992：切换到移动端版式（newkv#section-mobile，375×200 基准） */
@media (max-width: 992px) {
  .ab-kv {
    aspect-ratio: 375 / 200;
    /* navbar 移动端 64px（fixed 白色不透明）让位：
       否则盖住 KV 顶部，设计稿 83px 顶部留空会被吃掉大半 */
    margin-top: 64px;
  }

  /* 内容区铺满全宽；右侧 90/375 = 24% 由照片主体自然露出版图 */
  .ab-kv__content {
    width: 100%;
  }

  /* 装饰层换成 mobile 版（285/375 = 76% 宽，铺满 front-content） */
  .ab-kv__deco--pc {
    display: none;
  }

  .ab-kv__deco--mobile {
    display: block;
    width: 76%;
  }

  /* 文字：x 16/375 = 4.27%（不变）；垂直方向基于 KV 高度上下居中 */
  .ab-kv__copy {
    left: 4.27%;
    top: 50%;
    transform: translateY(-50%);
  }

  .ab-kv__title {
    font-size: min(5.067vw, 34px); /* 19/375 等比，平板封顶 34px（contact 两行标题仍微溢出，再降一档） */
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  /* 移动端隐藏副标题（设计稿 mobile 仅标题） */
  .ab-kv__subtitle {
    display: none;
  }
}

/* ==================== 无障碍降级 ==================== */
@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;
  }
}