/* fanfan 图标 Fanfan Icons · 动态版 1.2.1 · MIT · by @唐幡 */
/* 豹宝 motion — every motion either moves a whole group (its gaps travel with it) or touches only eyes / cheeks / z */
.bb { overflow: visible; --k: var(--bb-slow, 1); }
.bb * { transform-box: fill-box; transform-origin: 50% 50%; }
.bb .bb-body, .bb .bb-roof { transform-origin: 50% 100%; }
.bb .bb-swing, .bb .bb-clap { transform-box: view-box; transform-origin: 12px 3px; }
.bb .bb-love { transform-box: view-box; transform-origin: 12px 9px; }
.bb-i-chat .bb-body { transform-box: view-box; transform-origin: 3.2px 20.6px; }

/* resting states: awake by default; .is-asleep shows the closed eyes and the z */
.bb .bb-eye-s, .bb .bb-eye-h, .bb .bb-z { opacity: 0; }
.bb.is-asleep .bb-eye-a { opacity: 0; }
.bb.is-asleep .bb-eye-s, .bb.is-asleep .bb-z { opacity: 1; }

/* ---------- 醒来 wake: closed eyes flatten, eyes pop open, a little hop, one blink to clear the sleep */
.bb.do-wake .bb-eye-s { animation: bb-wake-s calc(1.4s * var(--k)) both; }
.bb.do-wake .bb-eye-a { animation: bb-wake-a calc(1.4s * var(--k)) both; }
.bb.do-wake .bb-z     { animation: bb-wake-z calc(1.4s * var(--k)) both ease-out; }
.bb.do-wake .bb-body  { animation: bb-wake-body calc(1.4s * var(--k)) both; }
.bb.do-wake .bb-roof  { animation: bb-wake-roof calc(1.4s * var(--k)) both; }
@keyframes bb-wake-s { 0%, 24% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: scaleY(.2); } }
@keyframes bb-wake-a {
  0%, 30% { opacity: 0; transform: scaleY(.1); } 31% { opacity: 1; transform: scaleY(.1); }
  42% { transform: scaleY(1.2); } 50% { transform: scaleY(.92); } 58%, 80% { transform: none; }
  85% { transform: scaleY(.1); } 91%, 100% { opacity: 1; transform: none; } }
@keyframes bb-wake-z { 0% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translate(1.2px, -2.4px) scale(.5); } }
@keyframes bb-wake-body {
  0%, 26% { transform: none; } 34% { transform: scale(1.05, .93); }
  46% { transform: translateY(-1.1px) scale(.97, 1.04); } 58% { transform: scale(1.02, .98); } 66%, 100% { transform: none; } }
@keyframes bb-wake-roof {
  0%, 36% { transform: none; } 48% { transform: translateY(-1.7px) rotate(-5deg); }
  60% { transform: rotate(1deg); } 66% { transform: translateY(-.35px); } 72%, 100% { transform: none; } }

/* ---------- 睡着 sleep: eyes droop, try once to stay open, close; the z comes back */
.bb.do-sleep .bb-eye-a { animation: bb-sleep-a calc(1.6s * var(--k)) both; }
.bb.do-sleep .bb-eye-s { animation: bb-sleep-s calc(1.6s * var(--k)) both; }
.bb.do-sleep .bb-z     { animation: bb-sleep-z calc(1.6s * var(--k)) both ease-out; }
.bb.do-sleep .bb-body  { animation: bb-sleep-body calc(1.6s * var(--k)) both ease-in-out; }
@keyframes bb-sleep-a {
  0% { opacity: 1; transform: none; } 22% { transform: scaleY(.45); } 34% { transform: scaleY(.85); }
  58% { opacity: 1; transform: scaleY(.1); } 60%, 100% { opacity: 0; transform: scaleY(.1); } }
@keyframes bb-sleep-s { 0%, 58% { opacity: 0; transform: scaleY(.3); } 60% { opacity: 1; transform: scaleY(.3); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes bb-sleep-z { 0%, 66% { opacity: 0; transform: translate(-.8px, .8px) scale(.4); } 100% { opacity: 1; transform: none; } }
@keyframes bb-sleep-body { 0%, 100% { transform: none; } 60% { transform: translateY(.4px) scale(1.025, .97); } }

/* ---------- 眨眼 · 待机 idle: slow breathing, a double blink now and then (smiling eyes squeeze instead) */
.bb.idle .bb-body  { animation: bb-breathe calc(3.2s * var(--k)) ease-in-out infinite; }
.bb.idle .bb-eye-a { animation: bb-blink calc(4.8s * var(--k)) infinite; }
.bb.idle.happy-eyes .bb-eye-a { animation-name: bb-squeeze; }
@keyframes bb-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.012, 1.025); } }
@keyframes bb-blink {
  0%, 86%, 90%, 93%, 97%, 100% { transform: none; } 88%, 95% { transform: scaleY(.1); } }
@keyframes bb-squeeze { 0%, 84%, 94%, 100% { transform: none; } 88% { transform: scaleY(.55); } }

/* ---------- 弹一下 bounce: squash, jump, land */
.bb.do-bounce .bb-body  { animation: bb-bounce calc(.7s * var(--k)) both; }
.bb.do-bounce .bb-eye-a { animation: bb-bounce-eye calc(.7s * var(--k)) both; }
@keyframes bb-bounce {
  0% { transform: none; } 14% { transform: scale(1.08, .88); } 38% { transform: translateY(-1.5px) scale(.95, 1.06); }
  58% { transform: scale(1.05, .95); } 74% { transform: scale(.985, 1.015); } 100% { transform: none; } }
@keyframes bb-bounce-eye { 0%, 30%, 100% { transform: none; } 14% { transform: scaleY(.35); } }

/* ---------- 脸红 blush: cheeks rise, eyes turn into smiles, a shy wiggle */
.bb.do-blush .bb-blush  { animation: bb-cheek calc(2.2s * var(--k)) both; }
.bb.do-blush .bb-body   { animation: bb-shy calc(2.2s * var(--k)) both ease-in-out; }
.bb.do-blush .bb-eye-a { animation: bb-to-smile-a calc(2.2s * var(--k)) both; }
.bb.do-blush .bb-eye-h { animation: bb-to-smile-h calc(2.2s * var(--k)) both; }
.bb.do-blush.happy-eyes .bb-eye-a { animation: bb-squeeze-once calc(2.2s * var(--k)) both; }
.bb.do-blush.happy-eyes .bb-eye-h { animation: none; }
@keyframes bb-cheek { 0%, 100% { transform: none; } 22% { transform: scale(1.4, 1.25); } 32%, 80% { transform: scale(1.3, 1.18); } }
@keyframes bb-shy {
  0%, 56%, 100% { transform: none; } 16% { transform: rotate(-4deg); } 30% { transform: rotate(3.5deg); } 44% { transform: rotate(-2deg); } }
@keyframes bb-to-smile-a {
  0% { opacity: 1; transform: none; } 14% { opacity: 1; transform: scaleY(.1); } 15%, 85% { opacity: 0; transform: scaleY(.1); }
  86% { opacity: 1; transform: scaleY(.1); } 100% { opacity: 1; transform: none; } }
@keyframes bb-to-smile-h {
  0%, 14% { opacity: 0; transform: scaleY(.3); } 15% { opacity: 1; transform: scaleY(.3); } 24% { transform: scaleY(1.15); }
  30%, 80% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes bb-squeeze-once { 0%, 34%, 100% { transform: none; } 18% { transform: scaleY(.55); } }

/* ---------- 专属 tricks */
/* 主页 · 帽子跳: the roof-hat hops twice */
.bb-i-home.do-trick .bb-roof { animation: bb-hat calc(1.3s * var(--k)) both; }
.bb.bb-i-home.do-trick .bb-eye-a { animation: bb-to-smile-a calc(1.3s * var(--k)) both; }
.bb.bb-i-home.do-trick .bb-eye-h { animation: bb-to-smile-h calc(1.3s * var(--k)) both; }
@keyframes bb-hat {
  0%, 72%, 100% { transform: none; } 16% { transform: translateY(-1.5px) rotate(-6deg); } 30% { transform: none; }
  44% { transform: translateY(-1.1px) rotate(5deg); } 58% { transform: none; } 64% { transform: translateY(-.3px); } }
/* 消息 · 冒泡: the bubble pops out of its tail */
.bb-i-chat.do-trick .bb-body  { animation: bb-pop calc(.9s * var(--k)) both; }
.bb-i-chat.do-trick .bb-eye-a { animation: bb-squeeze-late calc(.9s * var(--k)) both; }
@keyframes bb-pop {
  0% { opacity: 0; transform: scale(.55); } 30% { opacity: 1; transform: scale(1.08); } 48% { transform: scale(.96); }
  64% { transform: scale(1.02); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes bb-squeeze-late { 0%, 60%, 92%, 100% { transform: none; } 76% { transform: scaleY(.55); } }
/* 喜欢 · 怦怦: the heart beats twice, cheeks warm up */
.bb-i-heart.do-trick .bb-love { animation: bb-beat calc(1.3s * var(--k)) both; }
.bb-i-heart.do-trick .bb-blush { animation: bb-cheek calc(1.3s * var(--k)) both; }
.bb-i-heart.do-trick .bb-eye-a { animation: bb-squeeze-once calc(1.3s * var(--k)) both; }
@keyframes bb-beat {
  0%, 56%, 100% { transform: none; } 12% { transform: scale(1.25); } 22% { transform: scale(.96); }
  34% { transform: scale(1.18); } 46% { transform: scale(.98); } }
/* 通知 · 叮铃: the bell swings from its knob, the clapper lags behind, the rings shake */
.bb-i-bell.do-trick .bb-swing { animation: bb-swing calc(1.3s * var(--k)) both; }
.bb-i-bell.do-trick .bb-clap  { animation: bb-clap calc(1.3s * var(--k)) both; }
.bb-i-bell.do-trick .bb-ring > :first-child { animation: bb-ring-l calc(1.3s * var(--k)) both; }
.bb-i-bell.do-trick .bb-ring > :last-child  { animation: bb-ring-r calc(1.3s * var(--k)) both; }
.bb.bb-i-bell.do-trick .bb-eye-a { animation: bb-to-smile-a calc(1.3s * var(--k)) both; }
.bb.bb-i-bell.do-trick .bb-eye-h { animation: bb-to-smile-h calc(1.3s * var(--k)) both; }
@keyframes bb-swing {
  0%, 76%, 100% { transform: none; } 10% { transform: rotate(14deg); } 24% { transform: rotate(-11deg); }
  38% { transform: rotate(8deg); } 52% { transform: rotate(-5deg); } 64% { transform: rotate(2.5deg); } }
@keyframes bb-clap {
  0%, 80%, 100% { transform: none; } 14% { transform: rotate(20deg); } 28% { transform: rotate(-16deg); }
  42% { transform: rotate(11deg); } 56% { transform: rotate(-7deg); } 68% { transform: rotate(3deg); } }
@keyframes bb-ring-l { 0%, 64%, 100% { transform: none; } 10%, 38% { transform: translateX(-.8px); } 24%, 52% { transform: translateX(.2px); } }
@keyframes bb-ring-r { 0%, 64%, 100% { transform: none; } 10%, 38% { transform: translateX(-.2px); } 24%, 52% { transform: translateX(.8px); } }

/* shared eye reactions for the tricks below */
@keyframes bb-wide { 0%, 55%, 100% { transform: none; } 22% { transform: scale(1.16); } }
@keyframes bb-shut { 0%, 46%, 74%, 100% { transform: none; } 52%, 66% { transform: scaleY(.15); } }

/* 设置 · 齿轮转: while it turns, the whole gear is drawn and a mask keeps the head's gap still */
.bb-i-settings .bb-gearspin { transform-box: view-box; transform-origin: 18px 6px; }
.bb-i-settings.do-trick .bb-gearcut  { animation: bb-swap-out calc(1.4s * var(--k)) both; }
.bb-i-settings.do-trick .bb-gearspin { animation: bb-gear calc(1.4s * var(--k)) both; }
.bb-i-settings.do-trick .bb-main     { animation: bb-strain calc(1.4s * var(--k)) both; }
@keyframes bb-swap-out { 0%, 100% { opacity: 1; } 1%, 99% { opacity: 0; } }
@keyframes bb-gear {
  0% { opacity: 0; transform: none; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  1% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  92% { transform: rotate(126deg); } 99% { opacity: 1; transform: rotate(120deg); } 100% { opacity: 0; transform: rotate(120deg); } }
@keyframes bb-strain {
  0%, 85%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: translateX(-.25px); } 20%, 40%, 60%, 80% { transform: translateX(.25px); } }

/* 搜索 · 找一找: the lens looks around, the eyes follow */
.bb-i-search.do-trick .bb-body  { animation: bb-scan calc(1.6s * var(--k)) both ease-in-out; }
.bb-i-search.do-trick .bb-eye-a { animation: bb-look calc(1.6s * var(--k)) both ease-in-out; }
@keyframes bb-scan {
  0%, 100% { transform: none; } 18% { transform: translate(-1px, -.5px) rotate(-6deg); }
  40% { transform: translate(1px, -.5px) rotate(6deg); } 62% { transform: translate(.9px, .4px) rotate(4deg); } 82% { transform: translate(-.6px, .3px) rotate(-3deg); } }
@keyframes bb-look { 0%, 100% { transform: none; } 18% { transform: translateX(-.5px); } 40%, 62% { transform: translateX(.5px); } 82% { transform: translateX(-.3px); } }

/* 定位 · 落点: the pin drops in and lands on its tip */
.bb-i-location .bb-body { transform-box: view-box; transform-origin: 12px 21.4px; }
.bb-i-location.do-trick .bb-body  { animation: bb-drop-in calc(1.1s * var(--k)) both; }
.bb-i-location.do-trick .bb-eye-a { animation: bb-bounce-eye calc(1.1s * var(--k)) .3s both; }
@keyframes bb-drop-in {
  0% { opacity: 0; transform: translateY(-7px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  35% { opacity: 1; transform: none; } 45% { transform: scale(1.12, .86); } 58% { transform: translateY(-1.2px) scale(.96, 1.05); }
  72% { transform: none; } 80% { transform: scale(1.03, .97); } 90%, 100% { opacity: 1; transform: none; } }

/* 相机 · 咔嚓: the lens twists to focus, click, flash, eyes shut for a blink */
.bb-i-camera .bb-lens { transform-box: view-box; transform-origin: 12px 14.1px; }
.bb-i-camera.do-trick .bb-lens  { animation: bb-focus calc(1.3s * var(--k)) both ease-in-out; }
.bb-i-camera.do-trick .bb-body  { animation: bb-click calc(1.3s * var(--k)) both; }
.bb-i-camera.do-trick .bb-flash { animation: bb-flash calc(1.3s * var(--k)) both; }
.bb-i-camera.do-trick .bb-eye-a { animation: bb-shut calc(1.3s * var(--k)) both; }
@keyframes bb-focus { 0%, 100% { transform: none; } 28%, 44% { transform: rotate(-35deg); } 36% { transform: rotate(-30deg); } 80% { transform: rotate(4deg); } }
@keyframes bb-click { 0%, 46%, 64%, 100% { transform: none; } 52% { transform: scale(1.05, .93); } }
@keyframes bb-flash { 0%, 48%, 80%, 100% { transform: none; } 54% { transform: scale(2.6); } 64% { transform: scale(1.4); } }

/* 浅色模式 · 光芒转: the rays turn one step and glow */
.bb-i-sun .bb-sunrays { transform-box: view-box; transform-origin: 12px 12px; }
.bb-i-sun.do-trick .bb-sunrays { animation: bb-sunrays calc(1.4s * var(--k)) both ease-in-out; }
.bb-i-sun.do-trick .bb-eye-a   { animation: bb-to-smile-a calc(1.4s * var(--k)) both; }
.bb-i-sun.do-trick .bb-eye-h   { animation: bb-to-smile-h calc(1.4s * var(--k)) both; }
@keyframes bb-sunrays { 0% { transform: none; } 50% { transform: rotate(22.5deg) scale(1.12); } 100% { transform: rotate(45deg); } }

/* 下雨 · 下雨啦: the drops fall, one after another */
.bb-i-umbrella.do-trick .bb-rain > * { animation: bb-raindrop calc(.8s * var(--k)) 2 both linear; }
.bb-i-umbrella.do-trick .bb-rain > :nth-child(2) { animation-delay: calc(.2s * var(--k)); }
.bb-i-umbrella.do-trick .bb-rain > :nth-child(3) { animation-delay: calc(.1s * var(--k)); }
.bb-i-umbrella.do-trick .bb-rain > :nth-child(4) { animation-delay: calc(.3s * var(--k)); }
.bb-i-umbrella.do-trick .bb-eye-a { animation: bb-to-smile-a calc(1.9s * var(--k)) both; }
.bb-i-umbrella.do-trick .bb-eye-h { animation: bb-to-smile-h calc(1.9s * var(--k)) both; }
@keyframes bb-raindrop {
  0% { opacity: 1; transform: none; } 40% { opacity: 0; transform: translateY(1.8px); }
  41% { opacity: 0; transform: translateY(-1.8px); } 80%, 100% { opacity: 1; transform: none; } }

/* 灵感 · 灵光一闪: the little rays flicker on, eyes go wide */
.bb-i-bulb.do-trick .bb-glints > * { animation: bb-glint calc(1.2s * var(--k)) both; }
.bb-i-bulb.do-trick .bb-glints > :nth-child(2) { animation-delay: calc(.06s * var(--k)); }
.bb-i-bulb.do-trick .bb-glints > :nth-child(3) { animation-delay: calc(.12s * var(--k)); }
.bb-i-bulb.do-trick .bb-body  { animation: bb-aha calc(1.2s * var(--k)) both; }
.bb-i-bulb.do-trick .bb-eye-a { animation: bb-wide calc(1.2s * var(--k)) both; }
@keyframes bb-glint {
  0% { opacity: 1; transform: none; } 10% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.4); }
  42% { transform: none; } 52% { opacity: .2; } 62% { opacity: 1; transform: scale(1.2); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes bb-aha { 0%, 50%, 100% { transform: none; } 22% { transform: translateY(-1px); } 34% { transform: scale(1.03, .97); } }

/* 成长 · 发芽: the stem stretches up, the leaves flap */
.bb-i-sprout .bb-stem   { transform-box: view-box; transform-origin: 12px 7.3px; }
.bb-i-sprout .bb-leaves { transform-box: view-box; transform-origin: 12px 4.7px; }
.bb-i-sprout.do-trick .bb-stem   { animation: bb-stem calc(1.4s * var(--k)) both ease-in-out; }
.bb-i-sprout.do-trick .bb-leaves { animation: bb-leaves calc(1.4s * var(--k)) both ease-in-out; }
.bb-i-sprout.do-trick .bb-eye-a  { animation: bb-to-smile-a calc(1.4s * var(--k)) both; }
.bb-i-sprout.do-trick .bb-eye-h  { animation: bb-to-smile-h calc(1.4s * var(--k)) both; }
@keyframes bb-stem { 0%, 78%, 100% { transform: none; } 30% { transform: scaleY(1.35); } 50% { transform: scaleY(.95); } 64% { transform: scaleY(1.08); } }
@keyframes bb-leaves {
  0%, 78%, 100% { transform: none; } 30% { transform: translateY(-.91px) rotate(-10deg) scale(1.15); }
  50% { transform: translateY(.13px) rotate(7deg); } 64% { transform: translateY(-.21px) rotate(-3deg); } }

/* 热门 · 火苗跳: the flame flickers on its base */
.bb-i-fire .bb-flame { transform-box: view-box; transform-origin: 12px 9.1px; }
.bb-i-fire.do-trick .bb-flame { animation: bb-flicker calc(1.2s * var(--k)) both ease-in-out; }
@keyframes bb-flicker {
  0%, 100% { transform: none; } 15% { transform: scale(.9, 1.15) skewX(-4deg); } 30% { transform: scale(1.08, .94) skewX(3deg); }
  45% { transform: scale(.94, 1.12) skewX(-3deg); } 60% { transform: scale(1.05, .97) skewX(2deg); } 78% { transform: scale(.97, 1.05); } }

/* 星标 · 星星翻: the star hops and turns one point over; the eyes watch it go up */
.bb-i-star .bb-star { transform-box: view-box; transform-origin: 11.48px 6.67px; }
.bb-i-star.do-trick .bb-star  { animation: bb-star-flip calc(1.2s * var(--k)) both; }
.bb-i-star.do-trick .bb-eye-a { animation: bb-look-up calc(1.2s * var(--k)) both ease-in-out; }
@keyframes bb-star-flip {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  40% { transform: translateY(-3px) rotate(48deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  64% { transform: rotate(72deg); } 72% { transform: translateY(-.5px) rotate(72deg); } 80%, 100% { transform: rotate(72deg); } }
@keyframes bb-look-up { 0%, 80%, 100% { transform: none; } 30%, 50% { transform: translateY(-.45px); } }

/* 音乐 · 摇头晃脑: four beats side to side */
.bb-i-music.do-trick .bb-body { animation: bb-groove calc(1.6s * var(--k)) both ease-in-out; }
@keyframes bb-groove {
  0%, 100% { transform: none; } 12%, 62% { transform: rotate(-7deg); } 25%, 50%, 75% { transform: none; } 37%, 87% { transform: rotate(7deg); } }

/* 闹钟 · 闹铃响: it rattles, the bells hop in turn, eyes pop wide */
.bb-i-alarm.do-trick .bb-body   { transform-box: view-box; transform-origin: 12px 13px; animation: bb-rattle calc(1.2s * var(--k)) both; }
.bb-i-alarm.do-trick .bb-bell-l { animation: bb-hop-a calc(1.2s * var(--k)) both; }
.bb-i-alarm.do-trick .bb-bell-r { animation: bb-hop-b calc(1.2s * var(--k)) both; }
.bb-i-alarm.do-trick .bb-eye-a  { animation: bb-wide calc(1.2s * var(--k)) both; }
@keyframes bb-rattle {
  0%, 80%, 100% { transform: none; } 8%, 24%, 40% { transform: rotate(5deg); } 16%, 32%, 48% { transform: rotate(-5deg); }
  56% { transform: rotate(4deg); } 64% { transform: rotate(-3deg); } 72% { transform: rotate(1.5deg); } }
@keyframes bb-hop-a { 0%, 16%, 32%, 48%, 64%, 100% { transform: none; } 8%, 24%, 40%, 56% { transform: translateY(-.7px); } }
@keyframes bb-hop-b { 0%, 8%, 24%, 40%, 56%, 100% { transform: none; } 16%, 32%, 48% { transform: translateY(-.7px); } }

/* 启动 · 起飞: rumble, lift off on a longer flame, come back down */
.bb-i-rocket .bb-flame { transform-box: view-box; transform-origin: 12px 19.4px; }
.bb-i-rocket.do-trick .bb-body  { animation: bb-launch calc(1.6s * var(--k)) both; }
.bb-i-rocket.do-trick .bb-flame { animation: bb-thrust calc(1.6s * var(--k)) both; }
.bb-i-rocket.do-trick .bb-eye-a { animation: bb-strive calc(1.6s * var(--k)) both; }
@keyframes bb-strive { 0%, 26%, 70%, 100% { transform: none; } 32%, 62% { transform: scaleY(.45); } }
@keyframes bb-launch {
  0%, 30% { transform: none; } 6%, 18% { transform: translateX(-.35px); } 12%, 24% { transform: translateX(.35px); }
  52% { transform: translateY(-3.5px); animation-timing-function: ease-in-out; } 62% { transform: translateY(-3.2px); }
  85% { transform: none; } 90% { transform: scale(1.04, .95); } 100% { transform: none; } }
@keyframes bb-thrust {
  0%, 100% { transform: none; } 8%, 24% { transform: scaleY(1.25); } 16% { transform: scaleY(1); }
  32%, 58% { transform: scaleY(1.55); } 70% { transform: scaleY(1.2); } 85% { transform: scaleY(1.1); } }

/* 新功能 · 闪闪: each sparkle shrinks, turns a quarter and pops */
.bb-i-sparkles.do-trick .bb-sparks > * { animation: bb-twinkle calc(1.1s * var(--k)) both ease-in-out; }
.bb-i-sparkles.do-trick .bb-sparks > :nth-child(2) { animation-delay: calc(.15s * var(--k)); }
.bb-i-sparkles.do-trick .bb-sparks > :nth-child(3) { animation-delay: calc(.3s * var(--k)); }
.bb-i-sparkles.do-trick .bb-eye-a { animation: bb-to-smile-a calc(1.4s * var(--k)) both; }
.bb-i-sparkles.do-trick .bb-eye-h { animation: bb-to-smile-h calc(1.4s * var(--k)) both; }
@keyframes bb-twinkle { 0% { transform: none; } 25% { transform: scale(.3) rotate(45deg); } 55% { transform: scale(1.35) rotate(90deg); } 75%, 100% { transform: rotate(90deg); } }

/* 庆祝 · 飘飘: the balloon sways on its string */
.bb-i-balloon .bb-balloon { transform-box: view-box; transform-origin: 17.8px 11.2px; }
.bb-i-balloon.do-trick .bb-balloon { animation: bb-sway calc(1.8s * var(--k)) both ease-in-out; }
.bb-i-balloon.do-trick .bb-eye-a   { animation: bb-to-smile-a calc(1.8s * var(--k)) both; }
.bb-i-balloon.do-trick .bb-eye-h   { animation: bb-to-smile-h calc(1.8s * var(--k)) both; }
@keyframes bb-sway { 0%, 100% { transform: none; } 25% { transform: translateY(-.4px) rotate(9deg); } 50% { transform: rotate(-6deg); } 75% { transform: translateY(-.2px) rotate(4deg); } }

/* 狗勾的太阳只有六道光芒（左右让给耳朵），转一圈会对不上，所以改成闪两下 */
.bb.bb-dog.bb-i-sun.do-trick .bb-sunrays { animation: bb-sunpulse calc(1.4s * var(--k)) both ease-in-out; }
@keyframes bb-sunpulse { 0%, 100% { transform: none; } 25%, 70% { transform: scale(1.14); } 48% { transform: scale(.96); } }

/* 兔兔：大多数图标是整只缩小后再长出长耳朵，所以支点跟着一起挪；托在下巴下面的东西各自按自己的中心动 */
.bb.bb-bunny .bb-swing, .bb.bb-bunny .bb-clap { transform-box: view-box; transform-origin: 12px 9.47px; }
.bb.bb-bunny.bb-i-chat .bb-body { transform-box: view-box; transform-origin: 3px 21.8px; }
.bb.bb-bunny.bb-i-settings .bb-gearspin { transform-box: view-box; transform-origin: 18.3px 7.2px; }
.bb.bb-bunny.bb-i-location .bb-body { transform-box: view-box; transform-origin: 12px 21.8px; }
.bb.bb-bunny.bb-i-sun .bb-sunrays { transform-box: view-box; transform-origin: 12px 13.8px; }
.bb.bb-bunny.bb-i-sprout .bb-stem { transform-box: view-box; transform-origin: 12px 14.41px; }
.bb.bb-bunny.bb-i-sprout .bb-leaves { transform-box: view-box; transform-origin: 12px 12.67px; }
.bb.bb-bunny.bb-i-balloon .bb-balloon { transform-box: view-box; transform-origin: 18.5px 15.1px; }
.bb.bb-bunny.bb-i-rocket .bb-flame { transform-box: view-box; transform-origin: 12px 20.4px; }
.bb.bb-bunny.bb-i-alarm.do-trick .bb-body { transform-box: view-box; transform-origin: 12px 14.6px; }
.bb.bb-bunny .bb-love, .bb.bb-bunny .bb-star { transform-box: fill-box; transform-origin: 50% 50%; }
.bb.bb-bunny .bb-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.bb.bb-bunny.bb-i-rocket .bb-flame { transform-box: view-box; transform-origin: 12px 20.4px; }
/* 兔兔的太阳只有下面五道光芒，转一下会对不上，所以和狗勾一样闪两下 */
.bb.bb-bunny.bb-i-sun.do-trick .bb-sunrays { animation: bb-sunpulse calc(1.4s * var(--k)) both ease-in-out; }
/* 星星托在下巴下面，不往上跳，原地翻一下，眼睛往下看 */
.bb.bb-bunny.bb-i-star.do-trick .bb-star  { animation: bb-star-turn calc(1.2s * var(--k)) both; }
.bb.bb-bunny.bb-i-star.do-trick .bb-eye-a { animation: bb-look-down calc(1.2s * var(--k)) both ease-in-out; }
@keyframes bb-star-turn {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 40% { transform: scale(1.22) rotate(48deg); }
  64% { transform: rotate(72deg); } 72% { transform: scale(1.06) rotate(72deg); } 80%, 100% { transform: rotate(72deg); } }
@keyframes bb-look-down { 0%, 80%, 100% { transform: none; } 30%, 50% { transform: translateY(.4px); } }
@media (prefers-reduced-motion: reduce) {
  .bb.idle .bb-body, .bb.idle .bb-eye-a { animation: none; }
}