체력바 (고스트 딜레이)

<div class="hbwrap"><div class="hplabel">HP</div><div class="hbar"><div class="ghost" id="ghost"></div><div class="real" id="real"></div></div><div class="hbnum" id="hbnum">100</div></div>

.hbwrap{width:min(86%,320px);display:flex;flex-direction:column;gap:6px}
.hplabel{font:700 clamp(9px,2.8vmin,12px) monospace;color:var(--muted);letter-spacing:.08em}
.hbar{position:relative;height:clamp(14px,6.5vmin,22px);border-radius:6px;background:color-mix(in srgb,var(--fg) 12%,transparent);border:1px solid var(--line);overflow:hidden}
.ghost,.real{position:absolute;inset:0;transform-origin:left}
.ghost{background:color-mix(in srgb,var(--accent-2) 42%,var(--bg));transition:transform .6s cubic-bezier(.2,.8,.2,1) .35s}
.real{background:var(--accent-2);transition:transform .12s ease-out}
.hbnum{align-self:flex-end;font:700 clamp(11px,3.2vmin,13px) monospace;color:var(--fg)}

const real=document.getElementById('real');
const ghost=document.getElementById('ghost');
const num=document.getElementById('hbnum');
function setHp(v){
  const hp=Math.max(0,Math.min(1,v));
  real.style.transform='scaleX('+hp+')';
  ghost.style.transform='scaleX('+hp+')';
  num.textContent=Math.round(hp*100);
}
setHp(1);
const seq=[0.68,0.4,0.16,1];
let i=0;
function step(){
  setHp(seq[i]);
  const delay = i===seq.length-1 ? 1500 : 1050;
  i=(i+1)%seq.length;
  setTimeout(step, delay);
}
setTimeout(step, 900);