/* ==========================================================================
   heavy-interactions.css — 大件运输页 · CSS3 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/heavy-logistics.html（仅本页引入，其它页面零影响）
     · 桌面画布（≥790px）—— 入场 / 数字滚动 / 滚动视差 / 滚动推近 / 指针聚光 / 悬停微交互
     · 移动端视图（≤789px）—— 数字滚动 + 轻量微交互

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

/* --------------------------------------------------------------------------
   0. 缓动与配色变量
   -------------------------------------------------------------------------- */
:root {
  --hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hl-ease-count: cubic-bezier(0.16, 0.84, 0.24, 1);
  --hl-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hl-gold: #f4b53f;
  --hl-gold-deep: #d9902a;
  --hl-orange: #ffbc20;
  --hl-rust: #581b0a;
}

/* --------------------------------------------------------------------------
   1. 数字滚动 —— 逐位数字（@property + counter()）
   --------------------------------------------------------------------------
   页面上的数字（客服热线、传真、邮编、门牌号、版权年份、备案号、装备轴线数）
   被逐位拆成 .hl-digit，每一位独立滚到目标值，像老式号码盘的锁止过程：
     · --hl-d-end  目标数字（写在行内 style 上，由 js/heavy-interactions.js 写入）
     · --hl-d-from 起始数字（9 = 号码盘下落到目标位；0 = 从零往上累加）
     · --hl-delay  该位的启动延迟（逐位错峰，形成级联）
     · --hl-d      当前数值，由关键帧从起始值过渡到 --hl-d-end
     · ::after     用 counter() 把数值渲染出来
   未触发时 --hl-d 直接等于 --hl-d-end，因此没有 JS 时数字依然正确显示。

   原始文本以 .hl-num-seq__raw 保留在无障碍树中（视觉隐藏），
   屏幕阅读器读到的仍是完整的「4008-556688」而不是逐位计数器生成的内容。
   -------------------------------------------------------------------------- */
@property --hl-d {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.hl-num-seq {
  position: relative;
  white-space: nowrap;
}

/* 数字包裹层必须完整继承所在位置的字体与间距。
   页面里存在形如 `.equipment-value span { margin-left: 3px; font-size: 30px }`
   这类「后代 span 选择器」，若不显式复位，数字会掉进那条规则里 ——
   字号、字重、左边距全变，装备数值会被挤宽 6~7px，版式随之走样。 */
.heavy-page .hl-num-seq,
.heavy-page .hl-digit {
  margin: 0;
  font: inherit;
}

/* 原始文本：视觉上隐藏，但保留给屏幕阅读器与复制 */
.hl-num-seq__raw {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hl-digit {
  --hl-d: var(--hl-d-end, 0);
  /* 刻意用 inline 而不是 inline-block：
     逐位拆成 inline-block 会改变行盒高度，装备数值里的「轴线」会跟着上下错位；
     保持 inline 时整段数字与原始文本走完全相同的排版，宽度也逐像素一致。
     同样刻意不启用 tabular-nums：等宽数字比原始比例数字宽，
     会让「120 轴线」这类数值整体偏移，与设计稿对不上。 */
  counter-reset: hl-d var(--hl-d);
}

.hl-digit::after {
  content: counter(hl-d);
}

.hl-digit.is-live {
  animation: hlDigitRoll var(--hl-digit-dur, 0.85s) var(--hl-ease-count) var(--hl-delay, 0s) both;
}

@keyframes hlDigitRoll {
  from {
    --hl-d: var(--hl-d-from, 9);
  }

  to {
    --hl-d: var(--hl-d-end, 0);
  }
}

/* 整组数字滚动时的金色柔光（结束后回到继承色） */
.hl-num-seq.is-live {
  animation: hlSeqGlow var(--hl-dur, 1.2s) var(--hl-ease-count) var(--hl-seq-delay, 0s) both;
}

@keyframes hlSeqGlow {
  0% {
    color: var(--hl-gold);
    text-shadow: 0 0 16px rgb(244 181 63 / 60%);
  }

  70% {
    color: var(--hl-gold);
    text-shadow: 0 0 11px rgb(244 181 63 / 30%);
  }

  100% {
    color: inherit;
    text-shadow: inherit;
  }
}

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：
     up       自下而上浮入        rise    轻微上浮（位移更小）
     fade     淡入                 left    自左侧滑入
     right    自右侧滑入           drop    自上方落下
     zoom     轻微放大             pop     弹入
     blur     带模糊浮入           kb      Ken Burns 缓推（背景大图）
     line     竖条自上而下生长     wipe    自上而下揭示
     wipeup   自下而上揭示         wiperight 自左向右揭示
     draw     细线自上而下画出     shutter 自上而下拉开（配图）
     settle   数值落位回弹（装备数值）

   延迟通过行内 style 的 --d 控制（秒），时长通过 --dur 控制（秒）。
   只有 js/heavy-interactions.js 正常运行才会加上 html.hl-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.hl-anim .heavy-page [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

html.hl-anim .heavy-page [data-anim="rise"] {
  translate: 0 14px;
  opacity: 0;
}

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

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

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

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

html.hl-anim .heavy-page [data-anim="zoom"] {
  scale: 0.9;
  opacity: 0;
}

html.hl-anim .heavy-page [data-anim="pop"] {
  scale: 0.82;
  opacity: 0;
}

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

html.hl-anim .heavy-page [data-anim="kb"] {
  scale: var(--kb-from, 1.06);
}

/* clip-path 只在动画关键帧里出现。
   初始态如果就带 clip-path，被裁空的元素在 IntersectionObserver 里
   相交面积恒为 0，可能等不到触发，因此这里只留 opacity。 */
html.hl-anim .heavy-page [data-anim="line"] {
  opacity: 0;
}

html.hl-anim .heavy-page [data-anim="wipe"] {
  opacity: 0;
}

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

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

html.hl-anim .heavy-page [data-anim="draw"] {
  opacity: 0;
  scale: 1 0;
  transform-origin: top center;
}

html.hl-anim .heavy-page [data-anim="settle"] {
  opacity: 0;
}

html.hl-anim .heavy-page [data-anim="shutter"] {
  opacity: 0;
}

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

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

.heavy-page [data-anim="rise"].is-in {
  animation-name: hlRise;
}

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

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

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

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

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

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

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

.heavy-page [data-anim="kb"].is-in {
  animation-name: hlKB;
  animation-duration: var(--kb-dur, 18s);
  animation-timing-function: var(--hl-ease-count);
}

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

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

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

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

.heavy-page [data-anim="draw"].is-in {
  animation-name: hlDraw;
}

.heavy-page [data-anim="settle"].is-in {
  animation-name: hlSettle;
  animation-timing-function: var(--hl-ease-back);
}

.heavy-page [data-anim="shutter"].is-in {
  animation-name: hlShutter;
}

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

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

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

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

@keyframes hlFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

@keyframes hlZoom {
  from {
    scale: 0.9;
    opacity: 0;
  }

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

@keyframes hlPop {
  from {
    scale: 0.82;
    opacity: 0;
  }

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

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

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

@keyframes hlKB {
  from {
    scale: var(--kb-from, 1.06);
  }

  to {
    scale: 1;
  }
}

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

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

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

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

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

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

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

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

/* 细线自上而下画出（装备板的分隔竖线） */
@keyframes hlDraw {
  from {
    scale: 1 0;
    opacity: 0;
  }

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

/* 配图自上而下拉开 */
@keyframes hlShutter {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

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

/* --------------------------------------------------------------------------
   3. 页面专属动效
   -------------------------------------------------------------------------- */

/* 3.1 大标题流光 —— 「大件运输」上掠过一道暖色高光
   ::after 静止时完全透明且停在元素左侧之外，不改变原始画面；
   .design-canvas 自身 overflow:hidden，溢出的高光不会撑出横向滚动条。 */
.heavy-page .heavy-title h2 {
  position: relative;
}

.heavy-page .heavy-title h2::after {
  position: absolute;
  inset: -14% -8%;
  background: linear-gradient(
    102deg,
    transparent 36%,
    rgb(255 188 32 / 34%) 50%,
    transparent 64%
  );
  content: "";
  opacity: 0;
  translate: -130% 0;
  pointer-events: none;
}

.heavy-page .heavy-title h2.is-in::after {
  animation: hlShine 1.35s var(--hl-ease) 0.3s both;
}

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

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

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

/* 3.2 装备数值 —— 落位时轻微回弹，像仪表盘归位 */
@keyframes hlSettle {
  from {
    scale: 0.86;
    opacity: 0;
  }

  70% {
    scale: 1.035;
    opacity: 1;
  }

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

/* 3.3 轮播标题切换 —— 翻页时标题跟着方向滑入 */
.heavy-page #heavy-slide-title.is-swap-next {
  animation: hlSwapNext 0.55s var(--hl-ease) both;
}

.heavy-page #heavy-slide-title.is-swap-prev {
  animation: hlSwapPrev 0.55s var(--hl-ease) both;
}

@keyframes hlSwapNext {
  from {
    translate: 0 24px;
    opacity: 0;
    filter: blur(6px);
  }

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

@keyframes hlSwapPrev {
  from {
    translate: 0 -24px;
    opacity: 0;
    filter: blur(6px);
  }

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

/* --------------------------------------------------------------------------
   4. 滚动视差（data-parallax）与滚动推近（data-zoom）
   --------------------------------------------------------------------------
   data-parallax  纵向强度（像素），JS 写入 --py / --px
   data-zoom      推近强度（百分比），JS 写入 --hz
   位移 / 缩放都走独立属性（translate / scale），
   与既有 transform（图片 hover 缩放）互不覆盖。
   -------------------------------------------------------------------------- */
.heavy-page [data-parallax],
.heavy-page [data-parallax-x] {
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
}

.heavy-page [data-zoom] {
  scale: calc(1 + var(--hz, 0) * var(--zoom-strength, 0.04));
}

/* --------------------------------------------------------------------------
   5. 指针聚光（data-spotlight，由 JS 写入 --cx / --cy）
   --------------------------------------------------------------------------
   静止时用 visibility:hidden 让这一层完全不参与绘制。
   若只用 opacity:0，浏览器仍会为它保留一块渲染面，
   容器内文字的抗锯齿方式会随之改变（与静态基线出现逐像素差异）。
   注意：宿主元素（.heavy-content）本身就是 position:absolute，
   这里不要再改它的 position，否则会破坏画布内的定位。
   -------------------------------------------------------------------------- */
.heavy-page [data-spotlight]::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    380px circle at var(--cx, 50%) var(--cy, 50%),
    rgb(255 188 32 / 13%),
    transparent 70%
  );
  content: "";
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.heavy-page [data-spotlight]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   6. 桌面画布专属（≥790px）
   -------------------------------------------------------------------------- */
@media (min-width: 790px) {
  /* ---------------------------------------------------- 首屏导航微交互 */
  .heavy-page .heavy-header .header-links a,
  .heavy-page .heavy-header .header-actions a {
    transition: color 0.28s ease;
  }

  .heavy-page .heavy-header .header-links a:hover,
  .heavy-page .heavy-header .header-actions a:hover {
    color: var(--hl-gold);
  }

  .heavy-page .heavy-header .search-control {
    transition:
      scale 0.4s var(--hl-ease),
      color 0.28s ease;
  }

  .heavy-page .heavy-header .search-control:hover {
    color: var(--hl-gold);
    scale: 1.16;
  }

  .heavy-page .heavy-header .menu-control {
    transition: scale 0.4s var(--hl-ease);
  }

  .heavy-page .heavy-header .menu-control:hover {
    scale: 1.1;
  }

  .heavy-page .brand-wordmark {
    transition: translate 0.45s var(--hl-ease);
  }

  .heavy-page .brand-wordmark:hover {
    translate: 4px 0;
  }

  .heavy-page .brand-emblem {
    transition:
      scale 0.45s var(--hl-ease),
      box-shadow 0.45s ease;
  }

  .heavy-page .brand-emblem:hover {
    scale: 1.08;
    box-shadow: 0 0 0 4px rgb(255 188 32 / 18%);
  }

  /* ---------------------------------------------------- 能力标签 */
  .heavy-page .heavy-capabilities span {
    transition:
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.25s var(--hl-ease),
      box-shadow 0.25s ease;
  }

  .heavy-page .heavy-capabilities span:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 26px rgb(255 188 32 / 32%);
  }

  /* ---------------------------------------------------- 轮播箭头 */
  .heavy-page .showcase-arrows button img {
    transition: translate 0.35s var(--hl-ease);
  }

  .heavy-page .heavy-slide-prev:hover img {
    translate: -7px 0;
  }

  .heavy-page .heavy-slide-next:hover img {
    translate: 7px 0;
  }

  /* ---------------------------------------------------- 配图 */
  .heavy-page .blade-photo img {
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.45s ease;
  }

  .heavy-page .blade-photo:hover img {
    filter: brightness(1.05) saturate(1.05);
  }

  /* ---------------------------------------------------- 装备板 */
  .heavy-page .equipment-label {
    transition: color 0.3s ease;
  }

  .heavy-page .equipment-label:hover {
    color: var(--hl-rust);
  }

  .heavy-page .equipment-value {
    transition: color 0.3s ease;
  }

  .heavy-page .equipment-value:hover {
    color: var(--hl-gold-deep);
  }

  .heavy-page .equipment-ports {
    transition:
      color 0.3s ease,
      letter-spacing 0.4s var(--hl-ease);
  }

  .heavy-page .equipment-ports:hover {
    color: var(--hl-gold-deep);
    letter-spacing: 2px;
  }

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

  .heavy-page .footer-links a:hover {
    color: var(--hl-gold);
  }

  .heavy-page .footer-contact p {
    transition:
      color 0.3s ease,
      translate 0.4s var(--hl-ease);
  }

  .heavy-page .footer-contact p:hover {
    color: var(--hl-gold);
    translate: 6px 0;
  }

  .heavy-page .footer-brand-strip {
    transition: filter 0.5s ease;
  }

  .heavy-page .footer-brand-strip:hover {
    filter: brightness(1.1);
  }

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

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

/* --------------------------------------------------------------------------
   7. 移动端（≤789px）：数字滚动 + 轻量微交互
   -------------------------------------------------------------------------- */
@media (max-width: 789px) {
  /* 首屏大图缓慢推近 */
  .heavy-page .m-hero__bg {
    animation: hlMobileHero 18s var(--hl-ease-count) both;
  }

  @keyframes hlMobileHero {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  /* ---------------------------------------------------- 错峰入场
     列表 / 标签 / 装备行的逐项延迟统一在 CSS 里给出，
     HTML 只需要写 data-anim，不必逐个写 --d。 */
  .heavy-page .m-tag:nth-child(1) {
    --d: 0.04s;
  }

  .heavy-page .m-tag:nth-child(2) {
    --d: 0.11s;
  }

  .heavy-page .m-tag:nth-child(3) {
    --d: 0.18s;
  }

  .heavy-page .m-tag:nth-child(4) {
    --d: 0.25s;
  }

  .heavy-page .m-tag:nth-child(5) {
    --d: 0.32s;
  }

  .heavy-page .m-tag:nth-child(6) {
    --d: 0.39s;
  }

  .heavy-page .m-list__item:nth-child(1) {
    --d: 0.04s;
  }

  .heavy-page .m-list__item:nth-child(2) {
    --d: 0.1s;
  }

  .heavy-page .m-list__item:nth-child(3) {
    --d: 0.16s;
  }

  .heavy-page .m-list__item:nth-child(4) {
    --d: 0.22s;
  }

  .heavy-page .m-list__item:nth-child(5) {
    --d: 0.28s;
  }

  .heavy-page .m-list__item:nth-child(6) {
    --d: 0.34s;
  }

  .heavy-page .m-support__list li:nth-child(1) {
    --d: 0.04s;
  }

  .heavy-page .m-support__list li:nth-child(2) {
    --d: 0.1s;
  }

  .heavy-page .m-support__list li:nth-child(3) {
    --d: 0.16s;
  }

  .heavy-page .m-support__list li:nth-child(4) {
    --d: 0.22s;
  }

  .heavy-page .m-support__list li:nth-child(5) {
    --d: 0.28s;
  }

  .heavy-page .m-support__list li:nth-child(6) {
    --d: 0.34s;
  }

  .heavy-page .m-footer__contact li:nth-child(1) {
    --d: 0.1s;
  }

  .heavy-page .m-footer__contact li:nth-child(2) {
    --d: 0.16s;
  }

  .heavy-page .m-footer__contact li:nth-child(3) {
    --d: 0.22s;
  }

  .heavy-page .m-footer__contact li:nth-child(4) {
    --d: 0.28s;
  }

  .heavy-page .m-footer__contact li:nth-child(5) {
    --d: 0.34s;
  }

  /* ---------------------------------------------------- 点按反馈 */
  .heavy-page .m-tag {
    transition:
      background 0.3s ease,
      transform 0.3s var(--hl-ease);
  }

  .heavy-page .m-tag:active {
    transform: scale(0.95);
  }

  .heavy-page .m-list__item {
    transition:
      background 0.3s ease,
      transform 0.3s var(--hl-ease);
  }

  .heavy-page .m-list__item:active {
    transform: scale(0.99);
  }

  .heavy-page .m-scroll__item {
    transition: transform 0.32s var(--hl-ease);
  }

  .heavy-page .m-scroll__item:active {
    transform: scale(0.985);
  }

  .heavy-page .m-footer__social img {
    transition: transform 0.35s var(--hl-ease);
  }

  .heavy-page .m-footer__social img:active {
    transform: translateY(-4px) scale(1.08);
  }

  /* 返回顶部按钮轻微呼吸，提示可点 */
  .heavy-page .m-backtop {
    animation: hlBackTop 2.6s ease-in-out infinite;
  }

  @keyframes hlBackTop {
    0%,
    100% {
      translate: 0 0;
    }

    50% {
      translate: 0 -4px;
    }
  }
}

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

  .hl-digit {
    --hl-d: var(--hl-d-end, 0);
  }

  .heavy-page [data-anim],
  .heavy-page [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;
  }

  .heavy-page [data-parallax],
  .heavy-page [data-parallax-x] {
    translate: none !important;
  }

  .heavy-page [data-zoom] {
    scale: none !important;
  }

  .heavy-page .heavy-title h2::after {
    display: none;
  }

  .heavy-page .m-hero__bg {
    animation: none !important;
  }

  .heavy-page .m-backtop {
    animation: none !important;
  }

  .heavy-page #heavy-slide-title.is-swap-next,
  .heavy-page #heavy-slide-title.is-swap-prev {
    animation: none !important;
  }
}