/* ==========================================================================
   mobile-home.css — 首页 index.html · 移动端动效补充
   --------------------------------------------------------------------------
   只服务于 ≤789px 的 .mobile-view（桌面画布在移动端被隐藏），
   与 css/mobile-template.css 配套使用，叠加在其之后生效。

   主要内容：指标数字的滚动计数，以及少量轻交互。
   ========================================================================== */

/* 数字滚动计数器（与 css/home-interactions.css 共用同一套 @property 声明） */
@property --n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@media (max-width: 789px) {
  /* ---------------------------------------------------------------- 数字滚动 */
  .m-num {
    --n: var(--n-end);
    counter-reset: home-num var(--n);
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

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

  .m-num-raw {
    display: none;
  }

  /* 模板里 .m-stat span 是「说明文字」样式（块级、12px、灰色），
     指标数字也用 span，这里提高优先级把数字还原成行内大号字。 */
  .m-stat .m-num {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
  }

  .m-stat .m-num-raw {
    display: none;
  }

  .m-num.is-live {
    animation: homeCountMobile 1.6s cubic-bezier(0.16, 0.84, 0.24, 1) var(--home-delay, 0s) both;
  }

  @keyframes homeCountMobile {
    0% {
      --n: 0;
      filter: blur(2px);
    }

    60% {
      filter: blur(0.6px);
    }

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

  /* 同一组指标内的错峰：让数字一个接一个滚起来 */
  .m-stats .m-stat:nth-child(1) .m-num {
    --home-delay: 0s;
  }

  .m-stats .m-stat:nth-child(2) .m-num {
    --home-delay: 0.12s;
  }

  .m-stats .m-stat:nth-child(3) .m-num {
    --home-delay: 0.24s;
  }

  .m-stats .m-stat:nth-child(4) .m-num {
    --home-delay: 0.36s;
  }

  .m-capacity__col:nth-child(1) .m-num {
    --home-delay: 0s;
  }

  .m-capacity__col:nth-child(3) .m-num {
    --home-delay: 0.18s;
  }

  /* ------------------------------------------------------------ 轻交互 */
  .m-hero__inner {
    animation: mHeroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }

  @keyframes mHeroIn {
    from {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
    }

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

  .m-stat strong {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-stat:active strong {
    transform: scale(1.06);
  }

  .m-card__icon {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-card:active .m-card__icon {
    transform: scale(1.12);
  }

  .m-capacity__col b {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-capacity__col:active b {
    transform: scale(1.06);
  }
}