読了達成でバッジが弾けるお祝い進捗バー

<div class="d06-09-11-wrap">
          <div class="d06-09-11-head">
            <div class="d06-09-11-track"><span class="d06-09-11-fill"></span></div>
            <span class="d06-09-11-badge"><span class="d06-09-11-check">&#10003;</span></span>
          </div>
          <div class="d06-09-11-body">
            <section><h4>はじめに</h4><p>スクロールして最後まで読み進めると、右のバッジがチェックマークとともに弾けてお祝いします。</p></section>
            <section><h4>目的</h4><p>読了の達成感を演出することで、記事を最後まで読み切るモチベーションを高めます。</p></section>
            <section><h4>実装</h4><p>スクロール量が100%に達した瞬間だけ、特別なアニメーションクラスを付与します。</p></section>
            <section><h4>まとめ</h4><p>ちょっとした演出が読者の満足度を後押しします。</p></section>
          </div>
        </div>

.prev.d06-09-11{padding:0;display:block}
        .d06-09-11-wrap{height:260px;display:flex;flex-direction:column}
        .d06-09-11-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
        .d06-09-11-track{flex:1;height:6px;background:#eceef5;border-radius:99px;overflow:hidden}
        .d06-09-11-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#4f7cf7,#9b5cf6);transition:width .1s linear}
        .d06-09-11-badge{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#e6e8f0;display:flex;align-items:center;justify-content:center;transition:background .3s}
        .d06-09-11-check{font-size:13px;font-weight:800;color:#fff;opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}
        .d06-09-11-badge.is-complete{background:#22b573;animation:d1725pop .5s ease}
        .d06-09-11-badge.is-complete .d06-09-11-check{opacity:1;transform:scale(1)}
        @keyframes d1725pop{0%{box-shadow:0 0 0 0 rgba(34,181,115,.5)}100%{box-shadow:0 0 0 10px rgba(34,181,115,0)}}
        .d06-09-11-body{flex:1;overflow-y:auto;padding:6px 18px 16px}
        .d06-09-11-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-11-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-11-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-11');if(!root)return;
        var body=root.querySelector('.d06-09-11-body');
        var fill=root.querySelector('.d06-09-11-fill');
        var badge=root.querySelector('.d06-09-11-badge');
        function upd(){
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?Math.min(100,(body.scrollTop/max)*100):0;
          fill.style.width=pct+'%';
          badge.classList.toggle('is-complete',pct>=99.5);
        }
        body.addEventListener('scroll',upd);upd();
      })();