Reaction Count Badge

<button type="button" class="nuda-reaction-badge" aria-label="42 reactions">
  <span class="nuda-reaction-badge__emoji" aria-hidden="true">🔥</span>
  <span class="nuda-reaction-badge__count">
    <span class="nuda-reaction-badge__digit nuda-reaction-badge__digit--out" aria-hidden="true">41</span>
    <span class="nuda-reaction-badge__digit nuda-reaction-badge__digit--in">42</span>
  </span>
</button>

/* Reaction Count Badge
   Old number slides out, new number slides in.
   Swap the two .nuda-reaction-badge__digit text values in JS to count up. */

.nuda-reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(255, 180, 94, 0.12);
  border: 1px solid rgba(255, 180, 94, 0.35);
  border-radius: 999px;
  color: #ffb45e;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nuda-reaction-badge:hover {
  background: rgba(255, 180, 94, 0.2);
  transform: translateY(-1px);
}

.nuda-reaction-badge__emoji {
  font-size: 13px;
  line-height: 1;
  animation: nuda-rb-wiggle 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.nuda-reaction-badge__count {
  position: relative;
  display: inline-block;
  min-width: 1.6em;
  height: 1.1em;
  overflow: hidden;
  line-height: 1.1em;
}

.nuda-reaction-badge__digit {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: left;
}

.nuda-reaction-badge__digit--out {
  animation: nuda-rb-out 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.nuda-reaction-badge__digit--in {
  animation: nuda-rb-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nuda-rb-wiggle {
  0%, 90%, 100% { transform: rotate(0); }
  93% { transform: rotate(-12deg); }
  96% { transform: rotate(10deg); }
}
@keyframes nuda-rb-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}
@keyframes nuda-rb-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-reaction-badge,
  .nuda-reaction-badge__emoji,
  .nuda-reaction-badge__digit {
    animation: none;
    transition: none;
    transform: none;
  }
  .nuda-reaction-badge__digit--out { display: none; }
}