히트스톱 (타격 정지)

<div class="hsstage"><div class="hshero" id="hero"></div><div class="hstarget" id="tgt2"><div class="hsburst" id="burst"></div></div></div><div class="hslabel" id="lbl">STRIKING</div>

.hsstage{position:relative;width:100%;height:100%}
.hshero{position:absolute;left:22%;top:50%;width:clamp(18px,8vmin,28px);height:clamp(18px,8vmin,28px);margin-top:-14px;border-radius:5px;background:var(--accent)}
.hstarget{position:absolute;left:58%;top:50%;width:clamp(24px,10vmin,38px);height:clamp(24px,10vmin,38px);margin-top:-19px;border-radius:6px;background:var(--surface);border:2px solid var(--line)}
.hsburst{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 70%,transparent), transparent 70%);opacity:0;transform:scale(0.3)}
.hslabel{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);font:700 clamp(9px,2.6vmin,11px) monospace;color:var(--muted);letter-spacing:.1em}

const hero=document.getElementById('hero');
const tgt=document.getElementById('tgt2');
const burst=document.getElementById('burst');
const lbl=document.getElementById('lbl');
hero.style.transition='transform .34s cubic-bezier(.5,0,.4,1)';
tgt.style.transition='transform .06s linear';
burst.style.transition='opacity .18s ease-out, transform .18s ease-out';
function swing(){
  lbl.textContent='STRIKING';
  hero.style.transform='translateX(0)';
  requestAnimationFrame(function(){ hero.style.transform='translateX(90px)'; });
  setTimeout(impact, 330);
}
function impact(){
  lbl.textContent='HIT-STOP';
  hero.style.transitionDuration='0s';
  tgt.style.transform='scale(0.82)';
  burst.style.opacity='1'; burst.style.transform='scale(1)';
  setTimeout(function(){
    lbl.textContent='RECOVER';
    tgt.style.transitionDuration='.3s';
    tgt.style.transform='scale(1)';
    burst.style.opacity='0'; burst.style.transform='scale(1.4)';
    hero.style.transitionDuration='.3s';
    hero.style.transform='translateX(40px)';
    setTimeout(function(){
      hero.style.transitionDuration='.34s';
      hero.style.transform='translateX(0)';
      setTimeout(swing, 500);
    }, 320);
  }, 90);
}
setTimeout(swing, 400);