.bb-global-counter {
  position: relative;
  isolation: isolate;
}

.demo-bubble-burst {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.demo-bubble-burst i {
  --bubble-size: 6px;
  --bubble-x: 0px;
  --bubble-rise: -28px;
  --bubble-duration: 1500ms;
  position: absolute;
  left: 29%;
  bottom: 9px;
  width: var(--bubble-size);
  height: var(--bubble-size);
  box-sizing: border-box;
  border: 1.25px solid color-mix(in srgb, #25d8dc 82%, white);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff 0 9%, transparent 12%),
    color-mix(in srgb, #25d8dc 9%, transparent);
  box-shadow: inset -1px -1px 2px #25d8dc35, 0 0 3px #25d8dc38;
  opacity: 0;
  animation: a231-bubble-rise-pop var(--bubble-duration) cubic-bezier(.25, .54, .32, 1) forwards;
}

.demo-bubble-burst i:nth-child(1) { --bubble-size: 4px; --bubble-x: -16px; --bubble-rise: -24px; --bubble-duration: 1340ms; animation-delay: 0ms; }
.demo-bubble-burst i:nth-child(2) { --bubble-size: 7px; --bubble-x: -10px; --bubble-rise: -31px; --bubble-duration: 1580ms; animation-delay: 180ms; }
.demo-bubble-burst i:nth-child(3) { --bubble-size: 5px; --bubble-x: -5px; --bubble-rise: -26px; --bubble-duration: 1420ms; animation-delay: 390ms; }
.demo-bubble-burst i:nth-child(4) { --bubble-size: 8px; --bubble-x: 1px; --bubble-rise: -33px; --bubble-duration: 1660ms; animation-delay: 610ms; }
.demo-bubble-burst i:nth-child(5) { --bubble-size: 4px; --bubble-x: 7px; --bubble-rise: -27px; --bubble-duration: 1310ms; animation-delay: 840ms; }
.demo-bubble-burst i:nth-child(6) { --bubble-size: 6px; --bubble-x: 13px; --bubble-rise: -30px; --bubble-duration: 1540ms; animation-delay: 1050ms; }
.demo-bubble-burst i:nth-child(7) { --bubble-size: 5px; --bubble-x: 18px; --bubble-rise: -23px; --bubble-duration: 1370ms; animation-delay: 1260ms; }
.demo-bubble-burst i:nth-child(8) { --bubble-size: 7px; --bubble-x: 22px; --bubble-rise: -32px; --bubble-duration: 1620ms; animation-delay: 1430ms; }
.demo-bubble-burst i:nth-child(9) { --bubble-size: 4px; --bubble-x: 27px; --bubble-rise: -25px; --bubble-duration: 1390ms; animation-delay: 1590ms; }

@keyframes a231-bubble-rise-pop {
  0% { opacity: 0; transform: translate(0, 2px) scale(.55); }
  14% { opacity: .9; transform: translate(0, -2px) scale(1); }
  76% { opacity: .8; transform: translate(var(--bubble-x), calc(var(--bubble-rise) + 4px)) scale(1.03); }
  90% { opacity: .7; border-width: 1px; transform: translate(var(--bubble-x), var(--bubble-rise)) scale(1.14); }
  100% { opacity: 0; border-width: 0; transform: translate(var(--bubble-x), calc(var(--bubble-rise) - 2px)) scale(1.68); }
}

html[data-theme="light"] .demo-bubble-burst i {
  border-color: #087f87;
  background: radial-gradient(circle at 30% 28%, #fff 0 9%, transparent 12%),
    color-mix(in srgb, #25d8dc 8%, transparent);
  box-shadow: inset -1px -1px 2px #087f8730, 0 0 3px #087f8730;
}

@media (prefers-reduced-motion: reduce) {
  .demo-bubble-burst { display: none; }
}