/* MUKIAI v2 動く3Dのサムネイル（thumbs.js と組で使う）。親の箱いっぱいに広がる。中の <img> は代替の静止画。
   背景は透明（下の宇宙がそのまま見える）。絵の四辺はマスクで空間へ消えるので、枠が無くても四角い切れ目が出ない。 */
.thumb3d{position:absolute;inset:0;overflow:hidden;background:none;
  --thumb-fade:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.thumb3d>img,.thumb3d>canvas{-webkit-mask-image:var(--thumb-fade);mask-image:var(--thumb-fade);-webkit-mask-composite:source-in;mask-composite:intersect}
.thumb3d>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 600ms ease}
.thumb3d>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none;transition:opacity 900ms ease}
.thumb3d.is-live>canvas{opacity:1}
.thumb3d.is-live>img{opacity:0}