/* ============================================================
   文字动效层 motion.css
   - 标题：逐字从遮罩内升起
   - 正文：模糊聚焦 + 上浮
   - 细节：英文小标字距收拢、标题下细线流光、卡片 hover 字波
   ============================================================ */

/* ---------- 1. 逐字升起 ---------- */
.tm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .1em .03em .18em;
  margin: -.1em -.03em -.18em;
}
.tm-c {
  display: inline-block;
  transform: translate3d(0, 130%, 0) rotate(2deg);
  opacity: 0;
  transition:
    transform 1.15s cubic-bezier(.19, 1, .22, 1),
    opacity .5s ease;
  will-change: transform, opacity;
}
.tm-in .tm-c {
  transform: none;
  opacity: 1;
}

/* 英文字母 / 数字：稍微再飘一点 */
.tm-c--en { transform: translate3d(0, 120%, 0); }

/* ---------- 2. 正文段落：聚焦 ---------- */
.tm-p {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(7px);
  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(.19, 1, .22, 1),
    filter 1s ease;
  will-change: transform, opacity, filter;
}
.tm-p.tm-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- 3. 英文小标：字距从散到拢 ---------- */
.tm-track {
  letter-spacing: .46em;
  opacity: 0;
  transition: letter-spacing 1.4s cubic-bezier(.19, 1, .22, 1), opacity .9s ease;
}
.tm-track.tm-in {
  letter-spacing: .2em;
  opacity: 1;
}

/* ---------- 4. 标题下细线：有光在跑 ---------- */
@keyframes tmRun {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
.page-hero h1::after,
.hero-copy h1::after {
  background: linear-gradient(90deg,
      var(--gold) 0%,
      var(--gold) 34%,
      #ffffff 48%,
      var(--gold) 62%,
      var(--gold) 100%);
  background-size: 220% 100%;
  animation: tmRun 3.8s linear infinite;
}

/* 区块标题短横线也跑光 */
.block-title::after {
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--blue) 40%, #9fb0ff 50%, var(--blue) 60%, var(--blue) 100%);
  background-size: 240% 100%;
  animation: tmRun 4.6s linear infinite;
}

/* ---------- 5. 卡片 / 条目：hover 时字往上跳一下 ---------- */
.tm-wave .tm-c {
  transition:
    transform 1.15s cubic-bezier(.19, 1, .22, 1),
    opacity .5s ease,
    color .4s ease;
}
.cul-card:hover h3 .tm-c,
.cul-people-item:hover strong .tm-c,
.use-card:hover h3 .tm-c,
.news-card:hover h3 .tm-c,
.product-card:hover h3 .tm-c,
.job-item:hover h3 .tm-c,
.equip-item:hover h3 .tm-c {
  transform: translateY(-4px);
  transition-delay: calc(var(--i) * 22ms);
}

/* ---------- 6. 图片进场更有质感（覆盖旧 reveal） ---------- */
.cul-split-media.reveal img,
.cul-people-media.reveal img {
  transform: scale(1.1);
  transition: transform 1.6s cubic-bezier(.19, 1, .22, 1);
}
.cul-split-media.reveal.is-in img,
.cul-people-media.reveal.is-in img {
  transform: scale(1);
}

/* ---------- 7. 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm-c,
  .tm-p,
  .tm-track {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    letter-spacing: inherit;
    transition: none !important;
  }
  .page-hero h1::after,
  .hero-copy h1::after,
  .block-title::after {
    animation: none !important;
  }
}

/* ---------- 8. 企业文化「我们的主张」：字在呼吸，细线在流 ---------- */
@keyframes culBreath {
  0%, 100% { opacity: 1;    transform: translateY(0); }
  50%      { opacity: .78;  transform: translateY(-3px); }
}

/* 这块不等进场动画（首屏下方布局稳定得晚），直接给常态 + 呼吸 */
.page-culture .cul-slogan .tm-c {
  opacity: 1;
  transform: none;
  animation: culBreath 5.5s ease-in-out infinite;
  animation-delay: calc(.9s + var(--i) * .18s);
  transition: none;
}

.page-culture .cul-eyebrow {
  position: relative;
  display: inline-block;
  padding-right: 62px;
}
.page-culture .cul-eyebrow::after {
  content: "";
  position: absolute;
  left: calc(100% - 46px);
  top: 50%;
  width: 46px;
  height: 1px;
  margin-top: -.5px;
  background: linear-gradient(90deg, rgba(154, 123, 63, .15) 0%, #c9a86a 42%, #efe0bd 52%, rgba(154, 123, 63, .15) 100%);
  background-size: 240% 100%;
  animation: tmRun 3.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-culture .cul-slogan .tm-c { animation: none !important; opacity: 1 !important; transform: none !important; }
  .page-culture .cul-eyebrow::after { animation: none !important; }
}

/* 右侧配图：极缓慢地推近，一直在动 */
@keyframes culKen {
  from { transform: scale(1); }
  to   { transform: scale(1.055) translateX(-1.5%); }
}
.page-culture .cul-split-media.is-in img {
  animation: culKen 26s ease-in-out infinite alternate;
  animation-delay: 1.9s;
}

@media (prefers-reduced-motion: reduce) {
  .page-culture .cul-split-media.is-in img { animation: none !important; }
}

/* ---------- 9. 应用案例 / 首页 zigzag：图片入场 ---------- */
.zz-img {
  position: relative;
  overflow: hidden;
}
/* 白色遮罩：进入视口后从下往上掀开，露出图片 */
.zz-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
  pointer-events: none;
}
.zz-img.zz-in::after {
  transform: scaleY(0);
}

/* 图片本身：从放大 + 模糊 + 压暗，收回到正常 */
.zz-img img {
  transform: scale(1.38);
  opacity: 0;
  filter: blur(16px) saturate(.6);
  transition:
    transform 1.7s cubic-bezier(.16, 1, .3, 1),
    opacity 1.1s ease,
    filter 1.3s ease;
}
.zz-img.zz-in img {
  transform: scale(1);
  opacity: 1;
  filter: none;
}

/* 第二、四张从反方向收，避免两块同时同向动 */
.zigzag .zz-card:nth-child(2n) .zz-img img {
  transform: scale(1.38) translateX(3%);
}
.zigzag .zz-card:nth-child(2n) .zz-img.zz-in img {
  transform: scale(1) translateX(0);
}

@media (hover: hover) and (pointer: fine) {
  .zz-card:hover .zz-img img {
    transform: scale(1.05);
    transition-duration: .8s, .3s, .3s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zz-img::after { display: none; }
  .zz-img img { transform: none !important; opacity: 1 !important; filter: none !important; }
}

/* ---------- 10. 首页新闻卡：常驻缓慢推近（不做入场，卡片始终可见） ---------- */
@keyframes vfKen {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}

.vf-img img {
  animation: vfKen 18s ease-in-out infinite alternate;
  will-change: transform;
}
.vf-grid .vf-card:nth-child(2) .vf-img img {
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}
.vf-grid .vf-card:nth-child(3) .vf-img img {
  animation-duration: 26s;
  animation-delay: -9s;
}

@media (prefers-reduced-motion: reduce) {
  .vf-img img { animation: none !important; }
}

/* ---------- 11. 首页人才招聘块：常驻动效（不做入场） ---------- */

/* 标题下划线：一道亮光来回走 */
.vf-title i {
  background: linear-gradient(90deg,
      var(--blue) 0%,
      var(--blue) 38%,
      #a9b8ff 50%,
      var(--blue) 62%,
      var(--blue) 100%);
  background-size: 240% 100%;
  animation: tmRun 4.2s linear infinite;
}

/* 右侧建筑图：极缓推近 */
@keyframes vgKen {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}
.vg-media img {
  animation: vgKen 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* 图上斜光扫过 */
@keyframes vgSweep {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  8%   { opacity: 1; }
  55%  { opacity: 1; }
  70%  { transform: translateX(330%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(330%) skewX(-12deg); opacity: 0; }
}
.vg-media::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 0;
  z-index: 2;
  width: 26%;
  height: 120%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .18) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: vgSweep 8.5s cubic-bezier(.45, 0, .25, 1) infinite;
  pointer-events: none;
}

/* 岗位列表：一道浅光自上而下依次扫过每一行 */
body.page-home .home-block.v-g .vg-row {
  position: relative;
  overflow: hidden;
}
@keyframes vgScan {
  0%   { transform: translateX(-110%); opacity: 0; }
  6%   { opacity: 1; }
  34%  { opacity: 1; }
  46%  { transform: translateX(115%); opacity: 0; }
  100% { transform: translateX(115%); opacity: 0; }
}
body.page-home .home-block.v-g .vg-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 62%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(74, 92, 245, 0) 0%,
      rgba(74, 92, 245, .085) 55%,
      rgba(74, 92, 245, 0) 100%);
  transform: translateX(-110%);
  animation: vgScan 11s cubic-bezier(.4, 0, .3, 1) infinite;
  pointer-events: none;
}
body.page-home .home-block.v-g .vg-row:nth-child(1)::before { animation-delay: 0s; }
body.page-home .home-block.v-g .vg-row:nth-child(2)::before { animation-delay: 1.1s; }
body.page-home .home-block.v-g .vg-row:nth-child(3)::before { animation-delay: 2.2s; }
body.page-home .home-block.v-g .vg-row:nth-child(4)::before { animation-delay: 3.3s; }

body.page-home .home-block.v-g .vg-row > * { position: relative; z-index: 1; }

/* 右侧「全职」标签：淡淡地呼吸 */
@keyframes vgTag {
  0%, 100% { border-color: rgba(74, 92, 245, .32); color: var(--blue); }
  50%      { border-color: rgba(74, 92, 245, .78); color: #2f43d8; }
}
body.page-home .home-block.v-g .vg-row em {
  animation: vgTag 3.6s ease-in-out infinite;
}

/* 悬停时暂停扫光，交给原来的 hover 效果 */
@media (hover: hover) and (pointer: fine) {
  body.page-home .home-block.v-g .vg-row:hover::before { animation-play-state: paused; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vf-title i,
  .vg-media img,
  .vg-media::before,
  body.page-home .home-block.v-g .vg-row::before,
  body.page-home .home-block.v-g .vg-row em { animation: none !important; }
}

/* ---------- 12. 英文底纹大字（APPLICATIONS / NEWS / CAREERS）入场 ---------- */
.vf-watermark {
  transition: letter-spacing 1.5s cubic-bezier(.16, 1, .3, 1),
              opacity .9s ease;
  letter-spacing: 12px;
}
.vf-watermark .wfc {
  display: inline-block;
  opacity: 0;
  transform: translateY(46%) skewY(2.5deg);
  transition:
    opacity .9s ease,
    transform 1.25s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--wfi, 0) * 62ms);
}
.vf-watermark.wf-in {
  letter-spacing: 4px;
}
.vf-watermark.wf-in .wfc {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vf-watermark,
  .vf-watermark .wfc {
    transition: none !important;
    letter-spacing: 4px !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 13. 招聘块右侧图片：入场（自右向左刷开 + 图从远处推进来） ---------- */
.vg-media {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.15s cubic-bezier(.76, 0, .24, 1);
}
.vg-media.vg-in {
  clip-path: inset(0 0 0 0);
}
/* 用 scale 而不是 transform，避免和 vgKen 的 transform 动画打架 */
.vg-media img {
  scale: 1.26;
  transition: scale 1.8s cubic-bezier(.16, 1, .3, 1) .05s;
}
.vg-media.vg-in img {
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vg-media { clip-path: none !important; }
  .vg-media img { scale: 1 !important; }
}