/* BMC V31 — subtle animated notification icon only */
.notification-bell{
  isolation:isolate;
  overflow:visible;
}
.notification-bell::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,23,55,.22),rgba(239,23,55,0) 64%);
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
  z-index:-1;
}
.notification-bell .bell-icon{
  display:inline-block;
  transform-origin:50% 0%;
  will-change:transform;
  filter:drop-shadow(0 0 0 rgba(239,23,55,0));
}
.notification-bell:hover .bell-icon,
.notification-bell:focus-visible .bell-icon{
  animation:bmcBellRing .72s ease-in-out both;
}
.notification-bell:hover::before,
.notification-bell:focus-visible::before{
  opacity:1;
  transform:scale(1);
  transition:.22s ease;
}
.notification-bell b{
  animation:bmcBadgePulse 1.65s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(239,23,55,.58),0 8px 18px rgba(239,23,55,.22);
}
.notification-bell:has(b) .bell-icon{
  animation:bmcBellNotify 4.6s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(239,23,55,.18));
}
.notification-bell:has(b)::before{
  animation:bmcBellHalo 2.8s ease-in-out infinite;
}
@keyframes bmcBellRing{
  0%,100%{transform:rotate(0deg)}
  15%{transform:rotate(-14deg)}
  30%{transform:rotate(12deg)}
  45%{transform:rotate(-8deg)}
  60%{transform:rotate(6deg)}
  75%{transform:rotate(-3deg)}
}
@keyframes bmcBellNotify{
  0%,78%,100%{transform:rotate(0deg)}
  82%{transform:rotate(-11deg)}
  86%{transform:rotate(10deg)}
  90%{transform:rotate(-6deg)}
  94%{transform:rotate(4deg)}
}
@keyframes bmcBadgePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,23,55,.50),0 8px 18px rgba(239,23,55,.22)}
  55%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(239,23,55,0),0 8px 18px rgba(239,23,55,.30)}
}
@keyframes bmcBellHalo{
  0%,100%{opacity:0;transform:scale(.82)}
  45%{opacity:.95;transform:scale(1.03)}
}
[data-theme="light"] .notification-bell::before,
html[data-theme="light"] .notification-bell::before,
body[data-theme="light"] .notification-bell::before{
  background:radial-gradient(circle,rgba(239,23,55,.18),rgba(239,23,55,0) 64%);
}
@media (prefers-reduced-motion: reduce){
  .notification-bell::before,
  .notification-bell .bell-icon,
  .notification-bell b{
    animation:none!important;
    transition:none!important;
  }
}