Milestone Flash

<!-- Milestone Flash — a single outward ping marks the threshold, then a badge settles in -->
<div class="nuda-sc2-milestone">
  <span class="nuda-sc2-milestone__ping" aria-hidden="true"></span>
  <span class="nuda-sc2-milestone__value">1,000</span>
  <span class="nuda-sc2-milestone__badge">Milestone reached</span>
</div>

.nuda-sc2-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
}

.nuda-sc2-milestone__ping {
  position: absolute;
  top: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #e4ff54;
  opacity: 0;
  animation: _nuda-sc2milestone-ping 1.1s cubic-bezier(0,0,.2,1) .3s forwards;
}

.nuda-sc2-milestone__value {
  position: relative;
  font: 800 26px ui-sans-serif,system-ui;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0;
  animation: _nuda-sc2milestone-pop .5s cubic-bezier(.34,1.56,.64,1) .2s forwards;
}

.nuda-sc2-milestone__badge {
  position: relative;
  font: 700 9px ui-sans-serif,system-ui;
  color: #0a0a0a;
  background: #e4ff54;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(4px);
  animation: _nuda-sc2milestone-badge .5s cubic-bezier(.4,0,.2,1) .6s forwards;
}

@keyframes _nuda-sc2milestone-ping {
  0% {
    transform: scale(.6);
    opacity: .7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes _nuda-sc2milestone-pop {
  from {
    opacity: 0;
    transform: scale(.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes _nuda-sc2milestone-badge {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sc2-milestone__ping {
    animation: none !important;
    opacity: 0;
  }
  .nuda-sc2-milestone__value {
    animation: none !important;
    opacity: 1;
    transform: scale(1);
  }
  .nuda-sc2-milestone__badge {
    animation: none !important;
    opacity: 1;
    transform: translateY(0);
  }
}