/* ==========================================================
   Part 6 — Shapes（シェイプ） cards 076–090
   ========================================================== */

/* ---------- 076 Blob Morph (s01-) ---------- */
.s01-wrap{position:relative;width:88px;height:88px}
.s01-spin{position:absolute;inset:0;animation:s01-turn 4.2s linear infinite}
.s01-blob{width:100%;height:100%;background:#fff;border-radius:45% 55% 62% 38%/52% 46% 54% 48%;animation:s01-morph 4.2s ease-in-out infinite}
.s01-face{position:absolute;inset:0;z-index:2;pointer-events:none}
.s01-eye{position:absolute;top:35px;width:8px;height:8px;border-radius:50%;background:var(--cd);animation:s01-blink 4.2s ease-in-out infinite}
.s01-eye-l{left:24px}
.s01-eye-r{right:24px}
.s01-mouth{position:absolute;top:49px;left:50%;width:16px;height:8px;margin-left:-8px;border-radius:0 0 16px 16px;background:var(--cd)}
@keyframes s01-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes s01-morph{
  0%,100%{border-radius:45% 55% 62% 38%/52% 46% 54% 48%}
  25%{border-radius:62% 38% 44% 56%/48% 62% 38% 52%}
  50%{border-radius:38% 62% 55% 45%/60% 40% 58% 42%}
  75%{border-radius:55% 45% 38% 62%/44% 56% 46% 54%}
}
@keyframes s01-blink{0%,88%,96%,100%{transform:scaleY(1)}92%{transform:scaleY(.15)}}

/* ---------- 077 Star Twinkle (s02-) ---------- */
.s02-wrap{position:relative;width:122px;height:106px}
.s02-star{position:absolute;left:23px;top:15px;width:76px;height:76px;background:#fff;
  clip-path:polygon(50% 0%,61.8% 38.2%,100% 38.2%,69.1% 61.8%,80.9% 100%,50% 76.4%,19.1% 100%,30.9% 61.8%,0% 38.2%,38.2% 38.2%);
  animation:s02-twinkle 2s ease-in-out infinite}
.s02-spark{position:absolute;width:11px;height:11px;background:var(--cd);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;animation:s02-blink 2s ease-in-out infinite}
.s02-spark1{top:4px;left:4px}
.s02-spark2{right:2px;bottom:10px;animation-delay:-1s}
@keyframes s02-twinkle{
  0%,100%{transform:scale(1) rotate(-5deg)}
  30%{transform:scale(.86) rotate(4deg)}
  60%{transform:scale(1.08) rotate(-1deg)}
}
@keyframes s02-blink{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(90deg)}}

/* ---------- 078 Shape Shift (s03-) ---------- */
.s03-shape{width:68px;height:68px;background:#fff;border-radius:50%;animation:s03-shift 3.2s cubic-bezier(.68,-.35,.32,1.35) infinite}
@keyframes s03-shift{
  0%,12%{transform:rotate(0deg);border-radius:50%}
  44%,60%{transform:rotate(90deg);border-radius:22%}
  92%,100%{transform:rotate(180deg);border-radius:50%}
}

/* ---------- 079 Petal Spinner (s04-) ---------- */
.s04-flower{position:relative;width:92px;height:92px;animation:s04-turn 4.5s linear infinite}
.s04-petal{position:absolute;inset:0}
.s04-p2{transform:rotate(60deg)}
.s04-p3{transform:rotate(120deg)}
.s04-p4{transform:rotate(180deg)}
.s04-p5{transform:rotate(240deg)}
.s04-p6{transform:rotate(300deg)}
.s04-dot{position:absolute;top:0;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:#fff;animation:s04-breathe 2.25s ease-in-out infinite}
.s04-core{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--cd);z-index:2}
@keyframes s04-turn{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}
@keyframes s04-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

/* ---------- 080 Orbit Moons (s05-) ---------- */
.s05-sys{position:relative;width:140px;height:140px}
.s05-ring{position:absolute;left:50%;top:50%;border:2px solid var(--cd);border-radius:50%;opacity:.4;box-sizing:border-box}
.s05-ring1{width:94px;height:94px;margin:-47px 0 0 -47px}
.s05-ring2{width:132px;height:132px;margin:-66px 0 0 -66px}
.s05-planet{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff}
.s05-eye{position:absolute;top:19px;width:6px;height:6px;border-radius:50%;background:var(--cd)}
.s05-eye-l{left:13px}
.s05-eye-r{right:13px}
.s05-smile{position:absolute;top:28px;left:50%;width:12px;height:6px;margin-left:-6px;border-radius:0 0 12px 12px;background:var(--cd)}
.s05-orbit{position:absolute;left:50%;top:50%;animation:s05-spin linear infinite}
.s05-orbit1{width:94px;height:94px;margin:-47px 0 0 -47px;animation-duration:2.2s}
.s05-orbit2{width:132px;height:132px;margin:-66px 0 0 -66px;animation-duration:4.4s;animation-direction:reverse}
.s05-moon{position:absolute;left:50%;border-radius:50%;background:#fff}
.s05-moon1{top:-6px;width:12px;height:12px;margin-left:-6px}
.s05-moon2{top:-5px;width:10px;height:10px;margin-left:-5px}
@keyframes s05-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---------- 081 Breathing Hex (s06-) ---------- */
.s06-wrap{position:relative;width:112px;height:112px}
.s06-echo,.s06-hex{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
.s06-echo{background:var(--cd);animation:s06-echo 2.4s ease-out infinite}
.s06-hex{background:#fff;animation:s06-breathe 2.4s ease-in-out infinite}
@keyframes s06-echo{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.55);opacity:0}}
@keyframes s06-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---------- 082 Wavy Line (s07-) ---------- */
.s07-svg{width:186px;height:62px;display:block}
.s07-guide{fill:none;stroke:var(--cd);stroke-width:5;stroke-linecap:round;opacity:.5}
.s07-flow{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:16 84;animation:s07-flow 2.2s linear infinite}
@keyframes s07-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

/* ---------- 083 Ripple Rings (s08-) ---------- */
.s08-pool{position:relative;width:118px;height:118px}
.s08-core{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;animation:s08-pulse 2.4s ease-in-out infinite}
.s08-ring{position:absolute;inset:0;border:4px solid #fff;border-radius:50%;opacity:0;animation:s08-ripple 2.4s cubic-bezier(.25,.6,.45,1) infinite}
.s08-r2{animation-delay:-.8s}
.s08-r3{animation-delay:-1.6s}
@keyframes s08-ripple{0%{transform:scale(.12);opacity:.95}60%{opacity:.5}100%{transform:scale(1);opacity:0}}
@keyframes s08-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ---------- 084 Pinwheel (s09-) ---------- */
.s09-mill{position:relative;width:84px;height:128px}
.s09-stick{position:absolute;top:37px;left:50%;width:7px;height:88px;margin-left:-3.5px;border-radius:4px;background:var(--cd)}
.s09-head{position:absolute;top:0;left:50%;width:74px;height:74px;margin-left:-37px;animation:s09-spin 3s cubic-bezier(.15,.68,.25,.99) infinite}
.s09-blade{position:absolute;width:35px;height:35px;background:#fff}
.s09-b1{top:0;left:0;border-radius:50% 50% 0 50%}
.s09-b2{top:0;right:0;border-radius:50% 50% 50% 0}
.s09-b3{bottom:0;right:0;border-radius:0 50% 50% 50%}
.s09-b4{bottom:0;left:0;border-radius:50% 0 50% 50%}
.s09-pin{position:absolute;top:29px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--cd);z-index:2}
@keyframes s09-spin{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}

/* ---------- 085 Metronome (s10-) ---------- */
.s10-metro{position:relative;width:150px;height:118px}
.s10-base{position:absolute;bottom:0;left:50%;width:88px;height:36px;margin-left:-44px;background:var(--cd);clip-path:polygon(50% 0,100% 100%,0 100%)}
.s10-needle{position:absolute;bottom:8px;left:50%;width:6px;height:90px;margin-left:-3px;border-radius:3px;background:#fff;transform-origin:50% 100%;animation:s10-tick 2.2s ease-in-out infinite}
.s10-tip{position:absolute;top:-5px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff}
.s10-pivot{position:absolute;bottom:3px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;z-index:2}
.s10-pivot::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--cd)}
@keyframes s10-tick{
  0%,8%{transform:rotate(-28deg)}
  42%,58%{transform:rotate(28deg)}
  92%,100%{transform:rotate(-28deg)}
}

/* ---------- 086 Pendulum Ball (s11-) ---------- */
.s11-rig{position:relative;width:130px;height:122px}
.s11-arm{position:absolute;top:7px;left:50%;width:2px;height:76px;margin-left:-1px;background:#fff;transform-origin:50% 0;animation:s11-swing 1.3s ease-in-out infinite alternate}
.s11-ball{position:absolute;bottom:-13px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff}
.s11-ball::before,.s11-ball::after{content:"";position:absolute;top:9px;width:4px;height:4px;border-radius:50%;background:var(--cd)}
.s11-ball::before{left:7px}
.s11-ball::after{right:7px}
.s11-pivot{position:absolute;top:0;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cd);z-index:2}
@keyframes s11-swing{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}

/* ---------- 087 Tiny Chart (s12-) ---------- */
.s12-chart{display:flex;flex-direction:column;align-items:center}
.s12-bars{display:flex;align-items:flex-end;gap:12px;height:86px}
.s12-bar{width:18px;background:#fff;border-radius:6px 6px 2px 2px;transform:scaleY(0);transform-origin:50% 100%;animation-duration:3.4s;animation-iteration-count:infinite}
.s12-b1{height:42px;animation-name:s12-grow1}
.s12-b2{height:66px;animation-name:s12-grow2}
.s12-b3{height:50px;animation-name:s12-grow3}
.s12-b4{height:80px;animation-name:s12-grow4}
.s12-base{width:132px;height:6px;margin-top:2px;border-radius:3px;background:var(--cd)}
@keyframes s12-grow1{
  0%,4%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,1.5,.55,1)}
  16%,66%{transform:scaleY(1);animation-timing-function:ease-in}
  76%,100%{transform:scaleY(0)}
}
@keyframes s12-grow2{
  0%,12%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,1.5,.55,1)}
  24%,66%{transform:scaleY(1);animation-timing-function:ease-in}
  76%,100%{transform:scaleY(0)}
}
@keyframes s12-grow3{
  0%,20%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,1.5,.55,1)}
  32%,66%{transform:scaleY(1);animation-timing-function:ease-in}
  76%,100%{transform:scaleY(0)}
}
@keyframes s12-grow4{
  0%,28%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,1.5,.55,1)}
  40%,66%{transform:scaleY(1);animation-timing-function:ease-in}
  76%,100%{transform:scaleY(0)}
}

/* ---------- 088 Eclipse (s13-) ---------- */
.s13-sky{position:absolute;inset:0}
.s13-sun{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:#fff}
.s13-sun::before,.s13-sun::after{content:"";position:absolute;top:23px;width:7px;height:7px;border-radius:50%;background:var(--cd)}
.s13-sun::before{left:16px}
.s13-sun::after{right:16px}
.s13-smile{position:absolute;top:34px;left:50%;width:14px;height:7px;margin-left:-7px;border-radius:0 0 14px 14px;background:var(--cd)}
.s13-moon{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--cd);animation:s13-slide 4.2s linear infinite}
@keyframes s13-slide{from{transform:translateX(-160px)}to{transform:translateX(160px)}}

/* ---------- 089 Counter Spin (s14-) ---------- */
.s14-duo{position:relative;width:96px;height:96px}
.s14-solid{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:14px;background:#fff;animation:s14-cw 3.6s linear infinite}
.s14-outline{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:14px;border:4px solid var(--cd);box-sizing:border-box;animation:s14-ccw 2.8s linear infinite}
@keyframes s14-cw{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes s14-ccw{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* ---------- 090 Yo-yo Scale (s15-) ---------- */
.s15-rig{position:absolute;inset:0}
.s15-anchor{position:absolute;top:8px;left:50%;width:18px;height:8px;margin-left:-9px;border-radius:4px;background:var(--cd)}
.s15-string{position:absolute;top:14px;left:50%;width:2px;height:88px;margin-left:-1px;background:#fff;transform-origin:50% 0;animation:s15-string 3.2s infinite}
.s15-disc{position:absolute;top:40px;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:#fff;animation:s15-drop 3.2s infinite}
.s15-hub{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cd)}
.s15-mark{position:absolute;top:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--cd)}
@keyframes s15-drop{
  0%{transform:translateY(0) rotate(0deg);animation-timing-function:ease-in}
  45%{transform:translateY(62px) rotate(540deg);animation-timing-function:linear}
  55%{transform:translateY(62px) rotate(720deg);animation-timing-function:ease-out}
  100%{transform:translateY(0) rotate(1440deg)}
}
@keyframes s15-string{
  0%{transform:scaleY(.3);animation-timing-function:ease-in}
  45%{transform:scaleY(1);animation-timing-function:linear}
  55%{transform:scaleY(1);animation-timing-function:ease-out}
  100%{transform:scaleY(.3)}
}