ドラッグ中のドロップゾーン強調演出

<div class="d04-04-04-zone">
          <svg class="d04-04-04-ic" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 16V4M12 4l-4 4M12 4l4 4"></path>
            <path d="M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"></path>
          </svg>
          <p class="d04-04-04-text">ここにファイルをドラッグ</p>
        </div>

.d04-04-04 .d04-04-04-zone{width:100%;max-width:210px;padding:26px 16px;border:2px dashed #c4b5fd;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#f9fafb;transition:background .3s ease,border-color .3s ease}
        .d04-04-04 .d04-04-04-text{font-size:12px;color:#7c7c8a;margin:0}
        .d04-04-04 .d04-04-04-zone.over{animation:d544wave 1s ease-in-out infinite;background:#f5f3ff;border-color:#8b5cf6}
        .d04-04-04 .d04-04-04-zone.over .d04-04-04-ic{stroke:#7c3aed}
        @keyframes d544wave{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.35)}50%{box-shadow:0 0 0 10px rgba(139,92,246,0)}}

(function(){
          var root=document.currentScript.closest('.item');
          var zone=root.querySelector('.d04-04-04-zone');
          ['dragenter','dragover'].forEach(function(ev){
            zone.addEventListener(ev,function(e){e.preventDefault();zone.classList.add('over');});
          });
          ['dragleave','drop'].forEach(function(ev){
            zone.addEventListener(ev,function(e){e.preventDefault();zone.classList.remove('over');});
          });
          setInterval(function(){
            zone.classList.add('over');
            setTimeout(function(){zone.classList.remove('over');},1400);
          },3000);
        })();