/* ============================================================
   zt-btnfx · 通用按钮交互组件（无依赖）
   覆盖 7 个交互：press / load / hold / morph / burst / liquid / magnetic
   用法：在元素上加 data-bf="press liquid" 等；全局默认已对 .btn 生效
   ============================================================ */

/* ---------- 全局：按下缩放回弹（所有按钮，安全） ---------- */
.btn,
button,
.bf,
[class*="btn"]{
  transition:
    transform .18s cubic-bezier(.34,1.56,.64,1),
    background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .25s ease, filter .2s ease, opacity .2s ease;
}
.btn:not(:disabled):not(.disabled):active,
button:not(:disabled):not(.disabled):active,
.bf:not(.bf-off):active,
[class*="btn"]:not(:disabled):not(.disabled):active{
  transform: scale(.96);
}
/* 明确指定 press 的元素 */
.bf-press:active{ transform:scale(.94); }

/* 关闭某元素的全部动效：data-bf="none" */
.bf-off{ transition:none !important; }
.bf-off:active{ transform:none !important; }

/* ============================================================
   1) 加载变成对勾  Load to Check
   ============================================================ */
.bf-load{
  min-width:132px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.bf-spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  display:none; animation:bf-spin .7s linear infinite;
}
@keyframes bf-spin{ to{ transform:rotate(360deg); } }
.bf-load.bf-loading{ pointer-events:none; }
.bf-load.bf-loading .bf-spinner{ display:inline-block; }
.bf-load.bf-loading .bf-label{ display:none; }
.bf-check{ display:none; }
.bf-load.bf-done{
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  border-color:#15803d !important;
  box-shadow:0 8px 20px -6px rgba(22,163,74,.6);
}
.bf-load.bf-done .bf-spinner{ display:none; }
.bf-load.bf-done .bf-check{
  display:inline-flex;
  animation:bf-pop .42s cubic-bezier(.34,1.56,.64,1);
}
.bf-load.bf-done::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%); animation:bf-shine .7s ease forwards;
}
@keyframes bf-pop{ 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
@keyframes bf-shine{ to{ transform:translateX(120%); } }
/* 让按钮成为定位上下文，高光才不溢出 */
.bf-load{ position:relative; overflow:hidden; }

/* ============================================================
   2) 长按蓄力填充  Hold to Confirm
   ============================================================ */
.bf-hold{
  position:relative; overflow:hidden; user-select:none;
  -webkit-user-select:none;
}
.bf-hold-fill{
  position:absolute; inset:0; width:0;
  background:linear-gradient(135deg,var(--primary,#4f46e5),#7c3aed);
  transition:width .08s linear;
}
.bf-hold.bf-hold-done .bf-hold-fill{
  width:100% !important;
  background:linear-gradient(135deg,#16a34a,#15803d);
}
.bf-hold-txt{ position:relative; z-index:1; }

/* ============================================================
   3) 图标形变切换  Icon Morph
   ============================================================ */
.bf-morph{ position:relative; }
.bf-morph svg{ overflow:visible; }
.bf-morph-icon{
  display:inline-block;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.bf-morph.bf-morph-on .bf-morph-icon{
  transform:rotate(180deg) scale(1.12);
}
.bf-morph-a, .bf-morph-b{ transition:opacity .2s ease; }
.bf-morph-b{ opacity:0; }
.bf-morph.bf-morph-on .bf-morph-a{ opacity:0; }
.bf-morph.bf-morph-on .bf-morph-b{ opacity:1; }

/* ============================================================
   4) 成功微粒爆开  Success Burst
   ============================================================ */
.bf-burst{ position:relative; }
.bf-particle{
  position:absolute; width:7px; height:7px; border-radius:50%;
  pointer-events:none; z-index:6;
}
.bf-burst.bf-bumping{ animation:bf-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes bf-bump{
  0%{transform:scale(1)}
  35%{transform:scale(.9)}
  70%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* ============================================================
   5) 液态颜色填充  Liquid Fill
   ============================================================ */
.bf-liquid{ position:relative; overflow:hidden; }
.bf-ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,.15));
  pointer-events:none; z-index:0;
  animation:bf-ripple .6s ease-out forwards;
}
.bf-liquid > *{ position:relative; z-index:1; }
@keyframes bf-ripple{ to{ transform:scale(2.6); opacity:0; } }

/* 全局默认水波（JS 自动给 .btn 加的，更克制） */
.bf-has-ripple{ position:relative; overflow:hidden; }
.bf-has-ripple > .bf-ripple{ z-index:0; }

/* ============================================================
   6) 悬浮磁吸光晕  Magnetic Glow
   ============================================================ */
.bf-magnetic{ will-change:transform; }
.bf-magnetic.bf-lit{
  box-shadow:
    0 16px 32px -10px rgba(124,58,237,.55),
    0 0 24px rgba(124,58,237,.4);
}

/* 尊重“减少动态”偏好 */
@media (prefers-reduced-motion: reduce){
  .btn, button, .bf, [class*="m-btn"]{ transition:none !important; }
  .bf-particle, .bf-ripple, .bf-spinner{ animation:none !important; }
}