Thumbs Up Counter

<button type="button" class="nuda-thumbs-counter" aria-label="1248 thumbs up">
  <svg class="nuda-thumbs-counter__icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M7 10v10H4V10h3zm3 0l4-7c1.5 0 2.5 1 2.5 2.5L15.5 9H21l-2 11h-9V10z"
      fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
  </svg>
  <span class="nuda-thumbs-counter__num" aria-hidden="true">
    <span class="nuda-thumbs-counter__col"><span>1</span></span>
    <span class="nuda-thumbs-counter__col nuda-thumbs-counter__col--d1"><span>2</span></span>
    <span class="nuda-thumbs-counter__col nuda-thumbs-counter__col--d2"><span>4</span></span>
    <span class="nuda-thumbs-counter__col nuda-thumbs-counter__col--d3"><span>8</span></span>
  </span>
</button>

/* Thumbs Up Counter
   Each digit "rolls up" from below in sequence.
   Update digit text in JS to count further. */

.nuda-thumbs-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: #0c0c10;
  border: 1px solid #1c1c22;
  border-radius: 999px;
  color: #fafafa;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.nuda-thumbs-counter:hover {
  border-color: #6ee7b7;
  background: #111114;
}

.nuda-thumbs-counter__icon {
  width: 18px;
  height: 18px;
  color: #6ee7b7;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nuda-thumbs-counter:hover .nuda-thumbs-counter__icon {
  transform: rotate(-12deg) scale(1.1);
}

.nuda-thumbs-counter__num {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.nuda-thumbs-counter__col {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  overflow: hidden;
  position: relative;
}

.nuda-thumbs-counter__col span {
  display: block;
  animation: nuda-tc-roll 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nuda-thumbs-counter__col--d1 span { animation-delay: 80ms; }
.nuda-thumbs-counter__col--d2 span { animation-delay: 160ms; }
.nuda-thumbs-counter__col--d3 span { animation-delay: 240ms; }

@keyframes nuda-tc-roll {
  0% { transform: translateY(110%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.nuda-thumbs-counter:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-thumbs-counter,
  .nuda-thumbs-counter__icon,
  .nuda-thumbs-counter__col span {
    transition: none;
    animation: none;
    transform: none;
  }
}