/* 更丰富的小生态：蝴蝶 / 蜜蜂 / 兔子 / 小猫 / 池塘 / 青蛙 / 蜗牛 / 瓢虫 */

.pond{position:absolute;left:8px;bottom:64px;width:128px;opacity:.82}
.pond svg{display:block;width:100%;height:100%}
.grass{position:absolute;left:190px;bottom:52px;width:46px;opacity:.7}
.grass svg{display:block;width:100%;height:100%}

.butterfly{left:13%;top:118px;width:40px;animation:flutter 6s ease-in-out infinite}
.bee{right:14%;top:92px;width:30px;animation:buzz 5s ease-in-out infinite}
.rabbit{left:14px;bottom:224px;width:44px;animation:hop 1.7s ease-in-out infinite}
.cat{right:16px;bottom:296px;width:52px;animation:catbob 3.6s ease-in-out infinite}
.frog{left:122px;bottom:60px;width:38px;animation:hopfrog 2.3s ease-in-out infinite}
.octopus{left:80px;bottom:92px;width:32px;animation:bob 3.8s ease-in-out infinite}
.snail{left:184px;bottom:56px;width:36px;animation:crawl 13s linear infinite}
.ladybug{right:126px;bottom:56px;width:28px;animation:crawl 15s linear infinite reverse}

/* 天气联动：晴天蝴蝶蜜蜂，雨天青蛙 */
.butterfly,.bee,.frog{opacity:0;transition:opacity 1.6s ease}
body[data-weather="sunny"] .butterfly,
body[data-weather="sunny"] .bee{opacity:.94}
body[data-weather="rain"] .frog{opacity:.94}

@keyframes flutter{
  0%,100%{transform:translate(0,0) scaleX(1)}
  25%{transform:translate(16px,-14px) scaleX(.72)}
  50%{transform:translate(4px,-26px) scaleX(1)}
  75%{transform:translate(-14px,-12px) scaleX(.72)}
}
@keyframes buzz{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(15px,-10px)}
  50%{transform:translate(6px,-21px)}
  75%{transform:translate(-11px,-8px)}
}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes catbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes hopfrog{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}
@keyframes crawl{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}