@keyframes bellShake{0%,to{transform:rotate(0deg) scale(1)}10%,30%,50%,70%,90%{transform:rotate(-12deg) scale(1.5)}20%,40%,60%,80%{transform:rotate(12deg) scale(1.25)}}@keyframes pulseRing{0%{transform:scale(.8);opacity:1}to{transform:scale(2.2);opacity:0}}@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes badgeGlow{0%,to{box-shadow:0 0 0 0 rgba(220,38,38,.7)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}.notification-bell-animate{animation:bellShake .6s ease-in-out}.notification-badge-animate{animation:badgePop .5s ease-in-out,badgeGlow 1.5s ease-in-out}.notification-bell-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.notification-bell-wrapper:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background:rgba(220,38,38,.2);opacity:0;pointer-events:none}.notification-bell-wrapper.has-pulse:before{animation:pulseRing 1.5s ease-out}.notification-badge{transition:all .3s ease-in-out}@media (max-width:640px){@keyframes bellShakeMobile{0%,to{transform:rotate(0deg) scale(1)}25%,75%{transform:rotate(-10deg) scale(1.25)}50%{transform:rotate(10deg) scale(1.25)}}.notification-bell-animate{animation:bellShakeMobile .5s ease-in-out}.notification-badge-animate{animation:badgePop .4s ease-in-out}}