/* ============================================================
   Part 2 — Attention（強調） cards 016–030
   All classes/keyframes prefixed a01- … a15-
   Main animated shapes: white / accents: var(--cd)
   ============================================================ */

/* ---------- 016 Bounce (a01-) ---------- */
.a01-scene{position:relative;width:120px;height:128px;}
.a01-ball{position:absolute;left:50%;bottom:18px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:#fff;transform-origin:50% 100%;animation:a01-bounce 1.4s infinite;}
.a01-ball::before,.a01-ball::after{content:"";position:absolute;top:17px;width:7px;height:7px;border-radius:50%;background:var(--cd);}
.a01-ball::before{left:11px;}
.a01-ball::after{right:11px;}
.a01-shadow{position:absolute;left:50%;bottom:8px;width:54px;height:11px;margin-left:-27px;border-radius:50%;background:var(--cd);opacity:.55;animation:a01-shadow 1.4s infinite;}
@keyframes a01-bounce{
  0%{transform:translateY(0) scale(1.18,.78);animation-timing-function:cubic-bezier(.25,.7,.45,1);}
  18%{transform:translateY(-10px) scale(.9,1.14);animation-timing-function:cubic-bezier(.2,.75,.4,1);}
  50%{transform:translateY(-56px) scale(1,1);animation-timing-function:cubic-bezier(.55,0,.8,.35);}
  82%{transform:translateY(-10px) scale(.9,1.14);animation-timing-function:cubic-bezier(.6,.05,.85,.4);}
  100%{transform:translateY(0) scale(1.18,.78);}
}
@keyframes a01-shadow{
  0%,100%{transform:scale(1.15,1);opacity:.55;}
  50%{transform:scale(.5,.65);opacity:.28;}
}

/* ---------- 017 Pulse (a02-) ---------- */
.a02-sq{position:relative;width:64px;height:64px;border-radius:20px;background:#fff;animation:a02-pulse 1.6s ease-in-out infinite;}
.a02-sq::before,.a02-sq::after{content:"";position:absolute;top:24px;width:9px;height:9px;border-radius:50%;background:var(--cd);}
.a02-sq::before{left:15px;}
.a02-sq::after{right:15px;}
.a02-mouth{position:absolute;left:50%;top:38px;width:16px;height:8px;margin-left:-8px;border-radius:0 0 16px 16px;background:var(--cd);}
@keyframes a02-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.14);}
}

/* ---------- 018 Heartbeat (a03-) ---------- */
.a03-heart{position:relative;width:58px;height:52px;margin-top:6px;transform-origin:50% 60%;animation:a03-thump 1.5s ease-in-out infinite;}
.a03-heart::before,.a03-heart::after{content:"";position:absolute;top:0;width:29px;height:46px;border-radius:29px 29px 0 0;background:#fff;}
.a03-heart::before{left:29px;transform:rotate(-45deg);transform-origin:0 100%;}
.a03-heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%;}
@keyframes a03-thump{
  0%,28%,56%,100%{transform:scale(1);}
  14%{transform:scale(1.28);}
  42%{transform:scale(1.18);}
}

/* ---------- 019 Shake (a04-) ---------- */
.a04-box{position:relative;width:62px;height:62px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;animation:a04-shake 2.4s ease-in-out infinite;}
.a04-mark{font-size:32px;font-weight:900;line-height:1;color:var(--cd);}
@keyframes a04-shake{
  0%,30%,100%{transform:translateX(0);}
  4%{transform:translateX(-10px);}
  8%{transform:translateX(9px);}
  12%{transform:translateX(-7px);}
  16%{transform:translateX(6px);}
  20%{transform:translateX(-4px);}
  24%{transform:translateX(3px);}
  28%{transform:translateX(-1px);}
}

/* ---------- 020 Wobble (a05-) ---------- */
.a05-buddy{position:relative;width:64px;height:64px;border-radius:50%;background:#fff;transform-origin:50% 100%;animation:a05-wobble 2.6s ease-in-out infinite;}
.a05-buddy::before,.a05-buddy::after{content:"";position:absolute;top:24px;width:8px;height:8px;border-radius:50%;background:var(--cd);}
.a05-buddy::before{left:16px;}
.a05-buddy::after{right:16px;}
.a05-mouth{position:absolute;left:50%;top:38px;width:14px;height:7px;margin-left:-7px;border-radius:0 0 14px 14px;background:var(--cd);}
@keyframes a05-wobble{
  0%,80%,100%{transform:translateX(0) rotate(0deg);}
  12%{transform:translateX(-16px) rotate(-8deg);}
  26%{transform:translateX(13px) rotate(7deg);}
  40%{transform:translateX(-9px) rotate(-5deg);}
  54%{transform:translateX(6px) rotate(3deg);}
  68%{transform:translateX(-2px) rotate(-1deg);}
}

/* ---------- 021 Jello (a06-) ---------- */
.a06-jelly{position:relative;width:68px;height:56px;border-radius:30px 30px 16px 16px;background:#fff;transform-origin:50% 100%;animation:a06-jello 2.6s ease-in-out infinite;}
.a06-jelly::before,.a06-jelly::after{content:"";position:absolute;top:22px;width:8px;height:8px;border-radius:50%;background:var(--cd);}
.a06-jelly::before{left:17px;}
.a06-jelly::after{right:17px;}
.a06-mouth{position:absolute;left:50%;top:34px;width:14px;height:7px;margin-left:-7px;border-radius:0 0 14px 14px;background:var(--cd);}
@keyframes a06-jello{
  0%,64%,100%{transform:skew(0deg,0deg);}
  8%{transform:skew(-14deg,-7deg);}
  16%{transform:skew(11deg,5deg);}
  24%{transform:skew(-8deg,-3.5deg);}
  32%{transform:skew(5deg,2deg);}
  40%{transform:skew(-3deg,-1deg);}
  48%{transform:skew(1.5deg,.5deg);}
  56%{transform:skew(-.5deg,0deg);}
}

/* ---------- 022 Rubber Band (a07-) ---------- */
.a07-band{position:relative;width:72px;height:48px;border-radius:24px;background:#fff;transform-origin:center;animation:a07-stretch 2.2s ease-in-out infinite;}
.a07-band::before,.a07-band::after{content:"";position:absolute;top:19px;width:8px;height:8px;border-radius:50%;background:var(--cd);}
.a07-band::before{left:20px;}
.a07-band::after{right:20px;}
@keyframes a07-stretch{
  0%,60%,100%{transform:scale(1,1);}
  12%{transform:scale(1.35,.7);}
  26%{transform:scale(.78,1.22);}
  38%{transform:scale(1.15,.88);}
  48%{transform:scale(.96,1.05);}
}

/* ---------- 023 Tada (a08-) ---------- */
.a08-wrap{position:relative;width:130px;height:120px;display:flex;align-items:center;justify-content:center;}
.a08-star{width:80px;height:80px;background:#fff;clip-path:polygon(50% 0%,63% 33%,98% 35%,71% 58%,81% 94%,50% 74%,19% 94%,29% 58%,2% 35%,37% 33%);animation:a08-tada 2.6s ease-in-out infinite;}
.a08-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cd);animation:a08-pop 2.6s ease-out infinite;}
.a08-d1{top:14px;left:16px;}
.a08-d2{bottom:18px;right:14px;animation-delay:.12s;}
@keyframes a08-tada{
  0%,58%,100%{transform:scale(1) rotate(0deg);}
  7%,14%{transform:scale(.9) rotate(-3deg);}
  21%,35%,49%{transform:scale(1.12) rotate(3deg);}
  28%,42%{transform:scale(1.12) rotate(-3deg);}
}
@keyframes a08-pop{
  0%,18%{transform:scale(0);opacity:0;}
  28%{transform:scale(1.3);opacity:1;}
  46%{transform:scale(1);opacity:1;}
  62%,100%{transform:scale(0);opacity:0;}
}

/* ---------- 024 Pendulum Swing (a09-) ---------- */
.a09-wrap{position:relative;width:130px;height:132px;}
.a09-pivot{position:absolute;top:14px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cd);z-index:2;}
.a09-pend{position:absolute;top:20px;left:50%;width:5px;height:66px;margin-left:-2.5px;border-radius:4px;background:#fff;transform-origin:50% 1px;animation:a09-swing 1.1s ease-in-out infinite alternate;}
.a09-bob{position:absolute;left:50%;bottom:-24px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#fff;}
@keyframes a09-swing{
  0%{transform:rotate(-25deg);}
  100%{transform:rotate(25deg);}
}

/* ---------- 025 Blink Flash (a10-) ---------- */
.a10-wrap{position:relative;width:130px;height:126px;display:flex;align-items:center;justify-content:center;}
.a10-spark{width:78px;height:78px;background:#fff;clip-path:polygon(50% 0%,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0% 50%,37% 37%);animation:a10-blink 2.2s infinite;}
.a10-mini{position:absolute;width:22px;height:22px;background:var(--cd);clip-path:polygon(50% 0%,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0% 50%,37% 37%);animation:a10-blink 2.2s infinite;}
.a10-m1{top:12px;right:16px;animation-delay:.12s;}
.a10-m2{bottom:12px;left:16px;animation-delay:.24s;}
@keyframes a10-blink{
  0%,16%,32%,100%{opacity:1;}
  8%,24%{opacity:0;}
}

/* ---------- 026 Nod No (a11-) ---------- */
.a11-head{position:relative;width:62px;height:62px;border-radius:50%;background:#fff;animation:a11-nono 2.4s ease-in-out infinite;}
.a11-head::before,.a11-head::after{content:"";position:absolute;top:25px;width:8px;height:8px;border-radius:50%;background:var(--cd);}
.a11-head::before{left:15px;}
.a11-head::after{right:15px;}
.a11-mouth{position:absolute;left:50%;top:42px;width:16px;height:5px;margin-left:-8px;border-radius:3px;background:var(--cd);}
@keyframes a11-nono{
  0%,52%,100%{transform:translateX(0) rotate(0deg);}
  8%{transform:translateX(-12px) rotate(-7deg);}
  18%{transform:translateX(10px) rotate(6deg);}
  28%{transform:translateX(-7px) rotate(-4deg);}
  38%{transform:translateX(4px) rotate(2deg);}
  46%{transform:translateX(-1px) rotate(-1deg);}
}

/* ---------- 027 Ghost Float (a12-) ---------- */
.a12-float{animation:a12-float 2.8s ease-in-out infinite;}
.a12-ghost{display:block;width:66px;height:75px;}
.a12-body{fill:#fff;}
.a12-eye{fill:var(--cd);}
.a12-mouthy{fill:var(--cd);opacity:.85;}
@keyframes a12-float{
  0%,100%{transform:translateY(5px);opacity:.82;}
  50%{transform:translateY(-9px);opacity:1;}
}

/* ---------- 028 Buzz Vibrate (a13-) ---------- */
.a13-wrap{position:relative;width:130px;height:120px;display:flex;align-items:center;justify-content:center;}
.a13-phone{position:relative;width:38px;height:64px;border-radius:10px;background:#fff;animation:a13-buzz 2.6s linear infinite;}
.a13-phone::before{content:"";position:absolute;left:50%;top:6px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:var(--cd);opacity:.75;}
.a13-phone::after{content:"";position:absolute;left:50%;bottom:5px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--cd);opacity:.75;}
.a13-arc{position:absolute;top:50%;width:16px;height:38px;margin-top:-19px;border-radius:50%;animation:a13-wave 2.6s linear infinite;}
.a13-arc-l{left:26px;border-left:4px solid var(--cd);}
.a13-arc-r{right:26px;border-right:4px solid var(--cd);}
@keyframes a13-buzz{
  0%,18.5%,100%{transform:translate(0,0) rotate(0deg);}
  1.5%{transform:translate(1px,-1px) rotate(.6deg);}
  3%{transform:translate(-1px,1px) rotate(-.6deg);}
  4.5%{transform:translate(1px,1px) rotate(.6deg);}
  6%{transform:translate(-1px,-1px) rotate(-.6deg);}
  7.5%{transform:translate(1px,-1px) rotate(.6deg);}
  9%{transform:translate(-1px,1px) rotate(-.6deg);}
  10.5%{transform:translate(1px,1px) rotate(.6deg);}
  12%{transform:translate(-1px,-1px) rotate(-.6deg);}
  13.5%{transform:translate(1px,-1px) rotate(.6deg);}
  15%{transform:translate(-1px,1px) rotate(-.6deg);}
  16.5%{transform:translate(1px,0) rotate(.3deg);}
}
@keyframes a13-wave{
  0%{opacity:0;}
  2%,18%{opacity:1;}
  28%,100%{opacity:0;}
}

/* ---------- 029 Squash & Stretch (a14-) ---------- */
.a14-scene{position:relative;width:130px;height:126px;}
.a14-ground{position:absolute;left:50%;bottom:12px;width:96px;height:7px;margin-left:-48px;border-radius:4px;background:var(--cd);}
.a14-ball{position:absolute;left:50%;bottom:19px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:#fff;transform-origin:50% 100%;animation:a14-hop 1.1s infinite;}
@keyframes a14-hop{
  0%{transform:translateY(0) scale(1.45,.5);animation-timing-function:cubic-bezier(.2,.7,.4,1);}
  22%{transform:translateY(-26px) scale(.72,1.36);animation-timing-function:cubic-bezier(.25,.7,.5,1);}
  48%{transform:translateY(-52px) scale(.98,1.02);animation-timing-function:cubic-bezier(.55,0,.8,.35);}
  74%{transform:translateY(-22px) scale(.78,1.28);animation-timing-function:cubic-bezier(.6,.05,.85,.4);}
  92%,100%{transform:translateY(0) scale(1.45,.5);}
}

/* ---------- 030 Radar Ping (a15-) ---------- */
.a15-wrap{position:relative;width:150px;height:148px;display:flex;align-items:center;justify-content:center;}
.a15-dot{position:relative;width:18px;height:18px;border-radius:50%;background:#fff;z-index:2;animation:a15-core .8s ease-in-out infinite;}
.a15-ring{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:3px solid rgba(255,255,255,.95);border-radius:50%;animation:a15-ring 2.4s cubic-bezier(.2,.6,.45,1) infinite;}
.a15-r1{animation-delay:0s;}
.a15-r2{animation-delay:-.8s;}
.a15-r3{animation-delay:-1.6s;}
@keyframes a15-ring{
  0%{transform:scale(.28);opacity:.95;}
  70%{opacity:.4;}
  100%{transform:scale(2.3);opacity:0;}
}
@keyframes a15-core{
  0%,100%{transform:scale(1);}
  30%{transform:scale(1.22);}
}