/* 驰辉五金 · 点击与页面切换动画
   1. 按压回弹：按钮、标签、编号格按下时轻微缩小
   2. 涟漪：实心按钮按下时从点击位置扩散一圈波纹（由 motion.js 生成）
   3. 页面切换：支持的浏览器用原生 View Transitions 淡入淡出，页头保持不动；
      其他浏览器由 motion.js 做淡出 → 跳转 → 淡入
   4. 手机菜单展开时下滑出现
   系统开启“减少动态效果”时全部关闭。 */

:root{--mx-ease:cubic-bezier(.2,.7,.2,1);--mx-press:.965}

/* ---------- 1. 按压回弹 ---------- */
.btn,.chh-q,.chh-menu,.rfq,.hq,
.cbtn .s,.ftr .b2 a,.act a,.field button,
.chips a,.cells a,.chip,.t,.tabs button,
.addb,.addc,.send,.nb,.rm,.x,.mailbox .row a,.mailbox .row button{
  transition:transform .16s var(--mx-ease),background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn:active,.chh-q:active,.chh-menu:active,.rfq:active,.hq:active,
.cbtn .s:active,.ftr .b2 a:active,.act a:active,.field button:active,
.chips a:active,.chip:active,.tabs button:active,
.addb:active,.addc:active,.send:not([disabled]):active,.nb:active,.rm:active,.x:active,
.mailbox .row a:active,.mailbox .row button:active{transform:scale(var(--mx-press))}
.t:active{transform:scale(.98)}
.cells a:active{transform:scale(.88)}

/* 首屏箭头链接：按下时箭头前冲 */
.link svg,.btn svg,.hx-idx .all svg{transition:transform .22s var(--mx-ease)}
.link:hover svg,.btn:hover svg,.hx-idx .all:hover svg{transform:translateX(3px)}
.link:active svg,.btn:active svg,.hx-idx .all:active svg{transform:translateX(6px)}

/* 文字链接：按下时轻微变暗 */
.chh-nav a,.chh-drop a,.links a,.hotrow a,.sg a,.cats6 a,.crumb a,.chf-in a,.hx-idx a{transition:opacity .15s ease,color .2s ease}
.chh-nav a:active,.chh-drop a:active,.links a:active,.hotrow a:active,.sg a:active,.cats6 a:active,.crumb a:active,.chf-in a:active,.hx-idx a:active{opacity:.6}

/* ---------- 2. 涟漪 ---------- */
.mx-rip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.mx-rip i{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:mx-rip .55s var(--mx-ease) forwards;pointer-events:none}
.mx-rip i.out{animation:mx-rip .55s var(--mx-ease) forwards,mx-rip-out .35s ease .15s forwards}
@keyframes mx-rip{to{transform:scale(1)}}
@keyframes mx-rip-out{to{opacity:0}}

/* ---------- 3. 页面切换（原生 View Transitions） ---------- */
@view-transition{navigation:auto}
.chh{view-transition-name:mx-header}
::view-transition-group(mx-header){animation:none}
::view-transition-old(root){animation:mx-vt-out .18s ease-in both}
::view-transition-new(root){animation:mx-vt-in .38s var(--mx-ease) both}
@keyframes mx-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes mx-vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- 3b. 页面切换（不支持 View Transitions 的浏览器） ---------- */
html.mx-js:not(.mx-vt) body>:not(.chh):not(script):not(style){animation:mx-enter .42s var(--mx-ease) backwards}
html.mx-leave body>:not(.chh):not(script):not(style){animation:mx-leave .16s ease-in forwards}
@keyframes mx-enter{from{opacity:0;transform:translateY(10px)}}
@keyframes mx-leave{to{opacity:0;transform:translateY(-6px)}}

/* ---------- 4. 手机菜单 ---------- */
.chh-drop:not([hidden]){animation:mx-drop .24s var(--mx-ease)}
@keyframes mx-drop{from{opacity:0;transform:translateY(-8px)}}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}
  .mx-rip{display:none}
}