/* ============================================================
   Part 8 — Micro & Exit（マイクロ・退場） cards 106–120
   ============================================================ */

/* ---------- 106 Check Draw (m01-) ---------- */
.m01-wrap{
  animation:m01-pop 3.2s ease-in-out infinite;
}
.m01-ring{
  stroke-dasharray:189;
  stroke-dashoffset:189;
  animation:m01-ring 3.2s ease-in-out infinite;
}
.m01-check{
  stroke-dasharray:44;
  stroke-dashoffset:44;
  animation:m01-check 3.2s ease-out infinite;
}
@keyframes m01-ring{
  0%,6%{stroke-dashoffset:189}
  44%{stroke-dashoffset:0}
  93%{stroke-dashoffset:0}
  94%,100%{stroke-dashoffset:189}
}
@keyframes m01-check{
  0%,46%{stroke-dashoffset:44}
  60%{stroke-dashoffset:0}
  93%{stroke-dashoffset:0}
  94%,100%{stroke-dashoffset:44}
}
@keyframes m01-pop{
  0%,56%{transform:scale(1);opacity:1}
  62%{transform:scale(1.15)}
  68%{transform:scale(1)}
  86%{opacity:1}
  92%{opacity:0;transform:scale(1)}
  96%{opacity:0}
  100%{opacity:1;transform:scale(1)}
}

/* ---------- 107 Toggle (m02-) ---------- */
.m02-track{
  position:relative;
  width:92px;height:48px;
  border-radius:24px;
  background:var(--cd);
}
.m02-glow{
  position:absolute;inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,.45);
  opacity:0;
  animation:m02-glow 2.6s ease-in-out infinite;
}
.m02-knob{
  position:absolute;top:4px;left:4px;
  width:40px;height:40px;
  border-radius:50%;
  background:#fff;
  animation:m02-knob 2.6s cubic-bezier(.34,1.4,.64,1) infinite;
}
@keyframes m02-knob{
  0%,12%{transform:translateX(0) scale(1,1)}
  16%{transform:translateX(22px) scale(1.25,.8)}
  21%{transform:translateX(44px) scale(1,1)}
  58%{transform:translateX(44px) scale(1,1)}
  62%{transform:translateX(22px) scale(1.25,.8)}
  67%,100%{transform:translateX(0) scale(1,1)}
}
@keyframes m02-glow{
  0%,12%{opacity:0}
  21%{opacity:1}
  58%{opacity:1}
  67%,100%{opacity:0}
}

/* ---------- 108 Bell Ring (m03-) ---------- */
.m03-scene{
  position:relative;
  width:160px;height:100px;
  display:flex;align-items:center;justify-content:center;
}
.m03-bell{
  position:relative;
  width:54px;height:48px;
  background:#fff;
  border-radius:27px 27px 6px 6px;
  transform-origin:50% -8px;
  animation:m03-swing 2.6s ease-in-out infinite;
}
.m03-bell::before{
  content:"";position:absolute;
  top:-8px;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;
  background:#fff;
}
.m03-bell::after{
  content:"";position:absolute;
  bottom:-4px;left:-7px;
  width:68px;height:9px;border-radius:5px;
  background:#fff;
}
.m03-clap{
  position:absolute;
  bottom:-13px;left:50%;margin-left:-6px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;
}
.m03-wave{
  position:absolute;top:28px;
  width:30px;height:30px;
  border:4px solid transparent;
  border-radius:50%;
  opacity:0;
  animation:m03-wave 2.6s ease-out infinite;
}
.m03-wave--l{left:10px;border-left-color:#fff}
.m03-wave--r{right:10px;border-right-color:#fff}
@keyframes m03-swing{
  0%{transform:rotate(0deg)}
  6%{transform:rotate(15deg)}
  14%{transform:rotate(-12deg)}
  22%{transform:rotate(9deg)}
  30%{transform:rotate(-6deg)}
  38%{transform:rotate(3deg)}
  46%,100%{transform:rotate(0deg)}
}
@keyframes m03-wave{
  0%,4%{transform:scale(.5);opacity:0}
  11%{opacity:.95}
  19%{transform:scale(1.05);opacity:0}
  24%{transform:scale(.6);opacity:0}
  31%{opacity:.95}
  39%{transform:scale(1.1);opacity:0}
  100%{transform:scale(.6);opacity:0}
}

/* ---------- 109 Star Rating (m04-) ---------- */
.m04-row{
  animation:m04-pop 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
.m04-s{fill-opacity:0}
.m04-s1{animation:m04-f1 3.6s ease-out infinite}
.m04-s2{animation:m04-f2 3.6s ease-out infinite}
.m04-s3{animation:m04-f3 3.6s ease-out infinite}
.m04-s4{animation:m04-f4 3.6s ease-out infinite}
.m04-s5{animation:m04-f5 3.6s ease-out infinite}
@keyframes m04-f1{0%,8%{fill-opacity:0}14%{fill-opacity:1}84%{fill-opacity:1}90%,100%{fill-opacity:0}}
@keyframes m04-f2{0%,18%{fill-opacity:0}24%{fill-opacity:1}84%{fill-opacity:1}90%,100%{fill-opacity:0}}
@keyframes m04-f3{0%,28%{fill-opacity:0}34%{fill-opacity:1}84%{fill-opacity:1}90%,100%{fill-opacity:0}}
@keyframes m04-f4{0%,38%{fill-opacity:0}44%{fill-opacity:1}84%{fill-opacity:1}90%,100%{fill-opacity:0}}
@keyframes m04-f5{0%,48%{fill-opacity:0}54%{fill-opacity:1}84%{fill-opacity:1}90%,100%{fill-opacity:0}}
@keyframes m04-pop{
  0%,56%{transform:scale(1)}
  62%{transform:scale(1.18)}
  70%{transform:scale(1)}
  100%{transform:scale(1)}
}

/* ---------- 110 Paper Plane (m05-) ---------- */
.m05-lane{
  position:absolute;
  left:-20px;top:62%;
  width:280px;height:0;
  transform:rotate(-22deg);
  transform-origin:left center;
}
.m05-trail{
  position:absolute;
  left:30px;top:-2px;
  width:150px;height:4px;
  border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 6px,transparent 6px 15px);
  clip-path:inset(0 100% 0 0);
  animation:m05-dash 3s linear infinite;
}
.m05-plane{
  position:absolute;
  left:0;top:-17px;
  animation:m05-go 3s linear infinite;
}
.m05-plane-svg{
  display:block;
  animation:m05-bob 3s ease-in-out infinite;
}
@keyframes m05-go{
  0%{transform:translateX(-40px)}
  72%{transform:translateX(290px)}
  100%{transform:translateX(290px)}
}
@keyframes m05-bob{
  0%{transform:rotate(5deg) translateY(0)}
  25%{transform:rotate(-6deg) translateY(-6px)}
  50%{transform:rotate(3deg) translateY(0)}
  75%{transform:rotate(-4deg) translateY(-4px)}
  100%{transform:rotate(5deg) translateY(0)}
}
@keyframes m05-dash{
  0%,4%{clip-path:inset(0 100% 0 0);opacity:1}
  70%{clip-path:inset(0 0 0 0);opacity:1}
  84%{clip-path:inset(0 0 0 0);opacity:0}
  85%{clip-path:inset(0 100% 0 0);opacity:0}
  100%{clip-path:inset(0 100% 0 0);opacity:0}
}

/* ---------- 111 Trash Toss (m06-) ---------- */
.m06-scene{
  position:relative;
  width:96px;height:112px;
}
.m06-ball{
  position:absolute;
  top:52px;left:50%;margin-left:-7px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  z-index:1;
  animation:m06-ball 3.2s cubic-bezier(.5,0,.9,.6) infinite;
}
.m06-grp{
  position:absolute;inset:0;
  z-index:2;
  transform-origin:50% 92%;
  animation:m06-wig 3.2s ease-in-out infinite;
}
.m06-can{
  position:absolute;
  bottom:8px;left:50%;margin-left:-23px;
  width:46px;height:52px;
  background:#fff;
  border-radius:5px 5px 12px 12px;
  clip-path:polygon(4% 0,96% 0,88% 100%,12% 100%);
}
.m06-line{
  position:absolute;
  top:10px;width:4px;height:32px;
  border-radius:2px;
  background:var(--cd);
  opacity:.45;
}
.m06-line--1{left:14px}
.m06-line--2{right:14px}
.m06-lid{
  position:absolute;
  bottom:62px;left:50%;margin-left:-28px;
  width:56px;height:8px;
  border-radius:4px;
  background:#fff;
  transform-origin:100% 100%;
  animation:m06-lid 3.2s cubic-bezier(.34,1.3,.64,1) infinite;
}
.m06-lid::before{
  content:"";position:absolute;
  top:-6px;left:50%;margin-left:-8px;
  width:16px;height:6px;
  border-radius:3px 3px 0 0;
  background:#fff;
}
@keyframes m06-lid{
  0%,6%{transform:rotate(0deg)}
  14%{transform:rotate(-34deg)}
  36%{transform:rotate(-34deg)}
  44%,100%{transform:rotate(0deg)}
}
@keyframes m06-ball{
  0%,14%{transform:translateY(-110px);opacity:1}
  34%{transform:translateY(0);opacity:1}
  37%,100%{transform:translateY(5px);opacity:0}
}
@keyframes m06-wig{
  0%,44%{transform:rotate(0deg)}
  49%{transform:rotate(-5deg)}
  54%{transform:rotate(4deg)}
  59%{transform:rotate(-2deg)}
  64%,100%{transform:rotate(0deg)}
}

/* ---------- 112 Download (m07-) ---------- */
.m07-wrap{
  position:relative;
  width:100px;height:112px;
}
.m07-arrow{
  position:absolute;
  top:26px;left:50%;margin-left:-18px;
  width:36px;height:42px;
  background:#fff;
  clip-path:polygon(32% 0,68% 0,68% 46%,100% 46%,50% 100%,0 46%,32% 46%);
  animation:m07-drop 1.7s cubic-bezier(.5,0,.8,.5) infinite;
}
.m07-tray{
  position:absolute;
  bottom:8px;left:50%;margin-left:-37px;
  width:74px;height:18px;
  border:4px solid #fff;
  border-top:none;
  border-radius:0 0 10px 10px;
  animation:m07-bump 1.7s ease-out infinite;
}
@keyframes m07-drop{
  0%{transform:translateY(-42px);opacity:0}
  14%{transform:translateY(-32px);opacity:1}
  56%{transform:translateY(22px);opacity:1}
  70%{transform:translateY(27px);opacity:0}
  100%{transform:translateY(27px);opacity:0}
}
@keyframes m07-bump{
  0%,54%{transform:translateY(0) scaleX(1)}
  60%{transform:translateY(4px) scaleX(1.07)}
  70%,100%{transform:translateY(0) scaleX(1)}
}

/* ---------- 113 Badge Pop (m08-) ---------- */
.m08-scene{
  position:relative;
  width:134px;height:134px;
  display:flex;align-items:center;justify-content:center;
}
.m08-badge{
  width:62px;height:62px;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  animation:m08-pop 2.8s cubic-bezier(.34,1.56,.64,1) infinite;
}
.m08-star{
  width:34px;height:34px;
  background:var(--cd);
  clip-path:polygon(50% 2%,61% 36%,97% 36%,68% 58%,79% 92%,50% 71%,21% 92%,32% 58%,3% 36%,39% 36%);
}
.m08-ray{
  position:absolute;
  left:50%;top:50%;
  margin:-7px 0 0 -2px;
  width:4px;height:14px;
  border-radius:2px;
  background:#fff;
  opacity:0;
  animation:m08-ray 2.8s ease-out infinite;
}
@keyframes m08-pop{
  0%,6%{transform:scale(0);opacity:1}
  16%{transform:scale(1.18);opacity:1}
  24%{transform:scale(1);opacity:1}
  78%{transform:scale(1);opacity:1}
  86%,100%{transform:scale(.5);opacity:0}
}
@keyframes m08-ray{
  0%,10%{transform:rotate(var(--r)) translateY(-26px) scaleY(.3);opacity:0}
  16%{transform:rotate(var(--r)) translateY(-44px) scaleY(1);opacity:1}
  28%,100%{transform:rotate(var(--r)) translateY(-56px) scaleY(.5);opacity:0}
}

/* ---------- 114 Sink Away (m09-) ---------- */
.m09-blob{
  position:relative;
  width:62px;height:62px;
  border-radius:20px;
  background:#fff;
  animation:m09-sink 3.4s ease-in-out infinite;
}
.m09-eye{
  position:absolute;
  top:24px;width:8px;height:11px;
  border-radius:50%;
  background:var(--cd);
}
.m09-eye--l{left:16px}
.m09-eye--r{right:16px}
@keyframes m09-sink{
  0%,12%{transform:translateY(0);opacity:1;filter:blur(0)}
  34%{transform:translateY(48px);opacity:0;filter:blur(6px)}
  58%{transform:translateY(48px);opacity:0;filter:blur(6px)}
  60%{transform:translateY(46px);opacity:0;filter:blur(4px)}
  74%{transform:translateY(-7px);opacity:1;filter:blur(0)}
  82%{transform:translateY(0)}
  100%{transform:translateY(0);opacity:1;filter:blur(0)}
}

/* ---------- 115 Shrink Spin Out (m10-) ---------- */
.m10-sq{
  width:58px;height:58px;
  border-radius:14px;
  background:#fff;
  animation:m10-spin 3.4s ease-in-out infinite;
}
@keyframes m10-spin{
  0%,8%{transform:rotate(0deg) scale(1)}
  36%{transform:rotate(360deg) scale(0)}
  60%{transform:rotate(360deg) scale(0)}
  82%{transform:rotate(690deg) scale(1.12)}
  90%,100%{transform:rotate(720deg) scale(1)}
}

/* ---------- 116 Slide Away (m11-) ---------- */
.m11-chip{
  position:relative;
  width:54px;height:54px;
  border-radius:16px;
  background:#fff;
  animation:m11-go 3.2s linear infinite;
}
.m11-eye{
  position:absolute;
  top:20px;width:7px;height:10px;
  border-radius:50%;
  background:var(--cd);
}
.m11-eye--l{left:14px}
.m11-eye--r{right:14px}
@keyframes m11-go{
  0%,14%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.5)}
  38%{transform:translateX(172px);opacity:1}
  38.5%{transform:translateX(172px);opacity:0}
  39%{transform:translateX(-172px);opacity:0}
  39.5%{transform:translateX(-172px);opacity:1;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}
  72%{transform:translateX(0);opacity:1}
  100%{transform:translateX(0);opacity:1}
}

/* ---------- 117 Page Flip (m12-) ---------- */
.m12-book{
  position:relative;
  width:130px;height:86px;
  perspective:600px;
}
.m12-left{
  position:absolute;
  right:50%;top:7px;
  width:58px;height:72px;
  border-radius:8px 2px 2px 8px;
  background:var(--cd);
  opacity:.35;
}
.m12-base{
  position:absolute;
  left:50%;top:7px;
  width:58px;height:72px;
  border-radius:2px 8px 8px 2px;
  background:var(--cd);
  opacity:.55;
}
.m12-page{
  position:absolute;
  left:50%;top:7px;
  width:58px;height:72px;
  transform-style:preserve-3d;
  transform-origin:left center;
  animation:m12-flip 3s ease-in-out infinite;
}
.m12-front,.m12-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:2px 8px 8px 2px;
}
.m12-front{background:#fff}
.m12-back{
  background:var(--cd);
  transform:rotateY(180deg);
  border-radius:8px 2px 2px 8px;
}
.m12-txt{
  position:absolute;
  left:10px;height:5px;
  border-radius:3px;
  background:var(--cd);
  opacity:.45;
}
.m12-txt--1{top:14px;width:36px}
.m12-txt--2{top:28px;width:28px}
.m12-txt--3{top:42px;width:32px}
.m12-spine{
  position:absolute;
  left:50%;margin-left:-2px;top:4px;
  width:4px;height:78px;
  border-radius:2px;
  background:#fff;
}
@keyframes m12-flip{
  0%,14%{transform:rotateY(0deg);opacity:1}
  52%{transform:rotateY(-183deg);opacity:1}
  68%{transform:rotateY(-183deg);opacity:1}
  70%{transform:rotateY(-183deg);opacity:0}
  71%{transform:rotateY(0deg);opacity:0}
  78%{transform:rotateY(0deg);opacity:1}
  100%{transform:rotateY(0deg);opacity:1}
}

/* ---------- 118 Pop Burst (m13-) ---------- */
.m13-scene{
  position:relative;
  width:124px;height:124px;
  display:flex;align-items:center;justify-content:center;
}
.m13-ball{
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  animation:m13-ball 3s ease-in-out infinite;
}
.m13-dot{
  position:absolute;
  left:50%;top:50%;
  margin:-5px 0 0 -5px;
  width:10px;height:10px;
  border-radius:50%;
  background:#fff;
  opacity:0;
  animation:m13-dot 3s cubic-bezier(.2,.7,.5,1) infinite;
}
@keyframes m13-ball{
  0%,6%{transform:scale(1);opacity:1}
  16%{transform:scale(1.12);opacity:1}
  28%{transform:scale(1.3);opacity:1}
  32%{transform:scale(1.55);opacity:0}
  33%{transform:scale(0);opacity:0}
  62%{transform:scale(0);opacity:0}
  63%{transform:scale(0);opacity:1}
  80%{transform:scale(1.12);opacity:1}
  88%,100%{transform:scale(1);opacity:1}
}
@keyframes m13-dot{
  0%,29%{transform:rotate(var(--a)) translateY(-10px) scale(.4);opacity:0}
  32%{transform:rotate(var(--a)) translateY(-18px) scale(1);opacity:1}
  54%,100%{transform:rotate(var(--a)) translateY(-54px) scale(.5);opacity:0}
}

/* ---------- 119 Curtain Close (m14-) ---------- */
.m14-hero{
  position:relative;
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  animation:m14-bob 3s ease-in-out infinite;
}
.m14-eye{
  position:absolute;
  top:20px;width:7px;height:10px;
  border-radius:50%;
  background:var(--cd);
}
.m14-eye--l{left:14px}
.m14-eye--r{right:14px}
.m14-smile{
  position:absolute;
  top:30px;left:50%;margin-left:-8px;
  width:16px;height:9px;
  border-bottom:3px solid var(--cd);
  border-radius:0 0 16px 16px;
}
.m14-panel{
  position:absolute;
  top:0;bottom:0;
  width:56%;
  background:var(--cd);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 8px,transparent 8px 22px);
}
.m14-panel--l{
  left:-2px;
  border-radius:0 14px 14px 0;
  animation:m14-l 3s cubic-bezier(.65,0,.35,1) infinite;
}
.m14-panel--r{
  right:-2px;
  border-radius:14px 0 0 14px;
  animation:m14-r 3s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes m14-l{
  0%,18%{transform:translateX(-104%)}
  38%{transform:translateX(0)}
  62%{transform:translateX(0)}
  82%,100%{transform:translateX(-104%)}
}
@keyframes m14-r{
  0%,18%{transform:translateX(104%)}
  38%{transform:translateX(0)}
  62%{transform:translateX(0)}
  82%,100%{transform:translateX(104%)}
}
@keyframes m14-bob{
  0%{transform:translateY(0)}
  8%{transform:translateY(-6px)}
  16%{transform:translateY(0)}
  100%{transform:translateY(0)}
}

/* ---------- 120 Wink (m15-) ---------- */
.m15-scene{
  position:relative;
  width:130px;height:112px;
  display:flex;align-items:center;justify-content:center;
}
.m15-face{
  position:relative;
  width:90px;height:90px;
  border-radius:50%;
  background:#fff;
  animation:m15-tilt 2.6s ease-in-out infinite;
}
.m15-eye{
  position:absolute;
  top:32px;width:10px;height:13px;
  border-radius:50%;
  background:var(--cd);
}
.m15-eye--l{left:22px}
.m15-eye--r{
  right:22px;
  transform-origin:center;
  animation:m15-wink 2.6s ease-in-out infinite;
}
.m15-blush{
  position:absolute;
  top:50px;width:15px;height:9px;
  border-radius:50%;
  background:var(--cd);
  opacity:.3;
  animation:m15-blush 2.6s ease-in-out infinite;
}
.m15-blush--l{left:9px}
.m15-blush--r{right:9px}
.m15-mouth{
  position:absolute;
  top:52px;left:50%;margin-left:-13px;
  width:26px;height:14px;
  border-bottom:4px solid var(--cd);
  border-radius:0 0 26px 26px;
  transform-origin:50% 0;
  animation:m15-smile 2.6s ease-in-out infinite;
}
.m15-spark{
  position:absolute;
  top:4px;right:6px;
  width:18px;height:18px;
  background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  transform:scale(0);
  animation:m15-spark 2.6s ease-in-out infinite;
}
@keyframes m15-wink{
  0%,28%{transform:scaleY(1)}
  34%{transform:scaleY(.08)}
  56%{transform:scaleY(.08)}
  62%,100%{transform:scaleY(1)}
}
@keyframes m15-smile{
  0%,28%{transform:scaleX(1)}
  34%{transform:scaleX(1.3)}
  56%{transform:scaleX(1.3)}
  62%,100%{transform:scaleX(1)}
}
@keyframes m15-blush{
  0%,28%{opacity:.3}
  34%{opacity:.55}
  56%{opacity:.55}
  62%,100%{opacity:.3}
}
@keyframes m15-spark{
  0%,30%{transform:scale(0) rotate(0deg)}
  38%{transform:scale(1) rotate(20deg)}
  52%{transform:scale(1) rotate(30deg)}
  58%,100%{transform:scale(0) rotate(45deg)}
}
@keyframes m15-tilt{
  0%,28%{transform:rotate(0deg)}
  36%{transform:rotate(-5deg)}
  56%{transform:rotate(-5deg)}
  64%,100%{transform:rotate(0deg)}
}