/* ================================================================
   FOOTER-CTA — 页脚上方的视频广告位
   原 .vision 区改名意图：slogan + 动态视频背景 + 光束扫光。
   class 名仍用 .vision 是为了不破坏 GSAP 选择器和现有 CSS 结构；
   语义上这是"footer-cta"（全站页脚之前共享的 CTA/品牌动效区）。
   ================================================================ */


.vision {
  position: relative; min-height: 65vh; height: 65vh;
  background: #0E2117; overflow: hidden;
  display: flex; align-items: center;
}
/* GREEN V-mask: a single SOLID downward-pointing triangle covering
   the top of the vision section. */
.vision::before {
  content:""; position: absolute; top: -1px; left: 0; right: 0; height: 165px;
  background: #E2EEE6;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 6;
  pointer-events: none;
}
/* DRAWER — wraps the video + cards. Slides DOWN from beneath the V.
   padding-top equals the V mask height so the inner content sits in
   the visible video area below the mask, centered vertically. */
.vision__drawer {
  position: absolute; inset: 0;
  padding-top: 165px;
  display: flex;
  align-items: center;
  /* 入场改为 .vision__line 依次淡入，抽屉不再位移 → 去掉 will-change（少一个常驻合成层） */
}
.vision__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  /* 去掉 scale：放大会让视频发虚，且 scrub 缩放每帧重算合成层 → 滚动掉帧 */
}
.vision__bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vision__beam {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,160,.6), transparent);
  filter: blur(1px);
  pointer-events: none;
  will-change: transform, opacity;
}
.vision__inner {
  position: relative; z-index: 2;
  margin: 0;
  padding-left: clamp(24px, 6vw, 120px);
  padding-right: clamp(24px, 6vw, 120px);             /* 对称留白：对联铺到画面两侧 */
  padding-bottom: 200px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.vision__card {
  color: #fff;
  width: 100%;
  max-width: none;
  /* 去绿底：直接白字压在视频上（移除背景/边框/圆角/内边距）。
     入场改为「.vision__line 两句依次淡入」：卡片本身默认可见、不位移、无 will-change
     （去掉原 translateY/opacity 初始态与常驻合成层）。 */
}
/* 对联两句：一左一右铺到画面两侧（原上下排列 → 左右排列）。 */
.vision__block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(20px, 6vw, 90px);
}
.vision__line {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 50px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .18em;
  line-height: 1.6;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);             /* 无卡片托底 → 阴影加强，保证压在视频上可读 */
  overflow: hidden;
  white-space: nowrap;
}
.vision__line .char {
  display: inline-block;
  /* PERF（D）：去掉 will-change —— slogan 每个字一个 span，常驻 will-change 会为
     每个字符各建一个合成层（十几个层常驻）；揭示是一次性的，GSAP 动画期间自动提升即可。 */
}

@media (max-width: 980px) {
  /* 移动端：V 顶高度改用与首页 hero 同一公式（20.8vw 等比），斜角 ~23° 与首页 hero 一致，
     不再因固定 165px 在窄屏过陡。 */
  .vision::before { height: clamp(56px, 20.8vw, 300px); }
  /* 移动端：slogan 卡片缩小、水平居中、整体下移到下半部 —— 让视频中心（构图主体）不被遮挡 */
  .vision__drawer { align-items: flex-end; padding-bottom: 8%; }
  .vision__inner { justify-content: center; padding-left: 16px; padding-right: 16px; }
  /* 移动端：窄屏放不下「左右各一句」→ 回退为竖排居中，仍是无卡片白字 */
  .vision__card { max-width: none; padding: 0; text-align: center; }
  .vision__block { flex-direction: column; gap: .15em; align-items: center; }
  .vision__line {
    font-size: clamp(15px, 4.6vw, 19px);
    letter-spacing: .1em;
    line-height: 1.5;
  }
}