/* ==========================================================================
   international-interactions.css — 国际物流页 · CSS3 交互动效
   --------------------------------------------------------------------------
   作用范围：pages/international-logistics.html（仅本页引入，其它页面零影响）
     · 桌面画布（≥790px）—— 入场编排 / 数字滚动 / 滚动视差 / 指针聚光 / 悬停微交互
     · 移动端视图（≤789px）—— 数字滚动 + 错峰入场 + 点按反馈

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

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

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

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

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

/* 数字包裹层必须完整继承所在位置的字体与间距。
   页面里存在形如 `.m-list--icon .m-list__key { display:flex; gap:8px }`
   这类「后代选择器」，若不显式复位，数字会掉进那条规则里 ——
   字号、字重、字距全变，数字组会被挤宽，版式随之走样。 */
.international-page .il-num-seq,
.international-page .il-digit {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

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

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

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

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

@keyframes ilDigitRoll {
  from {
    --il-d: var(--il-d-from, 9);
  }

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

/* 数字从上方落下、微微过冲后归位 */
@keyframes ilDigitDrop {
  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);
  }
}

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

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

  68% {
    color: var(--il-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      竖条自上而下生长     rule    金色横线自中心向两侧展开
     wiperight 自左向右揭示         map     线路图自中心拉开 + 内部推近
   延迟通过行内 style 的 --d 控制（秒），时长通过 --dur 控制（秒）。
   只有 js/international-interactions.js 正常运行才会加上 html.il-anim，
   因此没有 JS 时页面内容不会被隐藏。
   -------------------------------------------------------------------------- */
html.il-anim .international-page [data-anim="up"] {
  translate: 0 30px;
  opacity: 0;
}

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

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

html.il-anim .international-page [data-anim="left"] {
  translate: -30px 0;
  opacity: 0;
}

html.il-anim .international-page [data-anim="right"] {
  translate: 30px 0;
  opacity: 0;
}

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

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

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

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

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

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

html.il-anim .international-page [data-anim="map"] {
  opacity: 0;
}

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

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

/* 金色横线（版块标题下方）自中心向两侧展开 */
html.il-anim .international-page [data-anim="rule"] {
  scale: 0 1;
  opacity: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.international-page [data-anim="rule"].is-in {
  animation-name: ilRule;
}

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

.international-page [data-anim="map"].is-in {
  animation-name: ilMap;
}

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

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

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

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

@keyframes ilFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

  to {
    scale: 1;
  }
}

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

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

/* 金色横线自中心向两侧展开 */
@keyframes ilRule {
  from {
    scale: 0 1;
    opacity: 0;
  }

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

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

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

/* 线路图自中心上下拉开 */
@keyframes ilMap {
  from {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

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

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

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

.international-page .international-page-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;
}

.international-page .international-page-title h2.is-in::after {
  animation: ilShine 1.35s var(--il-ease) 0.3s both;
}

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

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

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

/* 3.2 信号条 —— 每条业务线左侧的金色竖条自上而下「接通」
   （.service-list / .market-list / .freight-details / .rail-details 的 ::before） */
.international-page .service-list > div::before,
.international-page .market-list > div::before,
.international-page .freight-details > div::before,
.international-page .rail-details > div::before {
  transform-origin: top center;
}

.international-page .service-list > div.is-in::before,
.international-page .market-list > div.is-in::before,
.international-page .freight-details > div.is-in::before,
.international-page .rail-details > div.is-in::before {
  animation: ilSignal 0.72s var(--il-ease) 0.16s both;
}

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

  to {
    scale: 1 1;
  }
}

/* 3.3 线路图拉开 —— 图面自中心铺开，内部同时轻微推近 */
.international-page .image-frame.is-in img {
  animation: ilMapZoom 1.6s var(--il-ease) both;
}

@keyframes ilMapZoom {
  from {
    scale: 1.06;
  }

  to {
    scale: 1;
  }
}

/* 3.4 线路图流光 —— 一道暖色高光横扫地图，象征网络点亮 */
.international-page .image-frame::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    104deg,
    transparent 36%,
    rgb(244 181 63 / 26%) 50%,
    transparent 64%
  );
  content: "";
  opacity: 0;
  translate: -120% 0;
  visibility: hidden;
  pointer-events: none;
}

.international-page .image-frame.is-in::after {
  animation: ilSheen 1.6s var(--il-ease) 0.3s both;
}

@keyframes ilSheen {
  0% {
    opacity: 0;
    translate: -120% 0;
    visibility: visible;
  }

  26% {
    opacity: 1;
  }

  74% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 120% 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   4. 滚动视差（data-parallax）
   --------------------------------------------------------------------------
   data-parallax    纵向强度（像素），JS 写入 --il-shift
   data-parallax-x  横向强度（像素），JS 写入 --il-shift

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

/* --------------------------------------------------------------------------
   5. 指针聚光（data-spotlight，由 JS 写入 --cx / --cy）
   --------------------------------------------------------------------------
   静止时用 visibility:hidden 让这一层完全不参与绘制。
   若只用 opacity:0，浏览器仍会为它保留一块渲染面，
   容器内文字的抗锯齿方式会随之改变（与静态基线出现逐像素差异）。
   注意：宿主元素本身就是 position:absolute，
   这里不要再改它的 position，否则会破坏画布内的定位。
   -------------------------------------------------------------------------- */
.international-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;
}

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

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

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

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

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

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

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

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

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

  /* ---------------------------------------------------- 分类下拉导航 */
  .international-page .international-dropdown a {
    transition:
      color 0.26s ease,
      background-color 0.26s ease;
  }

  .international-page .international-dropdown a:not(.active):hover {
    color: var(--il-gold);
  }

  .international-page .international-dropdown a.active:hover {
    background: #ffc85c;
  }

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

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

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

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

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

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

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

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

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

  /* ---------------------------------------------------- 业务线条目 */
  .international-page .service-list h4,
  .international-page .market-list h4,
  .international-page .freight-details h4,
  .international-page .rail-details h4 {
    transition: color 0.3s ease;
  }

  .international-page .service-list > div:hover h4,
  .international-page .market-list > div:hover h4,
  .international-page .freight-details > div:hover h4,
  .international-page .rail-details > div:hover h4 {
    color: var(--il-gold-deep);
  }

  .international-page .service-list > div::before,
  .international-page .market-list > div::before,
  .international-page .freight-details > div::before,
  .international-page .rail-details > div::before {
    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .international-page .service-list > div:hover::before,
  .international-page .market-list > div:hover::before,
  .international-page .freight-details > div:hover::before,
  .international-page .rail-details > div:hover::before {
    background: var(--il-gold-deep);
    box-shadow: 0 0 14px rgb(244 181 63 / 55%);
  }

  /* ---------------------------------------------------- 线路图 / 海外仓 */
  .international-page .image-frame {
    transition: box-shadow 0.45s ease;
  }

  .international-page .image-frame:hover {
    box-shadow:
      0 0 0 2px rgb(244 181 63 / 50%),
      0 22px 46px rgb(0 0 0 / 12%);
  }

  .international-page .warehouse-photo {
    transition: box-shadow 0.4s ease;
  }

  .international-page .warehouse-photo:hover {
    box-shadow: 0 16px 34px rgb(0 0 0 / 16%);
  }

  .international-page .warehouse-labels span {
    transition: color 0.28s ease;
  }

  .international-page .warehouse-labels span:hover {
    color: var(--il-gold-deep);
  }

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

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

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

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

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

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

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

  .international-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 .international-page .m-reveal,
  html.m-ready .international-page .m-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

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

  @keyframes ilMobileHero {
    from {
      scale: 1.08;
    }

    to {
      scale: 1;
    }
  }

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

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

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

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

  /* ---------------------------------------------------- 错峰入场
     列表 / 标签 / 仓库 / 页脚行的逐项延迟统一在 CSS 里给出，
     HTML 只需要写 data-anim，不必逐个写 --d。 */

  /* 锚点条是横向滚动容器，右侧条目不在视口内、无法被观察器触发，
     因此这一排改为纯 CSS 的一次性入场（只淡入，不位移，避免被容器裁切）。 */
  .international-page .m-toc a {
    animation: ilFadeIn 0.55s var(--il-ease) both;
  }

  @keyframes ilFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .international-page .m-toc a:nth-child(1) {
    --d: 0.06s;
    animation-delay: 0.06s;
  }

  .international-page .m-toc a:nth-child(2) {
    --d: 0.1s;
    animation-delay: 0.1s;
  }

  .international-page .m-toc a:nth-child(3) {
    --d: 0.14s;
    animation-delay: 0.14s;
  }

  .international-page .m-toc a:nth-child(4) {
    --d: 0.18s;
    animation-delay: 0.18s;
  }

  .international-page .m-toc a:nth-child(5) {
    --d: 0.22s;
    animation-delay: 0.22s;
  }

  .international-page .m-toc a:nth-child(6) {
    --d: 0.26s;
    animation-delay: 0.26s;
  }

  .international-page .m-toc a:nth-child(7) {
    --d: 0.3s;
    animation-delay: 0.3s;
  }

  .international-page .m-toc a:nth-child(8) {
    --d: 0.34s;
    animation-delay: 0.34s;
  }

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

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

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

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

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

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

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

  .international-page .m-warehouse:nth-child(2) {
    --d: 0.09s;
  }

  .international-page .m-warehouse:nth-child(3) {
    --d: 0.14s;
  }

  .international-page .m-warehouse:nth-child(4) {
    --d: 0.19s;
  }

  .international-page .m-warehouse:nth-child(5) {
    --d: 0.24s;
  }

  .international-page .m-warehouse:nth-child(6) {
    --d: 0.29s;
  }

  .international-page .m-warehouse:nth-child(7) {
    --d: 0.34s;
  }

  .international-page .m-warehouse:nth-child(8) {
    --d: 0.39s;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .international-page .m-warehouse {
    transition: transform 0.32s var(--il-ease);
  }

  .international-page .m-warehouse:active {
    transform: scale(0.97);
  }

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

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

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

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

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

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

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

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

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

  .international-page .international-page-title h2::after,
  .international-page .image-frame::after {
    display: none;
  }

  .international-page .image-frame.is-in img {
    animation: none !important;
  }

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

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

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