/* ==========================================================================
   corporate-interactions.css — 企业文化页 · CSS3 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/corporate-culture.html（仅本页引入，对其它页面零影响）
     · 桌面画布（≥790px）—— 完整动效（入场 / 数字滚动 / 视差 / 悬停微交互）
     · 移动端视图（≤789px）—— 数字滚动 + 轻量微交互

   设计红线（沿用首页 home-interactions.css / 汽车零部件页的约定）：
     1. 静态版式零改动 —— 位置 / 尺寸 / 字体 / 字体层级保持 Figma 原样，
        动效只作用在 translate / scale / opacity / filter / clip-path 上；
     2. 动画结束态 = 原始状态，滚动到位后画面与首帧渲染完全一致；
     3. 动画全部由 CSS 负责，JS 只负责「进入视口」触发与指针位置写入；
     4. 入场动画走 translate / scale 等独立属性，与既有 transform
        （标题的 scaleX(1.22)、荣誉卡的 scale(1.12) 等）互不覆盖；
     5. 没有 JS 时 html.corp-anim 不会出现，内容直接可见；
     6. 尊重 prefers-reduced-motion。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 缓动变量
   -------------------------------------------------------------------------- */
:root {
  --corp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --corp-ease-count: cubic-bezier(0.16, 0.84, 0.24, 1);
  --corp-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --corp-gold: #f6b51d;
  --corp-gold-deep: #f0a900;
}

/* --------------------------------------------------------------------------
   1. 数字滚动 —— 纯 CSS 计数器（@property + counter()）
   --------------------------------------------------------------------------
   .cc-num 自身就是计数器载体：
     · --cc-n-end  目标数值（写在行内 style 上）
     · --cc-n      当前数值，由关键帧从 0 过渡到 --cc-n-end
     · ::after     用 counter() 把数值渲染出来
   未触发时 --cc-n 直接等于 --cc-n-end，因此没有 JS 时数字依然正确显示。
   小数（1.89）拆成「整数 + 两位小数」两个计数器组合渲染。
   -------------------------------------------------------------------------- */
@property --cc-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.cc-num {
  --cc-n: var(--cc-n-end);
  display: inline-block;
  vertical-align: baseline;
  counter-reset: cc-num var(--cc-n);
  font-variant-numeric: tabular-nums;
}

.cc-num::after {
  content: counter(cc-num);
}

/* 两位小数补零（89 / 08 …），浏览器不支持时自动回退为普通十进制 */
@supports (content: counter(cc-test, decimal-leading-zero)) {
  .cc-num--frac::after {
    content: counter(cc-num, decimal-leading-zero);
  }
}

/* 原始文本仅作为无障碍回退，视觉上由计数器接管 */
.corporate-culture-page .cc-num__raw {
  display: none;
}

.cc-num.is-live {
  animation: ccCount var(--cc-dur, 1.9s) var(--corp-ease-count)
    var(--cc-delay, 0s) both;
}

@keyframes ccCount {
  0% {
    --cc-n: 0;
    filter: blur(var(--cc-blur, 3px));
  }

  58% {
    filter: blur(0.8px);
  }

  100% {
    --cc-n: var(--cc-n-end);
    filter: none;
  }
}

/* 数字本体保持原有字号与字距（.stat-item strong span 的 0.62em 规则不作用于它） */
.corporate-culture-page .stat-item strong .cc-num,
.corporate-culture-page .m-stat strong .cc-num {
  margin-top: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：
     up     自下而上浮入      fade    淡入
     left   自左侧滑入        right   自右侧滑入
     drop   自上方落下        zoom    轻微放大
     pop    弹入              blur    带模糊浮入
     kb     Ken Burns 缓推（背景大图）
     line   竖线自上而下生长  wipe    自上而下揭示
     wipeup 自下而上揭示      wiperight 自左向右揭示
     flip   翻牌
   延迟通过行内 style 的 --d 控制（秒）。
   只有 js/corporate-interactions.js 正常运行才会加上 html.corp-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.corp-anim [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

html.corp-anim [data-anim="fade"] {
  opacity: 0;
}

html.corp-anim [data-anim="left"] {
  translate: -42px 0;
  opacity: 0;
}

html.corp-anim [data-anim="right"] {
  translate: 42px 0;
  opacity: 0;
}

html.corp-anim [data-anim="drop"] {
  translate: 0 -20px;
  opacity: 0;
}

html.corp-anim [data-anim="zoom"] {
  scale: 0.93;
  opacity: 0;
}

html.corp-anim [data-anim="pop"] {
  scale: 0.86;
  opacity: 0;
}

html.corp-anim [data-anim="blur"] {
  translate: 0 26px;
  opacity: 0;
  filter: blur(12px);
}

html.corp-anim [data-anim="kb"] {
  scale: var(--kb-from, 1.05);
}

html.corp-anim [data-anim="line"] {
  scale: 1 0;
  transform-origin: top center;
}

/* clip-path 只在动画关键帧里出现。
   初始态如果就带 clip-path，被裁空的元素在 IntersectionObserver 里
   相交面积恒为 0，会永远等不到触发。 */
html.corp-anim [data-anim="wipe"] {
  opacity: 0;
}

html.corp-anim [data-anim="wipeup"] {
  opacity: 0;
}

html.corp-anim [data-anim="wiperight"] {
  opacity: 0;
}

html.corp-anim [data-anim="flip"] {
  opacity: 0;
  transform: perspective(700px) rotateX(-86deg);
  transform-origin: 50% 100%;
}

[data-anim].is-in {
  animation-duration: var(--dur, 0.95s);
  animation-timing-function: var(--corp-ease);
  animation-fill-mode: both;
  animation-delay: var(--d, 0s);
}

[data-anim="up"].is-in {
  animation-name: corpUp;
}

[data-anim="fade"].is-in {
  animation-name: corpFade;
}

[data-anim="left"].is-in {
  animation-name: corpLeft;
}

[data-anim="right"].is-in {
  animation-name: corpRight;
}

[data-anim="drop"].is-in {
  animation-name: corpDrop;
}

[data-anim="zoom"].is-in {
  animation-name: corpZoom;
}

[data-anim="pop"].is-in {
  animation-name: corpPop;
}

[data-anim="blur"].is-in {
  animation-name: corpBlur;
}

[data-anim="line"].is-in {
  animation-name: corpLine;
}

[data-anim="wipe"].is-in {
  animation-name: corpWipe;
}

[data-anim="wipeup"].is-in {
  animation-name: corpWipeUp;
}

[data-anim="wiperight"].is-in {
  animation-name: corpWipeRight;
}

[data-anim="flip"].is-in {
  animation-name: corpFlip;
}

/* 背景大图的缓推时间更长，营造景深感 */
[data-anim="kb"].is-in {
  animation-name: corpKB;
  animation-duration: var(--kb-dur, 9s);
  animation-timing-function: var(--corp-ease-count);
}

@keyframes corpUp {
  from {
    translate: 0 30px;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes corpFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes corpLeft {
  from {
    translate: -42px 0;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes corpRight {
  from {
    translate: 42px 0;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes corpDrop {
  from {
    translate: 0 -20px;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes corpZoom {
  from {
    scale: 0.93;
    opacity: 0;
  }

  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes corpPop {
  from {
    scale: 0.86;
    opacity: 0;
  }

  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes corpBlur {
  from {
    translate: 0 26px;
    opacity: 0;
    filter: blur(12px);
  }

  to {
    translate: 0 0;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes corpKB {
  from {
    scale: var(--kb-from, 1.05);
  }

  to {
    scale: 1;
  }
}

@keyframes corpLine {
  from {
    scale: 1 0;
  }

  to {
    scale: 1 1;
  }
}

@keyframes corpWipe {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes corpWipeUp {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes corpWipeRight {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes corpFlip {
  from {
    opacity: 0;
    transform: perspective(700px) rotateX(-86deg);
  }

  to {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg);
  }
}

/* --------------------------------------------------------------------------
   3. 滚动视差（data-parallax="强度"，由 JS 写入 --py）
   --------------------------------------------------------------------------
   使用独立的 translate 属性；只有不参与 translate 入场的图层才能叠加视差。
   -------------------------------------------------------------------------- */
.corporate-culture-page [data-parallax] {
  translate: 0 calc(var(--py, 0) * 1px);
}

/* --------------------------------------------------------------------------
   4. 标题流光 —— 中文主标题上掠过一道金色高光
   --------------------------------------------------------------------------
   ::after 静止时完全透明且停在元素右侧之外，不改变原始画面。
   -------------------------------------------------------------------------- */
.corporate-culture-page .section-title-cn::after {
  position: absolute;
  inset: -12% -6%;
  background: linear-gradient(
    102deg,
    transparent 36%,
    rgb(246 181 29 / 30%) 50%,
    transparent 64%
  );
  content: "";
  opacity: 0;
  translate: -130% 0;
  pointer-events: none;
}

.corporate-culture-page .section-title-cn.is-in::after {
  animation: corpShine 1.25s var(--corp-ease) 0.34s both;
}

@keyframes corpShine {
  0% {
    opacity: 0;
    translate: -130% 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 130% 0;
  }
}

/* --------------------------------------------------------------------------
   5. 桌面画布专属（≥790px）
   -------------------------------------------------------------------------- */
@media (min-width: 790px) {
  /* ---------------------------------------------------- 英文副标题的渲染宽度
     原页面的滚动入场系统用 transform 覆盖了标题的 scaleX(1.22)，
     所以线上实际呈现的是自然宽度。这里显式还原该结果，
     保证「界面 UI 视图不变」，入场动画改走 translate，不受影响。 */
  .corporate-culture-page .section-title-en {
    transform: none;
  }

  /* ---------------------------------------------------- 首屏导航微交互 */
  .corporate-culture-page .honours-header .header-links a,
  .corporate-culture-page .honours-header .header-actions a,
  .corporate-culture-page .honours-header .header-actions button {
    transition:
      color 0.28s ease,
      opacity 0.28s ease;
  }

  .corporate-culture-page .honours-header .header-links a:hover,
  .corporate-culture-page .honours-header .header-actions a:hover,
  .corporate-culture-page .honours-header .header-actions button:hover {
    color: var(--corp-gold);
  }

  .corporate-culture-page .honours-header .search-control {
    transition:
      transform 0.4s var(--corp-ease),
      color 0.28s ease;
  }

  .corporate-culture-page .honours-header .search-control:hover {
    color: var(--corp-gold);
    transform: scale(1.12);
  }

  /* 关于盛丰竖排菜单：悬停时高亮并右移 */
  .corporate-culture-page .about-dropdown a {
    transition:
      background 0.3s ease,
      color 0.3s ease,
      translate 0.38s var(--corp-ease);
  }

  .corporate-culture-page .about-dropdown a:hover {
    background: rgb(244 181 63 / 92%);
    color: #fff;
    translate: 6px 0;
  }

  /* ---------------------------------------------------- 集团简介 */
  /* 大厦图：指针视差更平滑一点（位移由 corporate-culture.js 写入） */
  .corporate-culture-page .profile-building {
    transition:
      transform 0.65s var(--corp-ease),
      filter 0.5s ease,
      translate 0.5s var(--corp-ease);
  }

  /* 数据卡：悬停时数字更亮 */
  .corporate-culture-page .stat-item strong {
    transition:
      color 0.3s ease,
      text-shadow 0.45s ease;
  }

  .corporate-culture-page .stat-item:hover strong {
    color: #ffc851;
    text-shadow: 0 8px 20px rgb(246 181 29 / 32%);
  }

  /* ---------------------------------------------------- 企业文化卡片 */
  .corporate-culture-page .culture-card {
    transition:
      transform 0.5s var(--corp-ease),
      box-shadow 0.5s ease;
  }

  .corporate-culture-page .culture-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 44px rgb(28 20 0 / 22%);
  }

  /* 掠过的高光（位于图片之上、文字之下） */
  .corporate-culture-page .culture-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      112deg,
      transparent 32%,
      rgb(255 255 255 / 42%) 48%,
      transparent 64%
    );
    content: "";
    translate: -130% 0;
    pointer-events: none;
    transition: translate 0.9s var(--corp-ease);
  }

  .corporate-culture-page .culture-card:hover::before {
    translate: 130% 0;
  }

  /* 鼠标跟随的金色聚光 */
  .corporate-culture-page .culture-grid::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(
      300px circle at var(--cx, 50%) var(--cy, 50%),
      rgb(246 181 29 / 16%),
      transparent 70%
    );
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .corporate-culture-page .culture-grid:hover::after {
    opacity: 1;
  }

  /* ---------------------------------------------------- 发展历程 */
  .corporate-culture-page .timeline-founded,
  .corporate-culture-page .timeline-detail {
    transition:
      transform 0.45s var(--corp-ease),
      box-shadow 0.45s ease;
  }

  .corporate-culture-page .timeline-founded:hover,
  .corporate-culture-page .timeline-detail:hover {
    transform: translateX(8px);
    box-shadow: 0 16px 32px rgb(120 80 0 / 16%);
  }

  /* 卡片上掠过的一道柔光 */
  .corporate-culture-page .timeline-founded::after,
  .corporate-culture-page .timeline-detail::after {
    position: absolute;
    inset: 0 0 0 4px;
    background: linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 55%),
      transparent
    );
    content: "";
    translate: -100% 0;
    pointer-events: none;
    transition: translate 0.85s var(--corp-ease);
  }

  .corporate-culture-page .timeline-founded:hover::after,
  .corporate-culture-page .timeline-detail:hover::after {
    translate: 100% 0;
  }

  .corporate-culture-page .timeline-step h3 {
    transition: color 0.3s ease;
  }

  .corporate-culture-page .timeline-step:hover h3 {
    color: var(--corp-gold-deep);
  }

  .corporate-culture-page .timeline-step .year-strip {
    transition: filter 0.35s ease;
  }

  .corporate-culture-page .timeline-step:hover .year-strip {
    filter: saturate(1.35) brightness(1.05);
  }

  /* ---------------------------------------------------- 荣誉资质 */
  .corporate-culture-page .honor-card {
    transition:
      transform 0.55s var(--corp-ease),
      background 0.35s ease,
      box-shadow 0.35s ease;
  }

  .corporate-culture-page .honor-card-rule {
    transition:
      scale 0.5s var(--corp-ease),
      opacity 0.3s ease;
  }

  .corporate-culture-page .honor-card:hover .honor-card-rule {
    scale: 1 1.6;
  }

  /* ---------------------------------------------------- 集团新闻 */
  .corporate-culture-page .news-category-tabs button,
  .corporate-culture-page .news-year-tabs button,
  .corporate-culture-page .honor-tabs button {
    position: relative;
  }

  .corporate-culture-page .news-category-tabs button::after,
  .corporate-culture-page .news-year-tabs button::after,
  .corporate-culture-page .honor-tabs button::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--corp-gold);
    content: "";
    scale: 0 1;
    transform-origin: center;
    transition: scale 0.38s var(--corp-ease);
  }

  .corporate-culture-page .news-category-tabs button:hover::after,
  .corporate-culture-page .news-year-tabs button:hover::after,
  .corporate-culture-page .honor-tabs button:hover::after {
    scale: 1 1;
  }

  .corporate-culture-page .news-card-copy h3 {
    transition: color 0.3s ease;
  }

  .corporate-culture-page .news-expand {
    transition:
      transform 0.25s ease,
      color 0.25s ease;
  }

  /* ---------------------------------------------------- 页脚 */
  .corporate-culture-page .footer-links a {
    transition: color 0.28s ease;
  }

  .corporate-culture-page .footer-links a:hover {
    color: var(--corp-gold);
  }

  .corporate-culture-page .footer-social img {
    transition:
      transform 0.4s var(--corp-ease),
      filter 0.4s ease;
  }

  .corporate-culture-page .footer-social img:hover {
    filter: brightness(1.14);
    transform: translateY(-5px) scale(1.1);
  }
}

/* --------------------------------------------------------------------------
   6. 移动端（≤789px）：数字滚动 + 轻量微交互
   -------------------------------------------------------------------------- */
@media (max-width: 789px) {
  .corporate-culture-page .m-stat strong .cc-num {
    display: inline-block;
  }

  .corporate-culture-page .m-card {
    transition: transform 0.35s var(--corp-ease);
  }

  .corporate-culture-page .m-card:active {
    transform: scale(0.985);
  }
}

/* --------------------------------------------------------------------------
   7. 无障碍：系统关闭动效时，全部动效收敛为直接呈现
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cc-num,
  .cc-num.is-live {
    animation: none;
    filter: none;
  }

  .cc-num {
    --cc-n: var(--cc-n-end);
  }

  [data-anim],
  [data-anim].is-in {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  .corporate-culture-page [data-parallax] {
    translate: none !important;
  }

  .corporate-culture-page .section-title-cn::after {
    display: none;
  }
}