/* ════════════════════════════════════════════════════════════════════════
 * ui-web-motion-lab.css — Web 端 14 效演示台
 * 来源：抖音「小龙《5个让UI瞬间高级的微交互》」+「西瓜同学🍉《12种App和小程序的高级交互》」
 * 规则：全部动效用 transform/opacity/clip-path，不改布局、不改业务逻辑。
 * ════════════════════════════════════════════════════════════════════════ */

/* --- 容器 --- */
.wml-wrap{padding:var(--gap,16px);min-height:100%;}
.wml-head{margin-bottom:16px;}
.wml-head p{font-size:13px;line-height:1.7;color:var(--text-secondary);margin-top:8px;}
.wml-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));}
.wml-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);transition:box-shadow .25s ease,border-color .2s ease;}
.wml-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent);}
.wml-card h4{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.wml-card .wml-sub{font-size:12px;color:var(--text-muted);margin-bottom:12px;}
.wml-card .wml-desc{font-size:12px;color:var(--text-secondary);line-height:1.6;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--border-light);}
.wml-demo{min-height:110px;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--bg-tertiary);border-radius:var(--radius);position:relative;overflow:hidden;}

/* --- 01 按压回弹 --- */
.wml-press{position:relative;padding:10px 22px;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:transform 80ms cubic-bezier(.4,0,.2,1),box-shadow 80ms;box-shadow:0 4px 14px rgba(var(--accent-rgb,.230,57,124),.35);}
.wml-press:active{transform:scale(.92);box-shadow:0 2px 6px rgba(var(--accent-rgb,.230,57,124),.25);}
.wml-press.pop{animation:wml-press-pop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes wml-press-pop{0%{transform:scale(.92)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* --- 02 触点水波 --- */
.wml-ripple2{position:relative;padding:10px 24px;background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#fff;border:none;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;}
.wml-ripple2 .wml-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:wml-ripple2 .6s linear;pointer-events:none;}
@keyframes wml-ripple2{to{transform:scale(4);opacity:0}}

/* --- 03 弹性开关 --- */
.wml-switch3{width:56px;height:30px;background:var(--bg-tertiary);border-radius:999px;position:relative;cursor:pointer;transition:background .35s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--border);}
.wml-switch3::after{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.wml-switch3.on{background:var(--accent);}
.wml-switch3.on::after{transform:translateX(26px);}

/* --- 04 图标变形 --- */
.wml-morph{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s;}
.wml-morph:active{transform:scale(.92);}
.wml-morph .wml-icon{position:absolute;transition:opacity .25s,transform .25s;}
.wml-morph .wml-arrow{opacity:1;transform:translateY(0);}
.wml-morph .wml-loader{opacity:0;transform:scale(.5) rotate(-90deg);}
.wml-morph .wml-check{opacity:0;transform:scale(.2);}
.wml-morph.loading .wml-arrow{opacity:0;transform:translateY(-20px);}
.wml-morph.loading .wml-loader{opacity:1;transform:scale(1) rotate(0deg);animation:wml-spin .8s linear infinite;}
.wml-morph.loading .wml-check{opacity:0;transform:scale(.2);}
.wml-morph.done .wml-loader{opacity:0;transform:scale(.5);}
.wml-morph.done .wml-check{opacity:1;transform:scale(1);}
@keyframes wml-spin{to{transform:scale(1) rotate(360deg)}}

/* --- 05 成功勾选 --- */
.wml-checkbtn{padding:9px 22px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:999px;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .35s cubic-bezier(.34,1.56,.64,1);}
.wml-checkbtn .wml-tick{width:18px;height:18px;border:2px solid var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .35s;}
.wml-checkbtn .wml-tick::after{content:'✓';font-size:11px;color:#fff;opacity:0;transform:scale(0);transition:all .25s .1s;}
.wml-checkbtn.done{background:var(--success);color:#fff;border-color:var(--success);box-shadow:0 4px 12px rgba(34,197,94,.25);}
.wml-checkbtn.done .wml-tick{border-color:#fff;background:#fff;}
.wml-checkbtn.done .wml-tick::after{opacity:1;transform:scale(1);color:var(--success);}

/* --- 06 数字滚动 --- */
.wml-counter{font-size:42px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-1px;min-width:80px;text-align:center;}

/* --- 07 卡片抽走+补位 --- */
.wml-stack{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;}
.wml-stackcard{width:62px;height:82px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;}
.wml-stackcard.gone{transform:translate(60px,-40px) rotate(18deg);opacity:0;pointer-events:none;}

/* --- 08 标签选中+相邻让位 --- */
.wml-tabs{display:inline-flex;background:var(--bg-tertiary);border-radius:999px;padding:4px;position:relative;}
.wml-tab{padding:7px 16px;border-radius:999px;font-size:13px;color:var(--text-secondary);cursor:pointer;position:relative;z-index:1;transition:color .25s;white-space:nowrap;}
.wml-tab.active{color:#fff;}
.wml-tabs .wml-pill{position:absolute;top:4px;bottom:4px;background:var(--accent);border-radius:999px;transition:left .3s cubic-bezier(.34,1.56,.64,1),width .3s cubic-bezier(.34,1.56,.64,1);z-index:0;box-shadow:0 2px 8px rgba(var(--accent-rgb,.230,57,124),.25);}

/* --- 09 主题圆形揭示 --- */
.wml-reveal{position:relative;width:140px;height:90px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);cursor:pointer;}
.wml-reveal .wml-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:clip-path .5s cubic-bezier(.34,1.56,.64,1);}
.wml-reveal .wml-light{background:var(--bg-card);color:var(--text-primary);clip-path:circle(100% at 50% 50%);}
.wml-reveal .wml-dark{background:#1a1a2e;color:#e8e8f0;clip-path:circle(0% at 50% 50%);}
.wml-reveal.dark .wml-light{clip-path:circle(0% at 50% 50%);}
.wml-reveal.dark .wml-dark{clip-path:circle(100% at 50% 50%);}

/* --- 10 爆炸爱心 --- */
.wml-heart2{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;position:relative;transition:transform .15s;}
.wml-heart2:active{transform:scale(.9);}
.wml-heart2.pop{animation:wml-heart2-pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes wml-heart2-pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.wml-heart2 .wml-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;}
.wml-heart2 .wml-spark.go{animation:wml-spark 500ms ease-out forwards;}
@keyframes wml-spark{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}}

/* --- 11 铃铛声波 --- */
.wml-bell2{width:46px;height:46px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;position:relative;}
.wml-bell2.shake{animation:wml-bell2-shake .45s ease-in-out;}
@keyframes wml-bell2-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
.wml-bell2 .wml-wave2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--accent);border-radius:50%;opacity:0;width:46px;height:46px;pointer-events:none;}
.wml-bell2 .wml-wave2.go{animation:wml-wave2 .7s ease-out forwards;}
@keyframes wml-wave2{0%{width:46px;height:46px;opacity:.8}100%{width:120px;height:120px;opacity:0}}

/* --- 12 抽屉/弹层停顿 --- */
.wml-drawer2{position:relative;width:180px;height:90px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card);}
.wml-drawer2-panel{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--bg-card);border-top:2px solid var(--accent);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
.wml-drawer2.open .wml-drawer2-panel{transform:translateY(0);}
.wml-drawer2 .wml-trig{position:absolute;left:50%;top:8px;transform:translateX(-50%);padding:5px 14px;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:12px;cursor:pointer;}

/* --- 13 卡片翻面 --- */
.wml-flip{width:90px;height:64px;perspective:300px;cursor:pointer;}
.wml-flip-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.34,1.56,.64,1);transform-style:preserve-3d;}
.wml-flip.flipped .wml-flip-inner{transform:rotateY(180deg);}
.wml-flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:1px solid var(--border);}
.wml-flip-front{background:var(--bg-card);color:var(--text-primary);}
.wml-flip-back{background:var(--accent);color:#fff;transform:rotateY(180deg);}

/* --- 14 汉堡变形 --- */
.wml-burger2{width:40px;height:34px;background:transparent;border:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;}
.wml-burger2 span,.wml-burger2::before,.wml-burger2::after{display:block;width:28px;height:3px;background:var(--text-primary);border-radius:2px;position:absolute;transition:all .35s cubic-bezier(.34,1.56,.64,1);}
.wml-burger2::before{content:'';top:6px;}
.wml-burger2::after{content:'';bottom:6px;}
.wml-burger2 span{top:50%;margin-top:-1.5px;opacity:1;}
.wml-burger2.open span{opacity:0;transform:scaleX(0);}
.wml-burger2.open::before{top:50%;margin-top:-1.5px;transform:rotate(45deg);}
.wml-burger2.open::after{bottom:50%;margin-bottom:-1.5px;transform:rotate(-45deg);}

/* 移动端适配 */
@media (max-width:640px){.wml-grid{grid-template-columns:1fr;}.wml-demo{min-height:96px;}}