/* ============================================================
   Motion 动效系统（product-detail.html 试点 + markets.html 卡片方向揭示）
   参考 magal-engineering.com/about 的动效细节：
   1. 词级标题揭示：每词 translateY(110%) → 0，0.5s easeOutCubic，
      行容器 overflow hidden 形成"线条揭示"，词间 60ms 错峰
   2. 滚动淡入（AOS 风格）：fade-up-20 / fade-up-50 / fade-scale-80，
      0.7s，支持 --m-delay 延迟（100/200/300/500ms 分级）
   3. 方向揭示（2026-08-18 markets 卡片引入）：fade-right-80（从左侧入）、
      fade-left-80（从右侧入）；媒体在左的卡片方向镜像（图片左入、文字右入）。
      位移 80px，transform 0.8s 略慢于基础 0.7s（对齐 --duration-xl: 800ms）
   如果试点合适将作为规范应用到全站
   ============================================================ */

/* ==================== 词级标题揭示 ==================== */
.m-anim-title {
  visibility: hidden; /* JS 拆分前隐藏，避免未拆分闪烁 */
}

.m-anim-title.is-ready {
  visibility: visible;
}

.m-anim-title .m-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em; /* 防 descender 被裁切 */
  margin-bottom: -0.1em;
}

.m-anim-title .m-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1),
              opacity 0.4s ease;
  transition-delay: calc(min(var(--wi, 0), 8) * 60ms);
}

.m-anim-title.in-view .m-word {
  transform: translateY(0);
  opacity: 1;
}

/* ==================== 滚动淡入（AOS 风格） ==================== */
[data-m-anim] {
  opacity: 0;
  transition: opacity 0.7s ease,
              transform 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: var(--m-delay, 0ms);
}

[data-m-anim="fade-up-20"] {
  transform: translate3d(0, 20px, 0);
}

[data-m-anim="fade-up-50"] {
  transform: translate3d(0, 50px, 0);
}

[data-m-anim="fade-scale-80"] {
  transform: scale(0.8);
}

/* 方向揭示（markets 卡片）：文字从左侧入 / 图片从右侧入；
   媒体在左的卡片（mk-card--media-left）在 HTML 中互换这两个值实现镜像 */
[data-m-anim="fade-right-80"] {
  transform: translate3d(-80px, 0, 0);
}

[data-m-anim="fade-left-80"] {
  transform: translate3d(80px, 0, 0);
}

/* 从右侧滑入（PC 端卡片视差） */
[data-m-anim="slide-in-right"] {
  transform: translate3d(80px, 0, 0);
}

/* 移动端禁用横向滑入 */
@media (max-width: 768px) {
  [data-m-anim="slide-in-right"] {
    transform: none;
  }
}

/* 方向揭示稍慢于基础滚动淡入：transform 0.8s（--duration-xl），opacity 保持 0.7s */
[data-m-anim="fade-right-80"],
[data-m-anim="fade-left-80"] {
  transition: opacity 0.7s ease var(--m-delay, 0ms),
              transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) var(--m-delay, 0ms);
}

[data-m-anim].in-view {
  opacity: 1;
  transform: none;
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  .m-anim-title,
  .m-anim-title .m-word,
  [data-m-anim] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: none;
  }
}