/* gx-masaneko: まさ猫😸栃木グルメ🍴 専用の動き（食べ歩きメーター・盛りつける見出し・湯気の立つ写真・配膳される写真ボード） 2026-10-20 */
/* ① 左下の食べ歩きメーター：読み進めるほど、お椀が満たされていく */
.mz-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 7px;box-shadow:0 10px 24px -12px rgba(20,21,19,.35);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.mz-meter.mz-show{opacity:1;transform:none}
.mz-bowl{width:34px;height:34px;display:block}
.mz-bowl .mz-fill{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s ease}
.mz-txt{display:flex;flex-direction:column;line-height:1.15}
.mz-lb{font:800 8px/1 Montserrat,sans-serif;letter-spacing:.16em;color:#2c7d48}
.mz-pc{font:800 13px/1.2 Montserrat,sans-serif;color:#141513;font-variant-numeric:tabular-nums}
.mz-meter.mz-done .mz-pc{color:#2c7d48}
.mz-meter.mz-done .mz-bowl{animation:mzBob .6s cubic-bezier(.2,.9,.2,1.3) 1}
@keyframes mzBob{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-6deg)}100%{transform:none}}
@media(max-width:880px){.mz-meter{left:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:4px 10px 4px 5px;gap:6px}.mz-bowl{width:26px;height:26px}.mz-lb{display:none}.mz-pc{font-size:11px}}

/* ② 章の見出し：言葉のまとまりごとに、ひと皿ずつ盛りつけるように */
.mz-w{display:inline-block;opacity:0;transform:translateY(-.55em);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1.25);transition-delay:var(--d,0s)}
.ma-chead.mz-in .mz-w{opacity:1;transform:none}
.ma-chead .sec-en{position:relative;display:table}
.ma-chead .sec-en::after{content:"";position:absolute;left:0;right:0;bottom:-4px;border-bottom:2px dotted #389b5a;transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.3,.7,.2,1) .15s}
.ma-chead.mz-in .sec-en::after{transform:scaleX(1)}

/* ③ 写真：見えたときに一度だけ、湯気が立ちのぼる */
.mz-steam{position:absolute;left:50%;top:6%;width:84px;height:70px;margin-left:-42px;pointer-events:none;z-index:2;opacity:0}
.mz-steam path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;filter:drop-shadow(0 1px 2px rgba(20,21,19,.25))}
.mz-hot.mz-in .mz-steam{animation:mzSteam 2.2s ease-out .25s 1 both}
.mz-hot.mz-in .mz-steam path{animation:mzDraw 1.6s ease-out .25s 1 forwards}
.mz-hot.mz-in .mz-steam path:nth-child(2){animation-delay:.45s}
.mz-hot.mz-in .mz-steam path:nth-child(3){animation-delay:.65s}
@keyframes mzSteam{0%{opacity:0;transform:translateY(16px)}25%{opacity:.95}100%{opacity:0;transform:translateY(-22px)}}
@keyframes mzDraw{to{stroke-dashoffset:0}}
html.mz-js .mz-hot img{transform:scale(1.035);transition:transform 1.4s cubic-bezier(.25,.7,.2,1)}
html.mz-js .mz-hot.mz-in img{transform:none}
@media(max-width:640px){.mz-steam{width:64px;height:54px;margin-left:-32px}}

/* ④ 写真ボード：一皿ずつ、テーブルに配膳されるように */
html.mz-js #world .ma-tile{opacity:0;transform:translateY(-18px) rotate(-5deg) scale(.96);transition:opacity .5s ease var(--k,0s),transform .75s cubic-bezier(.2,.9,.25,1.2) var(--k,0s)}
html.mz-js #world .ma-board.mz-in .ma-tile{opacity:1;transform:none}

/* カードに触れると緑の縁 */
html.mz-js .ma-card{transition:box-shadow .4s,transform .4s}
html.mz-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){.mz-meter{display:none}.mz-w{opacity:1;transform:none;transition:none}.ma-chead .sec-en::after{transform:none;transition:none}.mz-steam{display:none}html.mz-js .mz-hot img,html.mz-js #world .ma-tile{opacity:1;transform:none;transition:none}}