/* ============================================================
   Part 1 — Entrance（登場） cards 001–015
   All selectors prefixed e01- … e15-
   ============================================================ */

/* ---------- 001 Fade In ---------- */
.e01-box{
  width:64px;height:64px;border-radius:18px;background:#fff;
  position:relative;
  animation:e01-fade 2.4s ease-in-out infinite;
}
.e01-box::before{ /* eyes */
  content:"";position:absolute;top:24px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:16px 0 0 var(--cd);transform:translateX(-11.5px);
}
.e01-box::after{ /* smile */
  content:"";position:absolute;top:37px;left:50%;width:12px;height:6px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 12px 12px;
  transform:translateX(-50%);
}
@keyframes e01-fade{
  0%{opacity:0}
  30%{opacity:1}
  70%{opacity:1}
  88%{opacity:0}
  100%{opacity:0}
}

/* ---------- 002 Slide In Left ---------- */
.e02-box{
  width:64px;height:64px;border-radius:18px;background:#fff;
  position:relative;
  animation:e02-slide 2.8s ease-out infinite;
}
.e02-box::before{
  content:"";position:absolute;top:24px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:16px 0 0 var(--cd);transform:translateX(-11.5px);
}
.e02-box::after{
  content:"";position:absolute;top:38px;left:50%;width:12px;height:6px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 12px 12px;
  transform:translateX(-50%);
}
@keyframes e02-slide{
  0%{transform:translateX(-180px);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  32%{transform:translateX(0);opacity:1}
  74%{transform:translateX(0);opacity:1}
  86%{transform:translateX(0);opacity:0}
  100%{transform:translateX(-180px);opacity:0}
}

/* ---------- 003 Rise Up ---------- */
.e03-box{
  width:60px;height:60px;border-radius:18px;background:#fff;
  position:relative;
  animation:e03-rise 2.6s ease-in-out infinite;
}
.e03-box::before{
  content:"";position:absolute;top:22px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:16px 0 0 var(--cd);transform:translateX(-11.5px);
}
.e03-box::after{
  content:"";position:absolute;top:35px;left:50%;width:12px;height:6px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 12px 12px;
  transform:translateX(-50%);
}
@keyframes e03-rise{
  0%{transform:translateY(130px);opacity:1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  32%{transform:translateY(-14px)}
  44%{transform:translateY(6px)}
  54%{transform:translateY(0)}
  78%{transform:translateY(0);opacity:1}
  90%{transform:translateY(0);opacity:0}
  100%{transform:translateY(130px);opacity:0}
}

/* ---------- 004 Zoom Pop ---------- */
.e04-box{
  width:64px;height:64px;border-radius:20px;background:#fff;
  position:relative;
  animation:e04-pop 2.4s infinite;
}
.e04-box::before{
  content:"";position:absolute;top:24px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:16px 0 0 var(--cd);transform:translateX(-11.5px);
}
.e04-box::after{
  content:"";position:absolute;top:37px;left:50%;width:14px;height:7px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 14px 14px;
  transform:translateX(-50%);
}
@keyframes e04-pop{
  0%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  38%{transform:scale(1.15)}
  52%{transform:scale(.94)}
  64%{transform:scale(1)}
  84%{transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  96%{transform:scale(0)}
  100%{transform:scale(0)}
}

/* ---------- 005 Flip In X ---------- */
.e05-persp{
  perspective:420px;
  display:flex;align-items:center;justify-content:center;
}
.e05-card{
  width:70px;height:70px;border-radius:18px;background:#fff;
  position:relative;
  animation:e05-flip 2.8s ease-in-out infinite;
}
.e05-card::before{ /* two little text-ish bars */
  content:"";position:absolute;top:26px;left:50%;width:34px;height:5px;border-radius:3px;
  background:var(--cd);transform:translateX(-50%);
  box-shadow:0 12px 0 -1px rgba(0,0,0,0);
}
.e05-card::after{
  content:"";position:absolute;top:40px;left:50%;width:20px;height:5px;border-radius:3px;
  background:rgba(0,0,0,0);background:var(--cd);opacity:.55;transform:translateX(-50%);
}
@keyframes e05-flip{
  0%{transform:rotateX(-90deg);opacity:0}
  12%{opacity:1}
  38%{transform:rotateX(14deg)}
  54%{transform:rotateX(-7deg)}
  66%{transform:rotateX(0deg)}
  84%{transform:rotateX(0deg);opacity:1}
  94%{transform:rotateX(-90deg);opacity:0}
  100%{transform:rotateX(-90deg);opacity:0}
}

/* ---------- 006 Flip In Y ---------- */
.e06-persp{
  perspective:420px;
  display:flex;align-items:center;justify-content:center;
}
.e06-card{
  width:70px;height:70px;border-radius:18px;background:#fff;
  position:relative;
  animation:e06-flip 2.6s ease-in-out infinite;
}
.e06-card::before{
  content:"";position:absolute;top:26px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:18px 0 0 var(--cd);transform:translateX(-12.5px);
}
.e06-card::after{
  content:"";position:absolute;top:40px;left:50%;width:14px;height:7px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 14px 14px;
  transform:translateX(-50%);
}
@keyframes e06-flip{
  0%{transform:rotateY(90deg);opacity:0}
  10%{opacity:1}
  40%{transform:rotateY(-12deg)}
  55%{transform:rotateY(6deg)}
  66%{transform:rotateY(0deg)}
  82%{transform:rotateY(0deg);opacity:1}
  92%{transform:rotateY(90deg);opacity:0}
  100%{transform:rotateY(90deg);opacity:0}
}

/* ---------- 007 Drop Bounce ---------- */
.e07-ball{
  position:absolute;left:50%;bottom:32px;width:48px;height:48px;margin-left:-24px;
  border-radius:50%;background:#fff;
  transform-origin:50% 100%;
  animation:e07-drop 3.2s infinite;
}
.e07-ball::before{ /* eyes */
  content:"";position:absolute;top:17px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--cd);box-shadow:13px 0 0 var(--cd);transform:translateX(-9.5px);
}
.e07-ball::after{ /* mouth */
  content:"";position:absolute;top:27px;left:50%;width:10px;height:5px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 10px 10px;
  transform:translateX(-50%);
}
.e07-shadow{
  position:absolute;left:50%;bottom:22px;width:56px;height:9px;margin-left:-28px;
  border-radius:50%;background:var(--cd);
  animation:e07-shade 3.2s infinite;
}
@keyframes e07-drop{
  0%{transform:translateY(-140px) scale(1,1);opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  26%{transform:translateY(0) scale(1,1)}
  30%{transform:translateY(0) scale(1.3,.7);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  34%{transform:translateY(0) scale(1,1)}
  48%{transform:translateY(-52px) scale(1,1);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  60%{transform:translateY(0) scale(1,1)}
  63%{transform:translateY(0) scale(1.18,.82);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  66%{transform:translateY(0) scale(1,1)}
  75%{transform:translateY(-18px) scale(1,1);animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  82%{transform:translateY(0) scale(1.08,.92)}
  85%{transform:translateY(0) scale(1,1)}
  92%{transform:translateY(0) scale(1,1);opacity:1}
  97%{transform:translateY(0) scale(1,1);opacity:0}
  100%{transform:translateY(-140px) scale(1,1);opacity:0}
}
@keyframes e07-shade{
  0%{transform:scaleX(.35);opacity:.18}
  26%{transform:scaleX(1.15);opacity:.5}
  30%{transform:scaleX(1.3);opacity:.55}
  48%{transform:scaleX(.55);opacity:.25}
  60%{transform:scaleX(1.1);opacity:.5}
  75%{transform:scaleX(.75);opacity:.35}
  85%{transform:scaleX(1);opacity:.45}
  92%{transform:scaleX(1);opacity:.45}
  97%{transform:scaleX(.4);opacity:.15}
  100%{transform:scaleX(.35);opacity:.15}
}

/* ---------- 008 Swing In ---------- */
.e08-pin{
  position:absolute;top:10px;left:50%;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--cd);
}
.e08-sign{
  position:absolute;top:44px;left:50%;width:78px;height:50px;margin-left:-39px;
  border-radius:14px;background:#fff;
  transform-origin:50% -29px; /* pivot on the pin */
  animation:e08-swing 3s ease-in-out infinite;
}
.e08-sign::before{ /* hanging string */
  content:"";position:absolute;top:-30px;left:50%;width:3px;height:30px;margin-left:-1.5px;
  border-radius:2px;background:var(--cd);
}
.e08-sign::after{ /* sign "text" bars */
  content:"";position:absolute;top:17px;left:50%;width:40px;height:5px;border-radius:3px;
  background:var(--cd);transform:translateX(-50%);
  box-shadow:0 11px 0 -1px var(--cd);
}
@keyframes e08-swing{
  0%{transform:rotate(-60deg);opacity:1}
  22%{transform:rotate(22deg)}
  40%{transform:rotate(-12deg)}
  55%{transform:rotate(6deg)}
  68%{transform:rotate(0deg)}
  86%{transform:rotate(0deg);opacity:1}
  94%{transform:rotate(0deg);opacity:0}
  100%{transform:rotate(-60deg);opacity:0}
}

/* ---------- 009 Roll In ---------- */
.e09-ball{
  width:52px;height:52px;border-radius:50%;background:#fff;
  position:relative;
  animation:e09-roll 3.4s ease-in-out infinite;
}
.e09-ball::before{ /* the dot that shows rotation */
  content:"";position:absolute;top:8px;left:50%;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:var(--cd);
}
@keyframes e09-roll{
  0%{transform:translateX(-160px) rotate(0deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  40%{transform:translateX(0) rotate(360deg)}
  68%{transform:translateX(0) rotate(360deg);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  100%{transform:translateX(160px) rotate(720deg)}
}

/* ---------- 010 Blur In ---------- */
.e10-box{
  width:64px;height:64px;border-radius:18px;background:#fff;
  position:relative;
  animation:e10-blur 2.6s ease-in-out infinite;
}
.e10-box::before{
  content:"";position:absolute;top:24px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:16px 0 0 var(--cd);transform:translateX(-11.5px);
}
.e10-box::after{
  content:"";position:absolute;top:38px;left:50%;width:12px;height:6px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 12px 12px;
  transform:translateX(-50%);
}
@keyframes e10-blur{
  0%{opacity:0;filter:blur(10px);transform:scale(.94)}
  32%{opacity:1;filter:blur(0);transform:scale(1)}
  72%{opacity:1;filter:blur(0);transform:scale(1)}
  92%{opacity:0;filter:blur(10px);transform:scale(.94)}
  100%{opacity:0;filter:blur(10px);transform:scale(.94)}
}

/* ---------- 011 Stretch In ---------- */
.e11-pin{
  position:absolute;left:28px;top:calc(50% - 5px);width:10px;height:10px;
  border-radius:50%;background:var(--cd);
}
.e11-bar{
  position:absolute;left:36px;top:calc(50% - 21px);width:128px;height:42px;
  border-radius:21px;background:#fff;
  transform-origin:left center;
  animation:e11-stretch 2.6s ease-in-out infinite;
}
.e11-bar::before{ /* eyes ride near the right end */
  content:"";position:absolute;top:14px;right:26px;width:6px;height:6px;border-radius:50%;
  background:var(--cd);box-shadow:12px 0 0 var(--cd);
}
@keyframes e11-stretch{
  0%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  34%{transform:scaleX(1.25)}
  48%{transform:scaleX(.92)}
  60%{transform:scaleX(1.06)}
  70%{transform:scaleX(1)}
  84%{transform:scaleX(1);opacity:1}
  93%{transform:scaleX(1);opacity:0}
  100%{transform:scaleX(0);opacity:0}
}

/* ---------- 012 Curtain Reveal ---------- */
.e12-rail{
  position:absolute;top:22px;left:50%;width:120px;height:6px;margin-left:-60px;
  border-radius:3px;background:var(--cd);opacity:.55;
}
.e12-box{
  width:74px;height:74px;background:#fff;
  position:relative;
  animation:e12-wipe 3s ease-in-out infinite;
}
.e12-box::before{
  content:"";position:absolute;top:28px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--cd);box-shadow:17px 0 0 var(--cd);transform:translateX(-12px);
}
.e12-box::after{
  content:"";position:absolute;top:42px;left:50%;width:13px;height:6px;
  border:2px solid var(--cd);border-top:none;border-radius:0 0 13px 13px;
  transform:translateX(-50%);
}
@keyframes e12-wipe{
  0%{clip-path:inset(0 100% 0 0 round 18px)}
  35%{clip-path:inset(0 0 0 0 round 18px)}
  68%{clip-path:inset(0 0 0 0 round 18px)}
  90%{clip-path:inset(0 0 0 100% round 18px)}
  100%{clip-path:inset(0 0 0 100% round 18px)}
}

/* ---------- 013 Spiral In ---------- */
.e13-box{
  width:58px;height:58px;border-radius:16px;background:#fff;
  position:relative;
  animation:e13-spiral 3s infinite;
}
.e13-box::before{ /* corner dot makes the spin readable */
  content:"";position:absolute;top:8px;left:8px;width:11px;height:11px;
  border-radius:50%;background:var(--cd);
}
@keyframes e13-spiral{
  0%{transform:rotate(0deg) scale(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  40%{transform:rotate(540deg) scale(1.12)}
  52%{transform:rotate(540deg) scale(.96)}
  62%{transform:rotate(540deg) scale(1)}
  78%{transform:rotate(540deg) scale(1);animation-timing-function:cubic-bezier(.6,-.28,.74,.05)}
  100%{transform:rotate(1080deg) scale(0)}
}

/* ---------- 014 Stagger Trio ---------- */
.e14-row{
  display:flex;align-items:center;gap:16px;
}
.e14-dot{
  width:28px;height:28px;border-radius:50%;background:#fff;
  position:relative;
}
.e14-dot::before{ /* tiny blush cheek */
  content:"";position:absolute;bottom:6px;left:50%;width:10px;height:4px;
  border-radius:50%;background:var(--cd);opacity:.4;transform:translateX(-50%);
}
.e14-d1{animation:e14-pop1 3s infinite}
.e14-d2{animation:e14-pop2 3s infinite}
.e14-d3{animation:e14-pop3 3s infinite}
@keyframes e14-pop1{
  0%,4%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.8,.64,1)}
  16%{transform:scale(1.35)}
  24%{transform:scale(1)}
  80%{transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  90%,100%{transform:scale(0)}
}
@keyframes e14-pop2{
  0%,18%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.8,.64,1)}
  30%{transform:scale(1.35)}
  38%{transform:scale(1)}
  80%{transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  90%,100%{transform:scale(0)}
}
@keyframes e14-pop3{
  0%,32%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.8,.64,1)}
  44%{transform:scale(1.35)}
  52%{transform:scale(1)}
  80%{transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  90%,100%{transform:scale(0)}
}

/* ---------- 015 Unfold ---------- */
.e15-scene{
  perspective:520px;
  display:flex;align-items:center;justify-content:center;
}
.e15-book{
  position:relative;width:64px;height:84px;
}
.e15-cover{ /* stays put underneath, like the card back */
  position:absolute;inset:0;border-radius:10px;
  background:var(--cd);opacity:.85;
}
.e15-page{
  position:absolute;inset:0;border-radius:10px;background:#fff;
  transform-origin:left center;
  animation:e15-unfold 3.2s ease-in-out infinite;
}
.e15-page::before{ /* little heart on the page */
  content:"♥";position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);
  font-size:22px;line-height:1;color:var(--cd);
}
.e15-page::after{ /* fold line highlight */
  content:"";position:absolute;top:8px;bottom:8px;left:5px;width:3px;
  border-radius:2px;background:var(--cd);opacity:.35;
}
@keyframes e15-unfold{
  0%{transform:rotateY(90deg);animation-timing-function:cubic-bezier(.34,1.45,.64,1)}
  38%{transform:rotateY(-12deg)}
  52%{transform:rotateY(7deg)}
  64%{transform:rotateY(0deg)}
  84%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.55,0,.85,.36)}
  100%{transform:rotateY(90deg)}
}