/* ==========================================================================
   multimodal-interactions.css — 多式联运页 · CSS3 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/multimodal-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.mm-anim 不会出现，内容直接可见；
     6. 尊重 prefers-reduced-motion。
   ========================================================================== */

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

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

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

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

/* 数字包裹层必须完整继承所在位置的字体与间距。
   页面里存在形如 `.footer-contact p { white-space: nowrap }`
   `.header-actions { letter-spacing: 1px }` 这类规则，
   若不显式复位，数字会掉进继承链里 —— 字号、字重、字距全变，
   数字组会被挤宽，版式随之走样。 */
.multimodal-page .mm-num-seq,
.multimodal-page .mm-digit {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

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

.mm-digit {
  --mm-d: var(--mm-d-end, 0);
  display: inline-block;
  /* 逐位拆成 inline-block 时必须显式接管行高与基线：
     否则行盒高度会变化，同一行的「号 / T」等文字会跟着上下错位。
     line-height:inherit + vertical-align:baseline 可让行盒高度与原文完全一致。 */
  line-height: inherit;
  vertical-align: baseline;
  counter-reset: mm-d var(--mm-d);
}

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

/* 数字滚动：数值过渡 + 落位时的下沉回弹 */
.mm-digit.is-live {
  animation:
    mmDigitRoll var(--mm-digit-dur, 0.8s) var(--mm-ease-count) var(--mm-delay, 0s) both,
    mmDigitDrop var(--mm-digit-dur, 0.8s) var(--mm-ease) var(--mm-delay, 0s) both;
}

@keyframes mmDigitRoll {
  from {
    --mm-d: var(--mm-d-from, 9);
  }

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

/* 数字从上方落下、微微过冲后归位 */
@keyframes mmDigitDrop {
  0% {
    translate: 0 -0.55em;
    opacity: 0;
    filter: blur(4px);
  }

  45% {
    translate: 0 0.05em;
    opacity: 1;
    filter: blur(0);
  }

  70% {
    translate: 0 -0.015em;
  }

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

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

@keyframes mmSeqGlow {
  0% {
    color: var(--mm-gold);
    text-shadow: 0 0 15px rgb(244 181 63 / 55%);
  }

  68% {
    color: var(--mm-gold);
    text-shadow: 0 0 9px rgb(244 181 63 / 26%);
  }

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

/* --------------------------------------------------------------------------
   2. 通用入场动效（data-anim）
   --------------------------------------------------------------------------
   data-anim 取值：
     up        自下而上浮入        rise    轻微上浮（位移更小）
     fade      淡入                 left    自左侧滑入
     right     自右侧滑入           drop    自上方落下
     zoom      轻微放大             pop     弹入
     blur      带模糊浮入           kb      Ken Burns 缓推（首屏大图）
     line      竖条自上而下生长     wiperight 自左向右揭示
     shutter   自左向右拉开（配图） flow    向下流动（衔接箭头）
   延迟通过行内 style 的 --d 控制（秒），时长通过 --dur 控制（秒）。
   只有 js/multimodal-interactions.js 正常运行才会加上 html.mm-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.mm-anim .multimodal-page [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

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

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

html.mm-anim .multimodal-page [data-anim="left"] {
  translate: -36px 0;
  opacity: 0;
}

html.mm-anim .multimodal-page [data-anim="right"] {
  translate: 36px 0;
  opacity: 0;
}

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

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

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

html.mm-anim .multimodal-page [data-anim="blur"] {
  translate: 0 24px;
  opacity: 0;
  filter: blur(12px);
}

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

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

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

/* 金色竖条（首屏标题左侧）自上而下生长 */
.multimodal-page [data-anim="line"] {
  transform-origin: top center;
}

html.mm-anim .multimodal-page [data-anim="line"] {
  scale: 1 0;
  opacity: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.multimodal-page [data-anim="flow"].is-in {
  animation-name: mmFlow;
}

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

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

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

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

@keyframes mmFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmLeft {
  from {
    translate: -36px 0;
    opacity: 0;
  }

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

@keyframes mmRight {
  from {
    translate: 36px 0;
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

  to {
    scale: 1;
  }
}

/* 金色竖条自上而下生长 */
@keyframes mmLine {
  from {
    scale: 1 0;
    opacity: 0;
  }

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

/* 英文标题自左向右揭示 */
@keyframes mmWipeRight {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

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

/* 配图自左向右拉开 */
@keyframes mmShutter {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

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

/* 衔接箭头向下流动 —— 象征多式联运的「接续」 */
@keyframes mmFlow {
  0% {
    translate: 0 -14px;
    opacity: 0;
  }

  45% {
    opacity: 0.55;
  }

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

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

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

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

.multimodal-page .multimodal-title h2.is-in::after {
  animation: mmShine 1.35s var(--mm-ease) 0.3s both;
}

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

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

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

/* 3.2 版块金线 —— 标题下方 / 板块标题上方的金色横条自左向右展开
   （.transport-heading::after 与 .industries > h3::after） */
.multimodal-page .transport-heading::after,
.multimodal-page .industries > h3::after {
  transform-origin: left center;
}

.multimodal-page .transport-heading.is-in::after,
.multimodal-page .industries > h3.is-in::after {
  animation: mmRule 0.9s var(--mm-ease) 0.18s both;
}

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

  to {
    scale: 1 1;
  }
}

/* 3.3 左侧黄底面板的白色竖条 —— 随标题自上而下生长 */
.multimodal-page .transport-copy h4::before {
  transform-origin: top center;
}

.multimodal-page .transport-copy.is-in h4::before {
  animation: mmLine 0.6s var(--mm-ease) 0.2s both;
}

/* 3.4 配图推近 —— 图片拉开的同时轻微回拉，形成「镜头后撤」的层次 */
.multimodal-page .transport-photo.is-in img {
  animation: mmPhotoZoom 1.5s var(--mm-ease) both;
}

@keyframes mmPhotoZoom {
  from {
    scale: 1.07;
  }

  to {
    scale: 1;
  }
}

/* 3.5 勾选圆环 —— 逐个弹出，像一项项被「接通」 */
.multimodal-page .transport-features li::before,
.multimodal-page .rail-features li::before {
  transform-origin: center;
}

.multimodal-page .transport-features li.is-in::before,
.multimodal-page .rail-features li.is-in::before {
  animation: mmCheckPop 0.5s var(--mm-ease-back) both;
}

@keyframes mmCheckPop {
  0% {
    scale: 0.2;
    opacity: 0;
  }

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

  100% {
    scale: 1;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   4. 滚动视差（data-parallax）
   --------------------------------------------------------------------------
   data-parallax    纵向强度（像素）
   data-parallax-x  横向强度（像素）
   位移值整体放在 --mm-shift 里，由 JS 在「偏移接近 0」时写入 none。
   原因：translate 一旦不是 none，元素就会被提升为独立合成层，
   容器内文字的抗锯齿方式随之改变（与静态基线出现逐像素差异）。
   偏移为 0 时退回 none，画面便与静态版完全一致。
   -------------------------------------------------------------------------- */
.multimodal-page [data-parallax],
.multimodal-page [data-parallax-x] {
  translate: var(--mm-shift, none);
}

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

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

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

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

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

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

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

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

  .multimodal-page .multimodal-logo img {
    transition: translate 0.45s var(--mm-ease);
  }

  .multimodal-page .multimodal-logo:hover img {
    translate: 4px 0;
  }

  /* 顶部导航的悬停二级菜单由 js/script.js 注入（.nav-dropdown），
     这里给它补一层逐条浮现的入场，展开时更有节奏感。
     只用 opacity 做过渡：translate / scale 会改变元素的布局盒，
     让二级菜单里的链接偏离设计稿的位置。 */
  .multimodal-page .header-links .nav-dropdown a {
    opacity: 0;
    transition:
      color 0.2s ease,
      background 0.2s ease,
      opacity 0.3s var(--mm-ease);
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a,
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a {
    opacity: 1;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(1),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(1) {
    transition-delay: 0.05s;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(2),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(2) {
    transition-delay: 0.1s;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(3),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(3) {
    transition-delay: 0.15s;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(4),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(4) {
    transition-delay: 0.2s;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(5),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(5) {
    transition-delay: 0.25s;
  }

  .multimodal-page .header-links .nav-item:hover > .nav-dropdown a:nth-child(n + 6),
  .multimodal-page .header-links .nav-item:focus-within > .nav-dropdown a:nth-child(n + 6) {
    transition-delay: 0.3s;
  }

  /* ---------------------------------------------------- 运输方式卡片 */
  .multimodal-page .transport-heading h3 {
    transition: color 0.3s ease;
  }

  .multimodal-page .transport-heading:hover h3 {
    color: var(--mm-gold-deep);
  }

  .multimodal-page .transport-heading img {
    transition:
      scale 0.45s var(--mm-ease),
      rotate 0.45s var(--mm-ease);
  }

  .multimodal-page .transport-heading:hover img {
    scale: 1.08;
  }

  .multimodal-page .transport-copy {
    transition: box-shadow 0.45s ease;
  }

  .multimodal-page .transport-card:hover .transport-copy {
    box-shadow:
      0 0 0 2px rgb(244 181 63 / 45%),
      0 18px 40px rgb(217 144 42 / 22%);
  }

  .multimodal-page .transport-photo img {
    transition:
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.55s ease;
  }

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

  /* 特点清单：悬停时整行轻移，勾选环同步放大 */
  .multimodal-page .transport-features li,
  .multimodal-page .rail-features li {
    transition:
      color 0.3s ease,
      translate 0.4s var(--mm-ease);
  }

  .multimodal-page .transport-features li:hover,
  .multimodal-page .rail-features li:hover {
    color: var(--mm-gold-deep);
    translate: 6px 0;
  }

  .multimodal-page .transport-features li::before,
  .multimodal-page .rail-features li::before {
    transition:
      border-color 0.3s ease,
      background-color 0.3s ease,
      scale 0.35s var(--mm-ease);
  }

  .multimodal-page .transport-features li:hover::before,
  .multimodal-page .rail-features li:hover::before {
    border-color: var(--mm-gold-deep);
    scale: 1.15;
  }

  /* ---------------------------------------------------- 服务行业图标 */
  .multimodal-page .industry p {
    transition: color 0.3s ease;
  }

  .multimodal-page .industry:hover p {
    color: var(--mm-gold-deep);
  }

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   7. 移动端（≤789px）：数字滚动 + 错峰入场 + 点按反馈
   -------------------------------------------------------------------------- */
@media (max-width: 789px) {
  /* 本页由自己的 data-anim 编排入场，接管共享模板的 .m-reveal 淡入，
     避免「父级淡入 × 子级淡入」的双重透明叠加。
     只在本页生效，不影响其它页面的移动端表现。 */
  html.m-ready .multimodal-page .m-reveal,
  html.m-ready .multimodal-page .m-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 首屏大图缓慢推近 */
  .multimodal-page .m-hero__bg {
    animation: mmMobileHero 18s var(--mm-ease-count) both;
  }

  @keyframes mmMobileHero {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

  /* 移动端首屏内容几乎填满 .m-hero（其 overflow:hidden），
     带位移的入场会被裁切或与下方文字重叠，
     因此这里改成「只做模糊、不做位移」的入场。 */
  html.mm-anim .multimodal-page [data-anim="blur"] {
    translate: 0 0;
    opacity: 0;
    filter: blur(8px);
  }

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

  @keyframes mmBlurIn {
    from {
      translate: 0 0;
      opacity: 0;
      filter: blur(8px);
    }

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

  /* 横向滚动容器里的条目不在视口内、无法被观察器逐个触发，
     因此锚点条改为「由 nav 触发、子项错峰淡入」。
     动画用 animation-fill-mode: both 结束后由 JS 摘掉 class，
     让锚点回到与静态版完全一致的渲染路径（否则会留下合成层，
     文字的抗锯齿方式改变，截图会看到细微色差）。 */
  .multimodal-page .m-toc.is-in a {
    animation: mmFadeIn 0.55s var(--mm-ease) both;
  }

  @keyframes mmFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .multimodal-page .m-toc.is-in a:nth-child(1) {
    animation-delay: 0.06s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(2) {
    animation-delay: 0.1s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(3) {
    animation-delay: 0.14s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(4) {
    animation-delay: 0.18s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(5) {
    animation-delay: 0.22s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(6) {
    animation-delay: 0.26s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(7) {
    animation-delay: 0.3s;
  }

  .multimodal-page .m-toc.is-in a:nth-child(n + 8) {
    animation-delay: 0.34s;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ---------------------------------------------------- 点按反馈 */
  .multimodal-page .m-toc a {
    transition:
      background-color 0.26s ease,
      color 0.26s ease;
  }

  .multimodal-page .m-toc a:active {
    color: var(--mm-gold);
    background: #fffdf6;
  }

  .multimodal-page .m-tag {
    transition:
      background 0.3s ease,
      transform 0.3s var(--mm-ease);
  }

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

  .multimodal-page .m-list__item {
    transition:
      background-color 0.3s ease,
      transform 0.3s var(--mm-ease);
  }

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

  .multimodal-page .m-card {
    transition: transform 0.32s var(--mm-ease);
  }

  .multimodal-page .m-card:active {
    transform: scale(0.985);
  }

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

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

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

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

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

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

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

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

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

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

  .multimodal-page .transport-photo.is-in img {
    animation: none !important;
  }

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

  .multimodal-page .m-toc a {
    animation: none !important;
    opacity: 1;
  }
  .multimodal-page .m-backtop {
    animation: none !important;
  }
}