/* ═══ 19zzm-motion.css ═══ サイトの「動き」（2026-11-08、持ち主「静的から動的に。見やすく楽しく」）
   雰囲気：モダンでシンプル、でも華がある。青・黄・緑の光をごく薄く。
   動かすのは transform と opacity だけ。隠れた画面（[hidden]＝display:none）と、窓が隠れているとき（html.tabhid）は止まる。
   止める：OS の「視覚効果を減らす」か、マイページの「動きの強さ＝控えめ」（html.mcalm）。どちらでも下の動きは全部切れる。
   js：19zzm-motion.js */

:root{--mo-ease:cubic-bezier(.2,.8,.2,1);--mo-spring:cubic-bezier(.2,1.35,.4,1);--mo-a:95,208,255;--mo-b:255,194,71;--mo-c:123,236,156}

/* ── 動かない版でも要るもの：押したときの沈み（transform の短い変化。控えめでも残す） ── */
.btn:active:not(:disabled),.gl:active,.arccard:active,.ahcard:active,.f3:active,.fsrow:active{transform:scale(.97)}

@media (prefers-reduced-motion:no-preference){
html:not(.mcalm){

/* ── 画面の切り替え：[hidden] が外れて表示されるたびに、下からふわっと ── */
main>section:not([hidden]):not(#v-zen):not(#v-kanade):not(#v-rule){animation:mo-view .38s var(--mo-ease) backwards}
@keyframes mo-view{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ── ホームの棚：1 枚ずつ登場 → ホバーでわずかに浮いて、カーソルの位置に光 ── */
.glaunch>.gl,#hfeed>.hc,#hfeed>.hcslot>.rc,#rcol>.rc{animation:mo-card .55s var(--mo-spring) backwards;animation-delay:calc(min(var(--i,0),10)*48ms + 60ms)}
#hfeed>.hc:hover{transform:translate3d(0,-3px,0)}
.sdi:hover{transform:translate3d(2px,0,0)}
@keyframes mo-card{from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}to{opacity:1;transform:none}}
.gl,.arccard,.ahcard,.f3{transition:transform .2s var(--mo-spring),box-shadow .2s,border-color .2s,filter .2s}
.gl:hover,.f3:hover{transform:translate3d(0,-4px,0);box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 1px rgba(var(--mo-a),.35)}
.gl::after,.arccard::after,.ahcard::after,.f3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),rgba(var(--mo-a),.18),rgba(var(--mo-b),.06) 55%,transparent 75%)}
.gl:hover::after,.arccard:hover::after,.ahcard:hover::after,.f3:hover::after{opacity:1}
.f3{position:relative}
.gl i,.f3 i{display:inline-block;transition:transform .35s var(--mo-spring)}
.gl:hover i,.f3:hover i{transform:translate3d(0,-2px,0) scale(1.14) rotate(-5deg)}

/* ── 背景：青・黄・緑のにじみがゆっくり漂う（ホームだけ。画面が隠れる／窓が隠れると止まる） ── */
#v-games::before{content:"";position:fixed;inset:-25% -15%;z-index:-1;pointer-events:none;opacity:.9;
  background:radial-gradient(38% 34% at 18% 22%,rgba(var(--mo-a),.11),transparent 70%),
             radial-gradient(34% 30% at 82% 30%,rgba(var(--mo-b),.08),transparent 70%),
             radial-gradient(40% 34% at 50% 88%,rgba(var(--mo-c),.08),transparent 70%);
  animation:mo-drift 36s ease-in-out infinite alternate;will-change:transform}
@keyframes mo-drift{from{transform:translate3d(-2%,-1.5%,0) rotate(-1deg) scale(1)}to{transform:translate3d(2.5%,2%,0) rotate(1.5deg) scale(1.06)}}
&.tabhid #v-games::before{animation-play-state:paused}

/* ── 見出しの下線が伸びる ── */
#v-games>h2{position:relative;width:fit-content}
#v-games>h2::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;transform-origin:left;
  background:linear-gradient(90deg,rgb(var(--mo-a)),rgb(var(--mo-b)),rgb(var(--mo-c)));animation:mo-line .9s .25s var(--mo-ease) both}
@keyframes mo-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 「ここから」の札：やさしく脈打つ ── */
.fsrow.next{animation:mo-nudge 2.4s ease-in-out infinite}
@keyframes mo-nudge{0%,100%{box-shadow:0 0 0 0 rgba(var(--mo-b),0)}50%{box-shadow:0 0 0 5px rgba(var(--mo-b),.16)}}
&.tabhid .fsrow.next{animation-play-state:paused}

/* ── 波紋（ボタン・カード・帯のボタン） ── */
.ripw{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.ripw i{position:absolute;left:var(--rx);top:var(--ry);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(var(--mo-a),.38);
  transform:scale(0);opacity:1;animation:mo-rip .6s var(--mo-ease) forwards}
@keyframes mo-rip{to{transform:scale(var(--rs,12));opacity:0}}
.ripho{position:relative}

/* ── トースト：下からはずんで入る。種類で縁の色 ── */
.toast{animation:mo-toast .42s var(--mo-spring) backwards;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.toast.g{box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 18px rgba(var(--mo-b),.22)}
@keyframes mo-toast{from{opacity:0;transform:translate3d(0,16px,0) scale(.94)}to{opacity:1;transform:none}}

/* ── 数字が変わったとき：ぽんと跳ねる（js が .mo-pop を付ける） ── */
.mo-pop{animation:mo-pop .45s var(--mo-spring)}
@keyframes mo-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.mo-pop{display:inline-block}

/* ── 「みんな」の進み具合：棒が伸び、いま進んでいる先端が光る ── */
.togbar i u{transform-origin:left;animation:mo-grow 1s .1s var(--mo-ease) both}
@keyframes mo-grow{from{transform:scaleX(0)}to{transform:none}}
/* ── ゲーム感：XP・ミッションの棒が伸び、レベルの札がはずみ、カードが順に出る ── */
.xpbar>div,.mbar>div{transform-origin:left;animation:mo-grow .9s .15s var(--mo-ease) both}
.lvbadge{animation:mo-pop .7s .1s var(--mo-spring) backwards}
.msbonus.done{animation:mo-nudge 2.4s ease-in-out 2}
#dash .dcard,#v-me>.card{animation:mo-card .5s var(--mo-ease) backwards;animation-delay:calc(min(var(--i,0),8)*60ms)}
.togfeed li{animation:mo-feed .4s var(--mo-ease) backwards;animation-delay:calc(min(var(--i,0),8)*50ms)}
@keyframes mo-feed{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:none}}
}
}

@media (max-width:760px){
  .gl:hover,.f3:hover{transform:none;box-shadow:none}   /* スマホは押したとき（:active）の沈みだけ */
}