/* ==========================================================================
   home-interactions.css — 首页 index.html · 交互动效（桌面 Figma 画布）
   --------------------------------------------------------------------------
   作用范围：仅 <body class="page-home">，且仅在 index.html 引入。

   设计红线：
   1. 静态版式零改动 —— 元素的位置 / 尺寸 / 字体 / 层级全部保持 Figma 原样，
      动效只作用在 transform / opacity / filter / clip-path / 自定义属性上；
   2. 动画结束态 = 原始状态，滚动到位后画面与首帧渲染完全一致；
   3. 动画全部由 CSS 负责，JS 只负责“进入视口”这一下触发；
   4. 尊重 prefers-reduced-motion。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 缓动变量
   -------------------------------------------------------------------------- */
:root {
  --home-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --home-ease-count: cubic-bezier(0.16, 0.84, 0.24, 1);
}

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

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

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

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

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

@keyframes homeCount {
  0% {
    --n: 0;
    filter: blur(3px);
  }

  55% {
    filter: blur(1px);
  }

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

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

html.home-anim [data-anim="fade"],
html.home-anim [data-anim="left"],
html.home-anim [data-anim="right"],
html.home-anim [data-anim="zoom"],
html.home-anim [data-anim="pop"] {
  opacity: 0;
}

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

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

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

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

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

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

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

@keyframes fxUp {
  from {
    transform: translate3d(0, 26px, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fxFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fxLeft {
  from {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fxRight {
  from {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fxZoom {
  from {
    opacity: 0;
    transform: scale(0.93);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fxPop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

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

/* --------------------------------------------------------------------------
   4. 桌面画布专属
   -------------------------------------------------------------------------- */
@media (min-width: 790px) {
  /* 首页专属的入场曲线：比通用版式更柔和一些 */
  .page-home .scroll-reveal {
    transform: translate3d(0, 34px, 0);
    transition:
      opacity 0.9s var(--home-ease),
      transform 1.1s var(--home-ease);
  }

  .page-home .scroll-reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  /* ---------------------------------------------------- 首屏 Banner 缓推 */
  /* styles.css 用 transform:none !important 固定了 Banner，
     这里改用独立的 scale 属性做入场推近（互不干扰，且结束态为 scale(1)）。 */
  .page-home .hero-frame > [data-node-id="7:1199"] {
    scale: 1;
    animation: homeHeroZoom 2.6s var(--home-ease-count) both;
  }

  @keyframes homeHeroZoom {
    from {
      scale: 1.05;
    }

    to {
      scale: 1;
    }
  }

  /* ---------------------------------------------------- 首屏标题揭示 */
  .page-home [data-node-id="7:1200"] {
    animation: fxFadeDown 0.9s var(--home-ease) 0.1s both;
  }

  @keyframes fxFadeDown {
    from {
      opacity: 0;
      transform: translate3d(0, -14px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .page-home [data-node-id="7:1201"] {
    animation: fxHeroTitle 1.1s var(--home-ease) 0.32s both;
  }

  @keyframes fxHeroTitle {
    from {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
      filter: blur(8px);
    }

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

  /* 标题左侧的黄色竖线：自上而下生长 */
  .page-home [data-node-id="7:1202"] {
    transform-origin: top center;
    animation: fxLineGrow 0.8s var(--home-ease) 0.52s both;
  }

  @keyframes fxLineGrow {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  /* ---------------------------------------------------- 版块标题级联 */
  .page-home .home-title.is-visible [data-fx="en"] {
    animation: fxLeft 0.9s var(--home-ease) 0.08s both;
  }

  .page-home .home-title.is-visible [data-fx="title"] {
    animation: fxUp 1.05s var(--home-ease) 0.18s both;
  }

  .page-home .home-title.is-visible [data-fx="text"] {
    animation: fxFade 1s ease 0.34s both;
  }

  .page-home .home-title.is-visible [data-fx="stats"] {
    animation: fxUp 1s var(--home-ease) 0.42s both;
  }

  /* 运输服务中间的加号：弹跳出现 */
  .page-home [data-node-id="7:1004"].is-visible [data-fx="pop"] {
    animation: fxPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both;
  }

  /* ---------------------------------------------------- 顶部导航微交互 */
  .page-home .header-links a {
    transition:
      color 0.28s ease,
      transform 0.34s var(--home-ease);
  }

  .page-home .header-links a:hover {
    color: #f4b53f;
    transform: translateY(-2px);
  }

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

  .page-home .header-actions a:hover,
  .page-home .header-actions button:hover {
    color: #f4b53f;
  }

  .page-home .brand-emblem {
    transition:
      transform 0.5s var(--home-ease),
      border-color 0.3s ease;
  }

  .page-home .brand-wordmark:hover .brand-emblem {
    border-color: #f4b53f;
    transform: rotate(360deg);
  }

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

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

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

  .page-home .menu-control:hover span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

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

  .page-home .menu-control:hover span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---------------------------------------------------- 业务图标与标签联动 */
  .page-home [data-node-id="7:1178"],
  .page-home [data-node-id="7:1181"],
  .page-home [data-node-id="7:1184"],
  .page-home [data-node-id="7:1158"],
  .page-home [data-node-id="7:1160"],
  .page-home [data-node-id="7:1162"],
  .page-home [data-node-id="7:1164"],
  .page-home [data-node-id="7:1167"],
  .page-home [data-node-id="7:1169"] {
    cursor: pointer;
    transition: transform 0.38s var(--home-ease) !important;
  }

  .page-home [data-node-id="7:1178"]:hover,
  .page-home [data-node-id="7:1181"]:hover,
  .page-home [data-node-id="7:1184"]:hover,
  .page-home [data-node-id="7:1158"]:hover,
  .page-home [data-node-id="7:1160"]:hover,
  .page-home [data-node-id="7:1162"]:hover,
  .page-home [data-node-id="7:1164"]:hover,
  .page-home [data-node-id="7:1167"]:hover,
  .page-home [data-node-id="7:1169"]:hover {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 10px 16px rgb(244 181 63 / 45%));
  }

  /* 标签文字跟随图标高亮 */
  .page-home [data-node-id="7:1157"],
  .page-home [data-node-id="7:1159"],
  .page-home [data-node-id="7:1161"],
  .page-home [data-node-id="7:1163"],
  .page-home [data-node-id="7:1165"],
  .page-home [data-node-id="7:1168"],
  .page-home [data-node-id="7:1177"],
  .page-home [data-node-id="7:1180"],
  .page-home [data-node-id="7:1183"] {
    transition: color 0.3s ease;
  }

  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1158"]:hover) [data-node-id="7:1157"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1160"]:hover) [data-node-id="7:1159"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1162"]:hover) [data-node-id="7:1161"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1164"]:hover) [data-node-id="7:1163"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1167"]:hover) [data-node-id="7:1165"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1169"]:hover) [data-node-id="7:1168"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1178"]:hover) [data-node-id="7:1177"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1181"]:hover) [data-node-id="7:1180"],
  .page-home [data-node-id="7:1149"]:has([data-node-id="7:1184"]:hover) [data-node-id="7:1183"] {
    color: #f4b53f;
  }

  /* 白色圆形徽标：悬停时泛起金色柔光（圆形本身不位移） */
  .page-home [data-node-id="7:1151"]:hover,
  .page-home [data-node-id="7:1152"]:hover,
  .page-home [data-node-id="7:1153"]:hover,
  .page-home [data-node-id="7:1154"]:hover,
  .page-home [data-node-id="7:1155"]:hover,
  .page-home [data-node-id="7:1156"]:hover {
    filter: drop-shadow(0 0 18px rgb(244 181 63 / 55%)) !important;
  }

  /* ---------------------------------------------------- 图片卡片悬停 */
  .page-home .network-photo {
    transition:
      transform 0.45s var(--home-ease),
      box-shadow 0.45s ease;
  }

  .page-home .network-photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgb(0 0 0 / 24%);
  }

  .page-home .storage-photo {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.35s ease,
      box-shadow 0.4s ease;
  }

  .page-home .storage-photo:hover {
    box-shadow: 0 16px 30px rgb(0 0 0 / 16%);
  }

  /* 运力构成图标 */
  .page-home [data-node-id="7:1030"],
  .page-home [data-node-id="7:1031"],
  .page-home [data-node-id="7:1032"],
  .page-home [data-node-id="7:1033"] {
    transition: transform 0.32s var(--home-ease) !important;
  }

  .page-home [data-node-id="7:1030"]:hover,
  .page-home [data-node-id="7:1031"]:hover,
  .page-home [data-node-id="7:1032"]:hover,
  .page-home [data-node-id="7:1033"]:hover {
    transform: scale(1.12) !important;
  }

  /* ---------------------------------------------------- 侧边分类标签 */
  .page-home .vertical-copy {
    transition:
      color 0.3s ease,
      translate 0.36s var(--home-ease);
  }

  /* 用独立的 translate 属性，避免与入场动画的 transform 结束态互相覆盖 */
  .page-home .vertical-copy:hover {
    color: #f4b53f;
    translate: 6px 0;
  }

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

  .page-home .footer-links a:hover {
    color: #f4b53f;
  }

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

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

  .page-home .footer-brand-strip {
    transition: opacity 0.6s ease;
  }
}

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

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

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

  [data-parallax] {
    translate: none !important;
  }

  .page-home .hero-frame > [data-node-id="7:1199"] {
    animation: none !important;
    scale: 1;
  }
}