/* ================================================================
   HERO-VIDEO — 首页全屏视频背景 hero
   包含 KV 视频、白色 V 形 mask、slogan、CTA、scroll indicator。
   仅首页 index.html 使用；其他页面使用 hero-image.css。
   ================================================================ */
.hero {
  position: relative; height: 100vh; min-height: 640px;
  overflow: hidden; background: #000;
}
/* Top shade between nav and KV — 60% black at top → 0% at bottom */
.hero__shade {
  position: absolute; left: 0; right: 0; top: 0;
  height: 33.33%;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 3;
}
.hero__media {
  position: absolute; inset: 0;
  transform: scale(1.18); /* start zoomed in, will pull to 1.0 */
  will-change: transform;
}
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,20,30,0) 40%, rgba(0,12,20,.55) 100%),
    linear-gradient(180deg, rgba(0,15,25,.4) 0%, rgba(0,15,25,0) 30%, rgba(0,15,25,.55) 100%);
}
/* V 形遮罩：高度随视口宽度等比缩放，保持斜角 ~23° 不变（PC 1440≈300px）。
   固定 300px 时窄屏(375)斜角会陡到 ~58°；用 20.8vw(=300/1440) 让移动端保持 PC 的缓 V 形状，上限 300px 不改 PC。 */
.hero__mask {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(56px, 20.8vw, 300px);
  display: flex; pointer-events: none;
  will-change: transform;
}
.hero__mask span {
  flex: 1; position: relative; height: 100%;
  will-change: transform;
}
.hero__mask span::before {
  content:""; position: absolute; inset: -1px;
  background: #fff;
}
.hero__mask .left::before  { clip-path: polygon(0 0,   100% 100%, 0 100%); }
.hero__mask .right::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-align: center;
  padding: 0 24px;
  /* 固定 73px（=1680×911 时的 8vh）而非 8vh：视频里的 logo 恒在视口垂直中心（object-fit:cover 居中裁切），
     原 8vh 会随视口变高而增大→ slogan 相对上移贴近 logo（高分屏/全屏时遮挡）。改固定值后 slogan 与 logo
     间距恒定，全屏各分辨率下 slogan 位置都与 1680×911 一致。 */
  padding-bottom: 73px;
}
/* 屏宽 > 1920px（全屏 / 高分屏）：视频 object-fit:cover 按宽度放大 → logo 变大、向下延伸更多，
   slogan 仍会贴到 logo。此时整块 slogan 再下移 100px 避开。≤1920px 保持原位不变。
   用 transform 平移（不改变居中/布局、不影响 .hero__title span 的逐字升起动画）。 */
@media (min-width: 1921px) {
  .hero__content { transform: translateY(100px); }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.1vw, 50px);
  font-weight: 900; letter-spacing: .15em;
  overflow: hidden; padding: .12em 0;
  padding-top: 400px;
}
.hero__title span {
  display: inline-block;
  will-change: transform;
}
/* 英文 KV 标题（WPML /en）：拉丁字体 + 允许换行 + 收紧字距（中文展示字体不适合长英文短语） */
.hero__title--en {
  font-family: var(--font-en);
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.1;
  white-space: normal;
}
.hero__sub {
  margin-top: 0px;
  font-family: var(--font-en);
  font-size: clamp(10px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: 0; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
/* legacy class kept for compatibility — wrapper around .cta-pill */
.hero__cta {
  font-family: var(--font-cn);
  margin-top: 28px; border: 0; background: transparent; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero__cta:hover { background: transparent; }
/* 圆点指示暂时隐藏：目前 hero 无多页滚动。多页滚动 JS 仍保留，
   将来启用多页时把 display 改回 flex 即可恢复。 */
.hero__dots {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  display: none;            /* 多页滚动启用时改回 flex */
  gap: 8px; z-index: 3;
}
.hero__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4); display: block;
}
.hero__dots i.is-active { background: #fff; width: 22px; border-radius: 4px; }
.hero__scroll {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--green-deep); font-size: 11px; letter-spacing: .3em;
  z-index: 4;
}
.hero__scroll::after {
  content:""; width: 1px; height: 40px;
  background: linear-gradient(var(--green-deep), transparent);
  animation: scrollPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.1%{ transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}