/* pages/home_kv.css — 首页 KV：基础高度 / 轮播（slides、bg、kv-zoom-in 缓放、info）/ 轮播指示器
   拆自 pages/home.css（2026-10-12 拆分，纯搬移）；页面源 bundle 2:53「终稿-首页-初稿 5.0」（1920×6660），
   断点：base 移动端流式；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3）。
   首页其余区块：home_about / home_products / home_solution / home_news / home_clients */

/* ---------- KV（1920×1080，设计稿图片饱和度 -1 → 黑白） ---------- */
.kv {
  height: 44rem;
}

/* ---------- KV 轮播（2 屏叠放 + 交叉淡入；2026-09-27 由静态单屏改造） ---------- */
/* 2 屏同处 1/1 格 → 容器高 = 最高一屏（切屏不跳高）。列宽用 minmax(0,1fr) 而非 auto：
   auto 列会按 max-content 撑宽，内容一长就横向溢出。
   height:100% 是必须的：.kv 是固定高度，而单屏内容远矮于此（桌面 ≥1280 内容约 700、
   .kv 为 1080）—— 不撑满则各屏的 .kv__bg（inset:0）只盖住内容高度，KV 底部露白。 */
.kv__slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

.kv__slide {
  grid-area: 1 / 1;
  position: relative; /* 各屏的 .kv__bg 是 inset:0 的绝对定位层 → 包含块必须是本屏。
                         ⚠ 不能省：.kv 本身是 .section（position:relative），若本屏是 static，
                         背景层会锚到 .kv 上（CLAUDE.md 坑 5）。 */
  min-width: 0;
  opacity: 0;
  visibility: hidden; /* 同时移出 tab 顺序与无障碍树，未激活屏的链接不可聚焦 */
  /* ⚠ visibility 是离散属性：写 `visibility .5s` 会在时长中点才翻转，淡入会被推迟。
     用 `0s linear .5s` → 淡出时延迟隐藏（等淡完），淡入时立即可见。 */
  transition: opacity .5s ease-out, visibility 0s linear .5s;
}

.kv__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .kv__slide,
  .kv__slide.is-active {
    transition: none;
  }
}

/* 各屏背景层（原 .kv::before 平移至此）：蒙版与去饱和原样保留。
   url 统一写 asset_base 根绝对前缀（css/pages/ → https://cdn-s3.t24.thinkart.net/xitec/public/images/）。
   图片源由数据经 .kv__bg 的行内 --kv-bg 传入（不再按 :nth-child 序号取图）。
   ⚠ 兜底值 url(...) 绝对不能省：var() 解析失败会让整条 background 声明在计算值阶段失效，
     背景整个消失（不是只丢图片）。 */
.kv__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    var(--kv-bg, url(https://cdn-s3.t24.thinkart.net/xitec/public/images/kv-slide-1.svg)) center / cover no-repeat;
  filter: grayscale(1);
}

/* ── KV 背景缓放：屏激活时背景图从 1.08 倍缓缓回到 1，持续 3.5s ──
   只作用在 .kv__bg（背景图层），文字与 logo 不受影响。
   用 transform: scale 而非 scale 属性 —— 该层没有需要保护的定位 transform。
   will-change 提示浏览器开层，避免大图缩放掉帧。
   ⚠ 动画必须挂在 .kv__slide.is-active 作用域下：is-active 一换，animation-name 从 none
     重新匹配 → 动画从头播，每次切屏都重放「图片缩放一下」（2026-10-12 按测试反馈恢复，
     替代旧的「两层载入时同播一次」方案 —— 那样切到第 2 屏时缓放早已结束，切屏无动效）。
     代价：失活屏的动画被摘掉，背景从当前刻度回弹到 1 —— 缓放是 easeOut 系曲线，
     0.7 个周期后刻度已 ≈1.00，且失活屏同时在 .5s 淡出，回弹不可感知。
   reduced-motion 下 base.css 已全局禁用 animation，自然降级为静态。 */
@media (min-width: 1280px) {
  .kv__slide.is-active .kv__bg {
    transform: scale(1.08);
    animation: kv-zoom-in 3.5s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1)) forwards;
    will-change: transform;
  }

  @keyframes kv-zoom-in {
    to { transform: scale(1); }
  }
}

.kv__info {
  position: relative;
  z-index: 1;
  padding: 10rem 1.5rem 0;
}

.kv__title {
  font-size: clamp(2.125rem, 1rem + 3.6vw, var(--font-size-hero));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: #fff;
}

.kv__sub {
  margin-top: var(--space-5);
  font-size: var(--font-size-h3);
  line-height: 1.8;
  color: #fff;
}

.kv__info .btn-more {
  margin-top: var(--space-8);
}

/* ---------- KV 轮播指示器 ----------
   视觉照抄 news.css 的 .pn-feat__marks button（22×22 圆点、未激活 opacity .3、
   激活全不透明、焦点环描边）；圆点填充消费 --color-gold 令牌，无硬编码颜色。
   圆点本体用 button 的 ::before 画 —— HTML 的 button 是空的（无 news 那种 <i> 子元素）。
   与 news 一致：base 隐藏、仅桌面档显示。容器定位属**新增桌面几何** → 写进 ≥1280 段。
   ⚠ base 的 display:none 不能省（照抄 news 的 .pn-feat__marks）：.kv__slides 是 height:100%
     （占满 .kv 的固定高度），若指示器在 base 是普通块级元素，它会落到 .kv 底缘之外，
     被 .kv 的 overflow:hidden 裁掉 —— 视觉上看不见，但那两颗 button 仍在 tab 顺序里，
     键盘会聚焦到一个不可见的控件上。 */
.kv__marks {
  display: none;
}

.kv__marks button {
  display: block;
  width: 1.375rem; /* 22 */
  height: 1.375rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kv__marks button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: .3; /* 未激活（与 news 一致） */
  transition: opacity .3s ease-out;
}

.kv__marks button.is-active::before {
  opacity: 1; /* 激活 = 全不透明 */
}

/* 焦点环放在 button 上而非圆点本体：button 是 22×22 的命中盒，环贴着圆点外侧更规整。
   ⚠ 这里**不能**照抄 news 的 `var(--color-text-1)`（#000）：news 的圆点坐在白底面板上，
     而 KV 的圆点压在被去饱和 + .3 黑蒙版压暗的背景上（实测亮度 18.5/255 与 60.1/255）
     → 黑环与背景无法分辨，等于键盘用户在 KV 上看不到焦点。改白环，与同样「压在 KV 上」的
     .kv__title / .kv__sub（都直接写 #fff）保持一致；tokens.css 没有「白」令牌，故写字面量。
     这两颗钮可被 Tab 到，且 focusin/focusout 会暂停轮播，环必须看得见。 */
.kv__marks button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (min-width: 1280px) {
  .kv {
    height: 67.5rem;
  }

  .kv__info {
    padding: 22.25rem 0 0 10.3125rem; /* info y=290，标题块 x=165 */
  }

  .kv__sub {
    margin-top: 1.25rem;
  }

  .kv__info .btn-more {
    margin-top: 3.9375rem;
  }

  /* 指示器容器：贴 .kv 底缘水平居中（.kv 是 .section → position:relative，即包含块） */
  .kv__marks {
    position: absolute;
    left: 50%;
    bottom: var(--space-12);
    transform: translateX(-50%);
    display: flex;
    gap: .9375rem; /* 与 news 的 .pn-feat__marks 同值 */
  }
}