/* ==========================================================================
   automotive-interactions.css — 汽车零部件行业解决方案页 · 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/automotive-parts.html（仅本页引入，对其它页面零影响）
     · 桌面 Figma 画布 .auto-parts-canvas（≥790px）—— 完整动效
     · 移动端语义化视图（≤789px）        —— 数字滚动 + 轻量入场

   设计红线（沿用首页 home-interactions.css 的约定）：
     1. 静态版式零改动 —— 位置 / 尺寸 / 字体 / 字体层级保持 Figma 原样，
        动效只作用在 translate / scale / opacity / filter / 自定义属性上；
     2. 动画结束态 = 原始状态，滚动到位后画面与首帧渲染完全一致；
     3. 动画全部由 CSS 负责，JS 只负责「进入视口」这一下触发；
     4. 入场动画统一走 translate / scale 独立属性，悬停微交互统一走 transform，
        两者互不覆盖（transform 与 translate 是两个独立属性）；
     5. 尊重 prefers-reduced-motion。
   ========================================================================== */

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

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

.auto-num {
  --n: var(--n-end);
  counter-reset: auto-num var(--n);
}

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

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

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

.auto-num.is-live {
  animation: autoCount var(--auto-dur, 1.7s) var(--auto-ease-count)
    var(--auto-delay, 0s) both;
}

/* 小字号数字（正文中的数值）：更短时长、更轻的模糊 */
.auto-num--sm {
  --auto-dur: 1.2s;
  --auto-blur: 1.6px;
}

@keyframes autoCount {
  0% {
    --n: 0;
    filter: blur(var(--auto-blur, 4px));
  }

  60% {
    filter: blur(calc(var(--auto-blur, 4px) * 0.28));
  }

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

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：up | fade | left | right | zoom | pop | kb
   延迟通过行内 style 的 --d 控制（毫秒或秒均可）。
   只有 js/automotive-interactions.js 正常运行才会加上 html.auto-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.auto-anim [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

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

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

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

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

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

/* kb = Ken Burns，背景大图缓慢推近（与视差共用同一元素，属性互不冲突） */
html.auto-anim [data-anim="kb"] {
  scale: var(--kb-from, 1.07);
}

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

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

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

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

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

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

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

[data-anim="kb"].is-in {
  animation-name: autoKenBurns;
  animation-duration: 3.2s;
  animation-timing-function: var(--auto-ease-count);
}

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

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

@keyframes autoFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes autoLeft {
  from {
    translate: -40px 0;
    opacity: 0;
  }

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

@keyframes autoRight {
  from {
    translate: 40px 0;
    opacity: 0;
  }

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

@keyframes autoZoom {
  from {
    scale: 0.92;
    opacity: 0;
  }

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

@keyframes autoPop {
  from {
    scale: 0.84;
    opacity: 0;
  }

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

@keyframes autoKenBurns {
  from {
    scale: var(--kb-from, 1.07);
  }

  to {
    scale: var(--kb-to, 1);
  }
}

/* --------------------------------------------------------------------------
   3. 滚动视差（data-parallax="强度"，由 JS 写入 --py）
   --------------------------------------------------------------------------
   使用独立的 translate 属性：同一元素上的入场动画（scale）可以与视差叠加，
   二者互不覆盖。
   -------------------------------------------------------------------------- */
.auto-parts-page [data-parallax] {
  translate: 0 calc(var(--py, 0) * 1px);
}

/* --------------------------------------------------------------------------
   4. 桌面画布专属（≥790px）
   -------------------------------------------------------------------------- */
@media (min-width: 790px) {
  /* ---------------------------------------------------- 首屏 */
  /* 背景大图缓慢推近（结束态 scale(1)，与原始画面一致） */
  .auto-parts-canvas .auto-hero-image {
    animation: autoHeroZoom 3.2s var(--auto-ease-count) both;
  }

  @keyframes autoHeroZoom {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  .auto-parts-canvas .auto-hero-shade {
    animation: autoFade 0.9s ease 0.15s both;
  }

  /* 顶部导航自上方轻落 */
  .auto-parts-canvas .auto-header {
    animation: autoHeaderIn 0.9s var(--auto-ease) 0.1s both;
  }

  @keyframes autoHeaderIn {
    from {
      translate: 0 -14px;
      opacity: 0;
    }

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

  /* 标题左侧的金色竖线：自上而下生长 */
  .auto-parts-canvas .auto-hero-title i {
    scale: 1 0;
    transform-origin: top center;
    animation: autoLineGrow 0.9s var(--auto-ease) 0.5s both;
  }

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

    to {
      scale: 1 1;
    }
  }

  /* 主标题：自下而上带模糊揭示 */
  .auto-parts-canvas .auto-hero-title h1 {
    animation: autoHeroTitle 1.15s var(--auto-ease) 0.34s both;
  }

  @keyframes autoHeroTitle {
    from {
      translate: 0 34px;
      opacity: 0;
      filter: blur(10px);
    }

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

  /* ---------------------------------------------------- 版块标题的英文副标题
     英文部分需要独立的位移，改为 inline-block 才能应用 translate。 */
  .auto-parts-canvas .industry-demands > h2 span,
  .auto-parts-canvas .auto-solutions > h2 span,
  .auto-parts-canvas .service-cases > h2 span {
    display: inline-block;
  }

  /* ---------------------------------------------------- 行业需求 / 痛点 */
  /* 卡片左侧的金色竖线随卡片入场生长（覆盖在原 border-left 之上，位置一致） */
  html.auto-anim .demand-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--auto-gold);
    content: "";
    scale: 1 0;
    transform-origin: top center;
  }

  .demand-item.is-in::before {
    animation: autoLineGrow 0.9s var(--auto-ease)
      calc(var(--d, 0s) + 0.12s) both;
  }

  /* 卡片悬停：轻微上浮（走 transform，与入场动画的 translate 互不干扰） */
  .demand-item {
    transition:
      transform 0.45s var(--auto-ease),
      filter 0.45s ease;
  }

  .demand-item:hover {
    transform: translateY(-8px);
  }

  /* 标题下方的金色细线：悬停时自左向右展开 */
  .demand-item h3 {
    position: relative;
    transition: color 0.3s ease;
  }

  .demand-item h3::after {
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--auto-gold);
    content: "";
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.5s var(--auto-ease);
  }

  .demand-item:hover h3::after {
    scale: 1 1;
  }

  /* 编号在悬停时更亮一些 */
  .demand-item strong {
    transition:
      color 0.3s ease,
      text-shadow 0.4s ease;
  }

  .demand-item:hover strong {
    color: #ffc65c;
    text-shadow: 0 6px 18px rgb(244 181 63 / 35%);
  }

  /* ---------------------------------------------------- 解决方案卡片 */
  .solution-card {
    position: relative;
    overflow: hidden;
  }

  /* 悬停时掠过的高光 */
  .solution-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      112deg,
      transparent 32%,
      rgb(255 255 255 / 38%) 48%,
      transparent 64%
    );
    content: "";
    translate: -120% 0;
    pointer-events: none;
    transition: translate 0.85s var(--auto-ease);
  }

  .solution-card:hover::after {
    translate: 120% 0;
  }

  .solution-card:hover {
    transform: translateY(-10px) scale(1.012);
    box-shadow: 0 22px 38px rgb(111 76 0 / 20%);
  }

  /* ---------------------------------------------------- 服务案例 Logo */
  .case-logo img {
    transition:
      transform 0.5s var(--auto-ease),
      filter 0.5s ease;
  }

  .case-logo:hover img {
    transform: scale(1.07);
    filter: drop-shadow(0 10px 18px rgb(244 181 63 / 45%));
  }

  /* Logo 之间的分隔线：随入场自上而下展开 */
  html.auto-anim .case-logo::before {
    scale: 1 0;
    transform-origin: top center;
  }

  .case-logo.is-in::before {
    animation: autoLineGrow 0.8s var(--auto-ease)
      calc(var(--d, 0s) + 0.12s) both;
  }

  /* ---------------------------------------------------- 顶部导航微交互 */
  .auto-header .header-links a {
    transition: color 0.28s ease;
  }

  .auto-header .header-links a:hover {
    color: var(--auto-gold);
  }

  .auto-header .header-actions a,
  .auto-header .header-actions button {
    transition: color 0.28s ease;
  }

  .auto-header .header-actions a:hover,
  .auto-header .header-actions button:hover {
    color: var(--auto-gold);
  }

  .auto-header .search-control {
    transition: transform 0.4s var(--auto-ease);
  }

  .auto-header .search-control:hover {
    transform: rotate(-16deg) scale(1.08);
  }

  /* 三横线 → 箭头 */
  .auto-header .menu-control span {
    transition:
      transform 0.36s var(--auto-ease),
      opacity 0.22s ease;
  }

  .auto-header .menu-control:hover span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .auto-header .menu-control:hover span:nth-child(2) {
    opacity: 0;
  }

  .auto-header .menu-control:hover span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

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

  .auto-footer .footer-links a:hover {
    color: var(--auto-gold);
  }

  .auto-footer .footer-social img {
    transition:
      transform 0.38s var(--auto-ease),
      filter 0.38s ease;
  }

  .auto-footer .footer-social img:hover {
    filter: brightness(1.15);
    transform: translateY(-5px) scale(1.1);
  }
}

/* --------------------------------------------------------------------------
   5. 移动端（≤789px）：数字滚动 + 轻量入场
   -------------------------------------------------------------------------- */
@media (max-width: 789px) {
  .m-auto-demand-number .auto-num {
    font-weight: inherit;
  }

  .m-card:hover .auto-num {
    color: inherit;
  }
}

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

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

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

  .auto-parts-page [data-parallax] {
    translate: none !important;
  }

  .auto-parts-canvas .auto-hero-image,
  .auto-parts-canvas .auto-hero-shade,
  .auto-parts-canvas .auto-header,
  .auto-parts-canvas .auto-hero-title i,
  .auto-parts-canvas .auto-hero-title h1 {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    filter: none !important;
  }

  .demand-item,
  .solution-card,
  .case-logo img,
  .auto-footer .footer-social img {
    transition: none !important;
  }
}