/* 文章頁「接著讀／下一篇」的小人偶（2026-10-25 使用者：好好選角色家族，像小朋友一樣搶著說「選我選我」）。
   人偶站在卡片外框的右上緣（不壓圖片）：平常只從卡片上緣後面探出半顆頭，輪到的那隻彈上來做動作、在旁邊冒對話泡泡。
   點擊比例由角色在泡泡裡說。規則在 public/js/next-mascot.js */
/* 卡片上方留位置給人偶（乾淨模式不留） */
body:not(.pc-clean) .a3-rel.mz-on .a3-rel-s { margin-bottom: 64px; }
body:not(.pc-clean) .a3-rel.mz-on .a3-rel-g { row-gap: 84px; }
body:not(.pc-clean) .mz-next { margin-top: 70px; }
.a3-rc { position: relative; }
.mzh { position: absolute; top: 0; right: 12px; width: 0; height: 0; z-index: 2; pointer-events: none; }
.mz-next { position: relative; height: 0; }
.mz-next .mzh { right: 22px; }
.mz { position: absolute; right: 0; bottom: 0; width: 50px; height: 62px; clip-path: inset(-90px -90px 0 -90px); }   /* 下緣以下切掉＝從卡片上緣後面探頭 */
.mz svg { position: absolute; left: 0; bottom: 0; width: 50px; height: 62px; overflow: visible; transform: translateY(58%); transition: transform .38s cubic-bezier(.3, 1.5, .5, 1); }
.mz.on svg { transform: translateY(4%); }
.mz .b { transform-box: view-box; transform-origin: 32px 74px; }
.mz .aL, .mz .aR { transform-box: view-box; }
.mz .ey { transform-box: view-box; transform-origin: 32px 30px; }
/* 對話泡泡：人偶左邊、卡片上緣外面 */
.mzb { position: absolute; right: 54px; bottom: 10px; width: max-content; max-width: 210px; padding: 6px 10px; border-radius: 12px 12px 3px 12px; background: #fff; border: 1.5px solid #0b7a5c; color: #0f2a20; font: 700 12.5px/1.45 "Noto Sans TC", sans-serif; box-shadow: 0 3px 10px rgba(11, 60, 45, .14); opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 100% 100%; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mzb.on { opacity: 1; transform: none; }
/* 姿勢（輪到才播一次） */
.mz.p-wave .aR { animation: mzWave .5s ease-in-out 4 alternate; }
.mz.p-jump .b { animation: mzJump .7s ease-in-out 2; }
.mz.p-point .aL { animation: mzPoint 1.6s ease-in-out 1 forwards; }
.mz.p-point .b { animation: mzLean 1.6s ease-in-out 1 forwards; }
.mz.p-spin .b { animation: mzSpin .9s ease-in-out 1; }
.mz.p-both .aL { animation: mzWaveL .45s ease-in-out 4 alternate; }
.mz.p-both .aR { animation: mzWave .45s ease-in-out 4 alternate; }
.mz.p-both .b { animation: mzHop .45s ease-in-out 4 alternate; }
.mz.p-peek svg { transition-duration: .6s; }
.mz.on .ey { animation: mzBlink 2.6s 1 .9s; }
/* 小幅度（系統開了「減少動態效果」）：人偶一直站著，輪到的只輕輕上下浮、眨眼，泡泡淡入淡出 */
.mz.calm svg { transform: translateY(4%); transition: none; }
.mz.calm.p-float .b { animation: mzFloat 1.3s ease-in-out 2 alternate; }
.mz.calm.p-float .ey { animation: mzBlink 2.6s 1 .5s; }
.mzb.calm { transform: none; transition: opacity .5s; }
@keyframes mzWave { from { transform: rotate(-115deg); } to { transform: rotate(-160deg); } }
@keyframes mzWaveL { from { transform: rotate(115deg); } to { transform: rotate(160deg); } }
@keyframes mzJump { 0%, 100% { transform: none; } 20% { transform: scale(1.08, .9); } 50% { transform: translateY(-12px) scale(.95, 1.06); } 80% { transform: scale(1.06, .94); } }
@keyframes mzHop { from { transform: none; } to { transform: translateY(-4px); } }
@keyframes mzPoint { 0% { transform: none; } 25%, 100% { transform: rotate(70deg); } }
@keyframes mzLean { 0% { transform: none; } 25%, 100% { transform: rotate(-7deg); } }
@keyframes mzSpin { 0%, 100% { transform: none; } 50% { transform: scaleX(-1) translateY(-6px); } }
@keyframes mzFloat { from { transform: none; } to { transform: translateY(-3px); } }
@keyframes mzBlink { 0%, 6%, 100% { transform: none; } 3% { transform: scaleY(.1); } }
/* 乾淨模式（body.pc-clean）：人偶、泡泡、點擊比例全部不出現，動畫也停（next-mascot.js 同時停掉輪播） */
.pc-clean .mzh { display: none !important; }
/* 下一篇大卡的 .a3-next div { padding } 不會套到這裡（人偶在大卡外面）；比例是 span */
@media (max-width: 720px) {
  body:not(.pc-clean) .a3-rel.mz-on .a3-rel-g { row-gap: 84px; }
  .mzb { max-width: 220px; }
}