カチッと鳴るロック解除

<div class="d08-11-07-stage">
          <button class="d08-11-07-lock" type="button" aria-label="ロック解除">
            <svg class="d08-11-07-icon" viewBox="0 0 24 24" width="34" height="34" aria-hidden="true">
              <rect x="5" y="11" width="14" height="10" rx="2" fill="currentColor"/>
              <path class="d08-11-07-shackle" d="M8 11V8a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2.4" fill="none" stroke-linecap="round"/>
            </svg>
          </button>
          <span class="d08-11-07-status">タップしてロック解除</span>
        </div>

.d08-11-07-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-11-07-lock{background:none;border:none;cursor:pointer;padding:8px;color:#6b7280;transition:color .25s}
        .d08-11-07-lock.is-unlocked{color:#22c55e}
        .d08-11-07-icon{display:block}
        .d08-11-07-shackle{transition:transform .3s cubic-bezier(.4,0,.2,1);transform-origin:80% 100%}
        .d08-11-07-lock.is-unlocked .d08-11-07-shackle{transform:translateX(4px) rotate(-18deg)}
        .d08-11-07-lock.is-snap .d08-11-07-icon{animation:d08-11-07-snap .28s cubic-bezier(.3,1.8,.4,1)}
        @keyframes d08-11-07-snap{0%{transform:scale(1)}40%{transform:scale(.86)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
        .d08-11-07-status{font-size:11px;font-weight:700;color:#9aa0ad}

(function(){
        var lock=document.querySelector('#item-08-11-07 .d08-11-07-lock');
        var status=document.querySelector('#item-08-11-07 .d08-11-07-status');
        if(!lock||!status)return;
        var timer=null;
        lock.addEventListener('click',function(){
          if(timer)clearTimeout(timer);
          lock.classList.add('is-unlocked');
          status.textContent='カチッ、解除されました';
          lock.classList.remove('is-snap');void lock.offsetWidth;lock.classList.add('is-snap');
          timer=setTimeout(function(){
            lock.classList.remove('is-unlocked');
            status.textContent='タップしてロック解除';
          },1800);
        });
      })();