/* ポップアップの開く・閉じる動き（modal-fx.js と組）。開く＝@keyframes（表示された最初の1コマから必ず動く） */
.modal.is-enter .modal__back{animation:mfx-fade .38s ease both}
.modal.is-leave .modal__back{opacity:0;transition:opacity .32s ease}
@keyframes mfx-fade{from{opacity:0}to{opacity:1}}

/* 案1：下から浮き上がり、少し傾いて着地する紙。中身は写真→文字の順に遅れて入る */
html[data-mx="1"] .modal.is-enter .modal__panel{animation:mfx-rise .62s cubic-bezier(.2,1.25,.35,1) both}
@keyframes mfx-rise{from{opacity:0;transform:translateY(46px) scale(.94) rotate(-1.6deg)}35%{opacity:1}to{opacity:1;transform:none}}
html[data-mx="1"] .modal.is-enter .mm__media{animation:mfx-left .55s cubic-bezier(.16,1,.3,1) .16s both}
html[data-mx="1"] .modal.is-enter .mm__info,html[data-mx="1"] .modal.is-enter .msteps,html[data-mx="1"] .modal.is-enter .ms__video{animation:mfx-up .55s cubic-bezier(.16,1,.3,1) .26s both}
@keyframes mfx-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes mfx-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html[data-mx="1"] .modal.is-leave .modal__panel{opacity:0;transform:translateY(30px) scale(.96) rotate(1deg);transition:opacity .3s ease,transform .34s cubic-bezier(.5,0,.75,0)}

/* 案2：押したカードの位置・大きさから、画面いっぱいへ広がる（閉じると押したカードへ戻る） */
html[data-mx="2"] .modal.is-enter .modal__panel{animation:mfx-grow .56s cubic-bezier(.16,1,.3,1) both}
@keyframes mfx-grow{from{opacity:.25;transform:translate(var(--fx-x,0px),var(--fx-y,40px)) scale(var(--fx-s,.6))}to{opacity:1;transform:none}}
html[data-mx="2"] .modal.is-enter .mm__body>*,html[data-mx="2"] .modal.is-enter .msteps,html[data-mx="2"] .modal.is-enter .ms__video{animation:mfx-fade .35s ease .3s both}
html[data-mx="2"] .modal.is-leave .modal__panel{opacity:0;transform:translate(var(--fx-x,0px),var(--fx-y,40px)) scale(var(--fx-s,.6));transition:opacity .3s ease .05s,transform .34s cubic-bezier(.7,0,.84,0)}
/* 開いた時にスクロールバーが消えて横にずれないように */
html{scrollbar-gutter:stable}