バッジ獲得演出

<div class="d09-06-01-box">
          <div class="d09-06-01-stage">
            <div class="d09-06-01-ring"></div>
            <div class="d09-06-01-badge">
              <svg viewBox="0 0 24 24" width="30" height="30"><path d="M12 2l2.9 6.1 6.7.6-5.1 4.4 1.6 6.6L12 16.6l-5.9 3.1 1.6-6.6-5.1-4.4 6.7-.6z" fill="#fff"/></svg>
            </div>
          </div>
          <button type="button" class="d09-06-01-btn">バッジを獲得</button>
        </div>

.d09-06-01-box{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d09-06-01-stage{position:relative;width:76px;height:76px}
        .d09-06-01-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #ffd166;opacity:0}
        .d09-06-01-box.is-on .d09-06-01-ring{animation:d09-06-01-pulse 1s ease-out .55s}
        @keyframes d09-06-01-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
        .d09-06-01-badge{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
          background:linear-gradient(145deg,#ffd166,#f4a300);box-shadow:0 4px 14px rgba(244,163,0,.4);
          transform:scale(0) rotate(-200deg);opacity:0;
          transition:transform .6s cubic-bezier(.2,1.6,.4,1),opacity .4s ease}
        .d09-06-01-box.is-on .d09-06-01-badge{transform:scale(1) rotate(0deg);opacity:1}
        .d09-06-01-btn{border:none;border-radius:999px;padding:9px 22px;background:#1e293b;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

(function(){
        var root=document.getElementById('item-09-06-01');
        if(!root)return;
        var box=root.querySelector('.d09-06-01-box');
        var btn=root.querySelector('.d09-06-01-btn');
        btn.addEventListener('click',function(){
          box.classList.remove('is-on');
          void box.offsetWidth;
          box.classList.add('is-on');
        });
      })();