ビリッと破れる削除エフェクト

<div class="d08-11-06-stage">
          <div class="d08-11-06-card">
            <span class="d08-11-06-card-half d08-11-06-half-l">📄 資料.pdf</span>
            <span class="d08-11-06-card-half d08-11-06-half-r">📄 資料.pdf</span>
          </div>
          <button class="d08-11-06-btn" type="button">削除する</button>
        </div>

.d08-11-06-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
        .d08-11-06-card{position:relative;width:180px;height:52px}
        .d08-11-06-card-half{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;font-size:13px;font-weight:600;color:#2a2d3a;padding:0 14px;box-sizing:border-box;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s}
        .d08-11-06-half-l{clip-path:polygon(0 0,52% 0,46% 30%,54% 55%,44% 78%,50% 100%,0 100%)}
        .d08-11-06-half-r{clip-path:polygon(52% 0,100% 0,100% 100%,50% 100%,44% 78%,54% 55%,46% 30%)}
        .d08-11-06-card.is-torn .d08-11-06-half-l{transform:translate(-18px,10px) rotate(-9deg);opacity:0}
        .d08-11-06-card.is-torn .d08-11-06-half-r{transform:translate(18px,-6px) rotate(7deg);opacity:0}
        .d08-11-06-btn{background:#fff;border:1.5px solid #ffd0d5;color:#e11d48;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer}
        .d08-11-06-btn:hover{background:#fff5f6}

(function(){
        var card=document.querySelector('#item-08-11-06 .d08-11-06-card');
        var btn=document.querySelector('#item-08-11-06 .d08-11-06-btn');
        if(!card||!btn)return;
        var timer=null;
        btn.addEventListener('click',function(){
          if(timer)clearTimeout(timer);
          card.classList.remove('is-torn');void card.offsetWidth;card.classList.add('is-torn');
          timer=setTimeout(function(){card.classList.remove('is-torn');},1500);
        });
      })();