/* gx-tomodi-mabo: ともぢ｜麻婆豆腐 専用の動き（麻辣メーター・花椒が落ちる見出し・さいの目に並ぶ写真ボード） 2026-10-20 */
/* ① 左下の麻辣メーター：読み進めるほど「麻・辣・酥・香・鮮・嫩・燙・捆」が一字ずつ灯る */
.mb-meter{position:fixed;left:14px;bottom:24px;z-index:58;pointer-events:none;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);border:1.5px solid #e4f3e9;border-radius:999px;padding:6px 12px 6px 8px;box-shadow:0 10px 24px -12px rgba(20,21,19,.35);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.mb-meter.mb-show{opacity:1;transform:none}
.mb-lb{font:800 8px/1 Montserrat,sans-serif;letter-spacing:.16em;color:#2c7d48;writing-mode:vertical-rl;transform:rotate(180deg);margin-right:1px}
.mb-row{display:flex;gap:3px}
.mb-k{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;font:700 11px/1 "Noto Sans JP",sans-serif;color:#9bb5a3;background:#f1f7f3;transition:background .35s,color .35s,transform .35s cubic-bezier(.2,.9,.2,1.4)}
.mb-k.on{background:#2c7d48;color:#fff;transform:scale(1.08)}
.mb-meter.mb-done .mb-k.on{animation:mbPop .55s cubic-bezier(.2,.9,.2,1.4) var(--i,0s) 1}
.mb-end{font:800 10px/1 "Noto Sans JP",sans-serif;color:#2c7d48;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s ease .3s}
.mb-meter.mb-done .mb-end{max-width:4em}
@keyframes mbPop{0%{transform:scale(1.08)}40%{transform:scale(1.3)}100%{transform:scale(1.08)}}
@media(max-width:880px){.mb-meter{left:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:4px 9px 4px 6px;gap:5px}.mb-lb{display:none}.mb-row{gap:2px}.mb-k{width:15px;height:15px;font-size:9px}.mb-end{font-size:9px}}

/* ② 章の見出し：英字の横に花椒の粒がぱらぱら落ち、見出しは豆腐のように一度だけぷるんと揺れる */
.ma-chead .sec-en{position:relative}
.mb-sansho{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle;height:8px}
.mb-sansho i{display:block;width:6px;height:6px;border-radius:50%;background:#389b5a;box-shadow:inset -1px -1px 0 rgba(20,21,19,.22);opacity:0;transform:translateY(-26px)}
.ma-chead.mb-in .mb-sansho i{animation:mbDrop .6s cubic-bezier(.3,.6,.35,1.35) var(--d,0s) 1 forwards}
@keyframes mbDrop{0%{opacity:0;transform:translateY(-26px)}55%{opacity:1;transform:translateY(1px)}75%{transform:translateY(-3px)}100%{opacity:1;transform:none}}
html.mb-js .ma-chead .sec-jp{transform-origin:50% 100%}
html.mb-js .ma-chead.mb-in .sec-jp{animation:mbJiggle .9s cubic-bezier(.3,.7,.3,1) .35s 1}
@keyframes mbJiggle{0%{transform:none}22%{transform:scale(1.025,.965)}44%{transform:scale(.99,1.02)}66%{transform:scale(1.008,.994)}100%{transform:none}}

/* ④ 写真ボード：さいの目の豆腐のように、上から落ちて、ぷるんと着地する */
html.mb-js #world .ma-tile{opacity:0;transform:translateY(-34px);transform-origin:50% 100%}
html.mb-js #world .ma-board.mb-in .ma-tile{animation:mbLand .85s cubic-bezier(.3,.7,.3,1) var(--k,0s) 1 forwards}
@keyframes mbLand{0%{opacity:0;transform:translateY(-34px)}45%{opacity:1;transform:translateY(0) scale(1,1)}62%{transform:scale(1.035,.95)}80%{transform:scale(.99,1.02)}100%{opacity:1;transform:none}}

/* カードに触れると緑の縁 */
html.mb-js .ma-card{transition:box-shadow .4s,transform .4s}
html.mb-js .ma-card:hover{box-shadow:0 0 0 1.5px #389b5a,0 22px 36px -22px rgba(20,21,19,.45);transform:translateY(-3px)}

@media(prefers-reduced-motion:reduce){.mb-meter,.mb-sansho{display:none}html.mb-js .ma-chead .sec-jp,html.mb-js #world .ma-tile{animation:none!important;opacity:1;transform:none}}