/* ================================================================
   HISTORY — 发展历程页专属样式（Nexans .cp-impact 风格时间轴）
     · 左侧：sticky 固定舞台（标题 + 配图交叉淡入）——100vh 全屏感
     · 右侧：年份（大字）+ 文案，随页面自然滚动
     · 2020：3 张图的 slideshow（active 时自动轮播）
     · 1997 / 2026：无照片里程碑，显示品牌空状态
   交互：纯 CSS sticky 负责"左固定/右滚动"；GSAP 仅驱动配图交叉淡入（见 js）
   依赖：tokens.css、base.css、hero-image.css、footer-cta.css
   ================================================================ */

.history {
  position: relative;
  z-index: 11;                 /* 不透明白底盖住下方 vision 抽屉（§7D） */
  background: #fff;
}

/* 2 列：左 sticky 舞台 + 右滚动轨道 */
.history__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: start;          /* 让 sticky 生效（不拉伸左列） */
  column-gap: clamp(30px, 4vw, 70px);
}

/* ── 左侧 sticky 舞台 ─────────────────────────────────────────── */
.history__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(92px, 12vh, 130px) 0 clamp(36px, 6vh, 70px);
}

/* 章节标题（发展历程 / DEVELOPMENT HISTORY） */
.history__head { flex-shrink: 0; margin-bottom: clamp(20px, 3vh, 40px);padding-left: 40px; }
.history__head .triangle {
  display: block;
  width: 44px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 16px;
  margin-left: -40px;
}
.history__head .cn {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 38px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}
.history__head .en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .25em;
  color: var(--green);
  font-weight: 600;
}

/* 配图舞台：媒体区在剩余空间内垂直居中放一个"原生比例画框"。
   所有配图均为 764×536（同比例），故画框 aspect-ratio 即原生比例，
   shot 填满画框 + object-fit:cover 等于无裁切显示。
   开头(1997)/结尾(2026)无配图 → 无 shot 命中 → 画框透明留空（无占位图）。 */
.history__media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;         /* 画框在舞台内垂直居中 */
  justify-content: flex-end;   /* 配图靠 stage 右侧对齐 */
}
.history__frame {
  position: relative;
  width: 100%;
  max-width: 420px;            /* 限制配图最大宽度 */
  aspect-ratio: 764 / 536;     /* 配图原生比例 */
  max-height: 100%;
}
.history__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease-out), visibility .7s;
  will-change: opacity;
}
.history__shot.is-active {
  opacity: 1;
  visibility: visible;
}
/* 画框=原生比例 → cover 等比铺满不裁切；圆角，无投影 */
.history__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* 2020 slideshow：3 张图填满画框叠放交叉淡入 + 圆点（贴在图片底部） */
.history__shot--slider .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}
.history__shot--slider .slide.is-on { opacity: 1; }
.history__shot--slider .slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 6px;
}
.history__dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  display: flex; justify-content: center; gap: 9px;
  z-index: 3;
}

/* slideshow 左右绿色箭头（仅 2020 slider 内，故只在该图出现） */
.history__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.history__nav svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--green); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.history__nav--prev { left: 14px; }
.history__nav--next { right: 14px; }
.history__nav:hover { background: var(--green); transform: translateY(-50%) scale(1.06); }
.history__nav:hover svg { stroke: #fff; }
.history__nav:active { transform: translateY(-50%) scale(0.96); }
.history__dots i {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: background .3s, width .3s;
}
.history__dots i.is-on { background: #fff; width: 22px; }

/* ── 右侧滚动轨道 ─────────────────────────────────────────────── */
.history__track {
  padding-top: clamp(92px, 12vh, 130px);   /* 与左侧标题大致对齐 */
}
.history__year {
  position: relative;
  min-height: 33.33vh;         /* 一屏 ≈ 3 组年份信息 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(14px, 4vh, 35px) 30px;
  border-top: 1px solid rgba(47, 131, 78, 0.22);   /* 年份分隔线 */
}
.history__year:first-child { border-top: 0; }

/* 移动端内联配图（桌面隐藏）—— 同样使用配图原生比例 764×536 */
.history__year-img {
  display: none;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  aspect-ratio: 764 / 536;
}
.history__year-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 原生 Bricks 改造：image 元素把 class 直接渲染在 <img> 上（无 figure 包裹）→ 让 .history__year-img
   本身就是 <img> 时也能正确铺满裁切。舞台 shot 由 history.js 克隆成 figure>img，命中上面的现有规则。 */
img.history__year-img { width: 100%; object-fit: cover; }

/* 大年份数字 —— 苹方（PingFang）字体；默认绿，滚动到（激活）变红，离开渐变回绿 */
.history__year .num {
  font-family: "PingFang SC", "PingFang TC", var(--font-cn);
  font-size: clamp(44px, 5vw, 86px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--green);
  display: flex;
  align-items: baseline;
  gap: .35em;
  transition: color .55s var(--ease-out);   /* 红 ⇄ 绿 渐变 */
}
.history__year .num .tag {
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: .1em;
}
/* 当前滚动到页面中间的年份 → 红色 */
.history__year.is-active .num { color: var(--red); }

.history__year p {
  margin-top: clamp(12px, 1.6vh, 22px);
  max-width: 600px;
  font-family: var(--font-cn);
  color: #A5A5A5;                          /* 年份描述文字统一灰色 */
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.8;
  letter-spacing: .01em;
  text-align: justify;
}

/* 结尾"精彩继续…" —— 放大 + 动画（整体呼吸 + 省略号点依次跳动） */
.history__year--future p {
  display: inline-flex;
  align-items: flex-end;
  gap: .12em;
  max-width: none;
  color: #A5A5A5;
  font-size: clamp(24px, 2.8vw, 46px);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.1;
  text-align: left;
  animation: futureBreathe 3s var(--ease-in-out) infinite;
}
@keyframes futureBreathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.history__year--future .dots { display: inline-flex; gap: .16em; padding-bottom: .2em; }
.history__year--future .dots i {
  width: .16em; height: .16em; border-radius: 50%;
  background: currentColor; display: inline-block;
  animation: futureDot 1.4s ease-in-out infinite;
}
.history__year--future .dots i:nth-child(2) { animation-delay: .18s; }
.history__year--future .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes futureDot {
  0%, 75%, 100% { transform: translateY(0); opacity: .3; }
  38%           { transform: translateY(-7px); opacity: 1; }
}

/* ── 页脚视频广告位 V mask：白色衔接（上方时间轴是 #fff） ──────── */
section.vision::before {
  background: #fff;
}

/* ================================================================
   响应式：<980 改为堆叠（每年：内联配图 + 年份 + 文案）
   sticky 舞台在窄屏体验差，直接隐藏，回到方案的纵向叠放。
   ================================================================ */
@media (max-width: 980px) {
  .history__inner { grid-template-columns: 1fr; }
  .history__stage { display: none; }            /* 隐藏桌面 sticky 舞台 */
  .history__track { padding-top: clamp(40px, 8vw, 64px); }
  .history__year {
    min-height: 0;                               /* 移动端按内容高度堆叠 */
    padding: clamp(32px, 7vw, 56px) 0;
  }
  .history__year-img { display: block; }         /* 显示内联配图 */
  .history__year .num { font-size: clamp(48px, 14vw, 84px); }
}