前景オブジェクト飛び出しパララックス

<div class="view08-12-05">
          <div class="bgdot08-12-05"></div>
          <div class="fgcard08-12-05"><span>FRONT</span></div>
          <div class="scr08-12-05">
            <div class="sp08-12-05">
              <span class="hint08-12-05">↓ 枠内をスクロール<br>前景カードだけ手前へ飛び出します</span>
            </div>
          </div>
        </div>

.d08-12-05{background:#111827;align-items:stretch;}
        .d08-12-05 .view08-12-05{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 50% 40%,#1f2937,#0b0f17 75%);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-12-05 .bgdot08-12-05{
          position:absolute;inset:-30px;will-change:transform;filter:blur(.4px);
          background-image:radial-gradient(rgba(148,163,184,.35) 1.6px,transparent 1.8px);
          background-size:22px 22px;opacity:.7;
        }
        .d08-12-05 .fgcard08-12-05{
          position:relative;width:112px;height:74px;border-radius:12px;will-change:transform;
          background:linear-gradient(135deg,#f472b6,#facc15);
          box-shadow:0 18px 34px rgba(0,0,0,.45);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-12-05 .fgcard08-12-05 span{font-size:12px;font-weight:700;letter-spacing:.12em;color:#111827;}
        .d08-12-05 .scr08-12-05{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-05 .sp08-12-05{height:660px;padding:16px 18px 0;}
        .d08-12-05 .hint08-12-05{display:inline-block;font-size:11.5px;line-height:1.7;color:#e5e7eb;background:rgba(17,24,39,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-05 .scr08-12-05');
        if(!scr)return;
        var bg=document.querySelector('.d08-12-05 .bgdot08-12-05');
        var card=document.querySelector('.d08-12-05 .fgcard08-12-05');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          bg.style.transform='translateY('+(-p*14)+'px)';
          var scale=1+p*0.22;
          card.style.transform='translateY('+(-p*66)+'px) scale('+scale.toFixed(3)+')';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();