レベルアップ演出

<div class="d09-06-02-box">
          <div class="d09-06-02-stage">
            <div class="d09-06-02-ring"></div>
            <div class="d09-06-02-nums">
              <span class="d09-06-02-cur">Lv.4</span>
              <span class="d09-06-02-arrow">→</span>
              <span class="d09-06-02-next">Lv.5</span>
            </div>
          </div>
          <button type="button" class="d09-06-02-btn">レベルアップ</button>
        </div>

.d09-06-02-box{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d09-06-02-stage{position:relative;padding:14px 22px}
        .d09-06-02-ring{position:absolute;inset:0;border-radius:999px;border:2px solid #7c3aed;opacity:0}
        .d09-06-02-box.is-on .d09-06-02-ring{animation:d09-06-02-ring .9s ease-out}
        @keyframes d09-06-02-ring{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
        .d09-06-02-nums{position:relative;display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#312e81}
        .d09-06-02-arrow{color:#a78bfa;font-size:16px}
        .d09-06-02-cur{transition:opacity .25s ease}
        .d09-06-02-box.is-on .d09-06-02-cur{opacity:.35}
        .d09-06-02-next{display:inline-block;opacity:0;transform:translateY(10px) scale(.7);
          transition:opacity .35s ease .25s,transform .4s cubic-bezier(.2,1.6,.4,1) .25s}
        .d09-06-02-box.is-on .d09-06-02-next{opacity:1;transform:translateY(0) scale(1)}
        .d09-06-02-btn{border:none;border-radius:999px;padding:9px 22px;background:#7c3aed;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

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