/* ==========================================================================
   motion.css —— 转场层与微交互。此处不出现任何 hex，色值一律来自 tokens.css。
   --------------------------------------------------------------------------
   一条硬规矩：这个文件里的 @keyframes 只允许动 transform / opacity / clip-path。
   动 width / height / top / left / margin 每帧都要重排，一段 300ms 的动画就是
   几十次重排，越做越卡 —— 「丝滑」的反面往往就是这么来的。
   这条规矩由 _dev/motioncheck.js 扫源码钉死，不靠自觉。

   加载位置：必须在 app.css 之后（覆盖少数需要改写的原型样式）。
   ========================================================================== */

/* ==========================================================================
   1. 双缓冲转场宿主
   #app 在转场那一瞬变成定位容器 + overflow:hidden，旧页与新页各占一层，
   两层同时在屏上做耦合运动；动画结束层被摘掉，容器恢复原样。
   ========================================================================== */
.mi-host {
  position: relative;
  overflow: hidden;
}

.mi-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;              /* 转场期间不再产生第二条滚动条 */
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* 推进/返回时，新页的前缘压一道阴影：只是一层静态绘制，不参与动画 */
.mi-layer.mi-in-push,
.mi-layer.mi-in-pop { box-shadow: var(--sh-3); }

/* ==========================================================================
   2. 按压反馈
   按下立刻缩（90ms），松手用弹性曲线回弹（300ms）。
   这一段是「手感」的全部来源：按下要快，回来要有，中间不要匀速。
   ========================================================================== */
.btn,
.quick-btn,
.icon-btn,
.chip,
.row.tap,
.dapp-card,
.dapp-cat .cc,
.mn-word,
.mk-row,
.rail-item {
  transition:
    transform 300ms var(--ease-spring),
    opacity var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.btn:active,
.quick-btn:active,
.icon-btn:active,
.chip:active,
.row.tap:active,
.dapp-card:active,
.dapp-cat .cc:active,
.mn-word:active,
.mk-row:active,
.rail-item:active {
  transform: scale(.955);
  transition-duration: 90ms;
  transition-timing-function: var(--ease);
}

/* 原型里 .btn 的按下位移保留，但换成一行复合变换，
   免得两条规则互相覆盖后只剩其中一个生效 */
.btn:active { transform: translate3d(0, 1px, 0) scale(.985); }

/* ==========================================================================
   3. 桌面指针：可点卡片的微抬升（触屏不参与，避免手指出不来）
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .dapp-card,
  .rail-item,
  .card {
    transition:
      transform var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease),
      background var(--dur-1) var(--ease);
  }
  .dapp-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--sh-2);
  }
  .rail-item:hover { transform: translate3d(2px, 0, 0); }
}

/* ==========================================================================
   4. 英雄区随滚动收拢
   只对标了 data-mi-hero 的那一块生效（资产页「总资产」）。
   改的只是 transform 与 opacity —— 不动高度，所以下面的卡片不会被挤动。
   ========================================================================== */
[data-mi-hero] {
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

/* ==========================================================================
   5. 底部 Tab 的显隐：滑出去，而不是凭空消失
   原来是 display:none —— 一屏出现/消失是硬切。改成绝对定位 + 位移：
   既不占布局（跟消失等效），又看得见它是怎么走的。
   ========================================================================== */
.tabbar {
  transition:
    transform var(--dur-3) var(--ease-expo),
    opacity var(--dur-2) var(--ease);
}
.tabbar.hidden {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   6. 弹层与浮层：统一走同一条 expo 曲线，并给一点点回弹
   ========================================================================== */
.sheet { transition: transform 320ms var(--ease-expo); }
.scrim { transition: opacity var(--dur-3) var(--ease-expo); }
.modal { transition: opacity var(--dur-2) var(--ease), transform 340ms var(--ease-spring); }

/* toast 入场：从下方浮起，避免出现在原地的生硬一跳 */
.toast {
  transition:
    opacity var(--dur-2) var(--ease-expo),
    transform var(--dur-2) var(--ease-spring);
}

/* ==========================================================================
   7. 合成器提示：只给「确定会动」的元素，用完即走由 JS 负责清除。
      转场层靠 .mi-layer 的 will-change，动画一结束层就被销毁，
      不存在长期挂着 will-change 拖累内存的情况。
   ========================================================================== */
.row.tap,
.dapp-card,
.mn-word { overscroll-behavior: contain; }