.mbar a{transition:transform .15s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.mbar a:active{transform:scale(.9);background:rgba(17,130,252,.12)}
.mbar a svg{display:inline-block}
.mbar a:nth-child(1) svg{animation:mbRing 2.4s ease-in-out infinite;transform-origin:50% 60%;color:#e53935}
@keyframes mbRing{0%,60%,100%{transform:rotate(0)}5%{transform:rotate(-18deg)}10%{transform:rotate(18deg)}15%{transform:rotate(-16deg)}20%{transform:rotate(16deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(10deg)}35%{transform:rotate(0)}}
.mbar a:nth-child(2) svg{animation:mbBounce 1.6s ease-in-out infinite;color:#0068ff}
@keyframes mbBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px) scale(1.08)}50%{transform:translateY(0)}65%{transform:translateY(-2px)}}
.mbar a:nth-child(3){position:relative}
.mbar a:nth-child(3) svg{animation:mbWiggle 3s ease-in-out infinite;color:#a334fa}
@keyframes mbWiggle{0%,70%,100%{transform:rotate(0) scale(1)}75%{transform:rotate(-12deg) scale(1.1)}82%{transform:rotate(12deg) scale(1.1)}90%{transform:rotate(-6deg)}}
.mbar a:nth-child(3)::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:#ff3b30;border:2px solid #fff;animation:mbBadge 1.2s ease-in-out infinite}
@keyframes mbBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.mbar a:nth-child(4) svg{animation:mbSwing 2.8s ease-in-out infinite;transform-origin:50% 0}
@keyframes mbSwing{0%,100%{transform:rotate(0)}20%{transform:rotate(10deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.mbar a svg,.mbar a::after{animation:none!important}}