/* gx-manyan: まにゃん専用の動き（足あと・いちご・ぷるん・カメラのフラッシュ） 2026-10-16 */
/* ① 章の左に残る足あと */
.ma-ch{position:relative}
.gx-paws{position:absolute;left:14px;top:60px;bottom:60px;width:52px;pointer-events:none;z-index:1}
.gx-paw{position:absolute;width:32px;height:32px;opacity:0;transform:scale(1.6) rotate(var(--gr,0deg));fill:#389b5a}
.ma-ch.gx-in .gx-paw{animation:gxPaw .5s cubic-bezier(.2,1.3,.4,1) forwards}
.ma-ch.gx-in .gx-paw:nth-child(2){animation-delay:.22s}.ma-ch.gx-in .gx-paw:nth-child(3){animation-delay:.44s}.ma-ch.gx-in .gx-paw:nth-child(4){animation-delay:.66s}.ma-ch.gx-in .gx-paw:nth-child(5){animation-delay:.88s}
@keyframes gxPaw{0%{opacity:0;transform:scale(1.6) rotate(var(--gr,0deg))}70%{opacity:.7;transform:scale(.92) rotate(var(--gr,0deg))}100%{opacity:.6;transform:scale(1) rotate(var(--gr,0deg))}}
@media(max-width:900px){.gx-paws{left:1px;width:20px}.gx-paw{width:15px;height:15px}}

/* ② 文字帯を横切るキャラクターが足あとを残す */
.ma-mq{position:relative}
.gx-mqp{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.gx-mqp .gx-paw{opacity:0;animation:gxPaw2 .4s ease-out forwards;fill:#ffffff}
@keyframes gxPaw2{0%{opacity:0;transform:scale(1.5) rotate(var(--gr,0deg))}100%{opacity:.7;transform:scale(1) rotate(var(--gr,0deg))}}

/* ③ いちごが飛び出す（冒頭のいちご気球の写真／横切るキャラクターをタップ） */
.gx-berry{position:fixed;left:0;top:0;width:22px;height:26px;pointer-events:none;z-index:120;will-change:transform;animation:gxBurst .95s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gxBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}60%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot))}}
.ma-hero .ma-circ,.ma-walker{cursor:pointer}

/* ④ 投稿カードがぷるんと並ぶ */
html.gx-js .ma-tl-card{opacity:0;transform:translateY(18px) scale(.96)}
html.gx-js .ma-tl-card.gx-in{animation:gxJelly .95s cubic-bezier(.2,1.2,.4,1) forwards}
.ma-tl-card.gx-in:nth-child(2){animation-delay:.1s}.ma-tl-card.gx-in:nth-child(3){animation-delay:.2s}.ma-tl-card.gx-in:nth-child(4){animation-delay:.3s}.ma-tl-card.gx-in:nth-child(5){animation-delay:.4s}.ma-tl-card.gx-in:nth-child(6){animation-delay:.5s}
@keyframes gxJelly{0%{opacity:0;transform:translateY(18px) scale(.96)}55%{opacity:1;transform:translateY(-4px) scale(1.03,.97)}75%{transform:translateY(0) scale(.985,1.015)}100%{opacity:1;transform:none}}

/* ⑤ ポラロイド写真が見えたとき、カメラのフラッシュ */
.ma-snap{position:relative}
.ma-snap::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;border-radius:inherit;z-index:5}
.ma-snap.gx-flash::after{animation:gxFlash .55s ease-out}
@keyframes gxFlash{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){.gx-paws,.gx-mqp,.gx-berry{display:none}html.gx-js .ma-tl-card{opacity:1;transform:none;animation:none}.ma-snap.gx-flash::after{animation:none}}