スクロールで太字化する強調文

<div class="d02-08-10-stage">
          <span class="d02-08-10-hint">↓ scroll</span>
          <div class="d02-08-10-scroll">
            <div class="d02-08-10-pad-top"></div>
            <p class="d02-08-10-emph">小さな一歩が、大きな変化になる。</p>
            <div class="d02-08-10-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-10{padding:0;display:block}
        .d02-08-10-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d02-08-10-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-10-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 26px}
        .d02-08-10-pad-top{height:110px}
        .d02-08-10-pad-bottom{height:150px}
        .d02-08-10-emph{
          margin:0;font-size:25px;line-height:1.7;color:#1a2333;font-weight:400;
          -webkit-text-stroke:var(--stroke,0px) #1a2333;
          text-shadow:0 0 1px rgba(37,99,235,var(--shadow-op,0));
          transition:font-weight .05s linear;
        }

(function(){
        var scroller = document.querySelector('#item-02-08-10 .d02-08-10-scroll');
        var emph = document.querySelector('#item-02-08-10 .d02-08-10-emph');
        if(!scroller || !emph) return;
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          emph.style.fontWeight = Math.round(400 + progress * 400);
          emph.style.setProperty('--stroke', (progress * 0.7).toFixed(2) + 'px');
          emph.style.setProperty('--shadow-op', progress.toFixed(2));
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();