/* gx-machi: Machi 9割那須地区グルメ 専用の動き（カメラロール・打ち込む見出し・現像する写真・保存の合図） 2026-10-19 */
/* ① 左下のカメラロール：読み進めて目にした写真が、一枚ずつ保存されていく */
.mx-roll{position:fixed;left:14px;bottom:24px;z-index:58;pointer-events:none;background:rgba(255,255,255,.96);border:1.5px solid #e4f3e9;border-radius:14px;padding:7px 8px 8px;box-shadow:0 10px 24px -12px rgba(20,21,19,.35);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.mx-roll.mx-show{opacity:1;transform:none}
.mx-roll-lb{display:block;font:800 8px/1 Montserrat,sans-serif;letter-spacing:.16em;color:#2c7d48;margin:0 0 6px 2px}
.mx-roll-row{display:flex;gap:4px}
.mx-roll-row i{display:block;width:30px;height:30px;border-radius:6px;background:#eef6f0 50% 50%/cover no-repeat;transform:scale(.6);opacity:.45;transition:transform .45s cubic-bezier(.2,.9,.2,1.2),opacity .45s}
.mx-roll-row i.on{transform:none;opacity:1}
.mx-roll::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none}
.mx-roll.mx-snap::after{animation:mxFlash .5s ease-out 1}
.mx-roll.mx-snap .mx-roll-row i:first-child{animation:mxPop .5s cubic-bezier(.2,.9,.2,1.3) 1}
@keyframes mxFlash{0%{opacity:.9}100%{opacity:0}}
@keyframes mxPop{0%{transform:scale(.5)}100%{transform:none}}
@media(max-width:880px){.mx-roll{left:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:5px 6px 6px;border-radius:12px}.mx-roll-lb{font-size:7px;margin-bottom:4px}.mx-roll-row i{width:22px;height:22px;border-radius:5px}}

/* ② 章の見出し：文章を打つように一文字ずつ。最後にカーソルが三回だけ点滅して消える */
.mx-ch{opacity:0;transition:opacity .08s linear;transition-delay:var(--d,0s)}
.ma-chead.mx-in .mx-ch{opacity:1}
.mx-caret{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;background:#389b5a;opacity:0}
.ma-chead.mx-in .mx-caret{animation:mxCaret .5s steps(1) var(--d,0s) 3 both,mxCaretOut .4s ease var(--d,0s) 1 forwards;animation-delay:var(--d,0s),calc(var(--d,0s) + 1.5s)}
@keyframes mxCaret{0%{opacity:1}50%{opacity:0}}
@keyframes mxCaretOut{to{opacity:0;width:0;margin-left:0}}
.ma-chead .sec-en{position:relative;display:table}
.ma-chead .sec-en::before{content:"# ";color:#389b5a;opacity:0;transition:opacity .5s .1s}
.ma-chead.mx-in .sec-en::before{opacity:1}

/* ③ 写真：見えたときに一度だけ、現像するように色づく */
html.mx-js img.mx-dev{filter:grayscale(.85) brightness(1.12) contrast(.9) blur(2px);transition:filter 1.5s cubic-bezier(.3,.6,.2,1)}
html.mx-js img.mx-dev.mx-in{filter:none}

/* ④ 写真ボード：保存の合図（シャッターの光とチェック） */
.mx-flash{position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;z-index:2}
.mx-check{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:#2c7d48;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 6px 12px -4px rgba(20,21,19,.4);transform:scale(0);z-index:3;pointer-events:none}
.ma-board.mx-in .mx-flash{animation:mxFlash .55s ease-out var(--k,0s) 1}
.ma-board.mx-in .mx-check{animation:mxCheck .5s cubic-bezier(.2,.9,.2,1.35) calc(var(--k,0s) + .3s) 1 forwards}
@keyframes mxCheck{0%{transform:scale(0)}100%{transform:scale(1)}}
@media(max-width:640px){.mx-check{width:20px;height:20px;left:6px;top:6px}.mx-check svg{width:12px;height:12px}}

/* カードに触れると緑の縁 */
html.mx-js .ma-card{transition:box-shadow .4s,transform .4s}
html.mx-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){.mx-roll{display:none}.mx-ch{opacity:1;transition:none}.mx-caret{display:none}img.mx-dev{filter:none!important;transition:none}.mx-flash,.mx-check{display:none}}