ファネルチャート(コンバージョン)描画演出

<div class="d05-07-12 io-reveal">
          <div class="d05-07-12-stage" style="--w:100%;--i:0"><span class="d05-07-12-label">訪問 12,400</span></div>
          <div class="d05-07-12-stage" style="--w:70%;--i:1"><span class="d05-07-12-label">カート追加 8,680</span></div>
          <div class="d05-07-12-stage" style="--w:45%;--i:2"><span class="d05-07-12-label">購入 5,580</span></div>
          <div class="d05-07-12-stage" style="--w:28%;--i:3"><span class="d05-07-12-label">リピート 3,472</span></div>
        </div>

.d05-07-12{width:100%;max-width:230px;display:flex;flex-direction:column;gap:6px}
        .d05-07-12-stage{position:relative;width:var(--w);height:34px;margin:0 auto;border-radius:6px;display:flex;align-items:center;justify-content:center;transform:scaleX(0);opacity:0;transform-origin:center}
        .d05-07-12-stage:nth-child(1){background:linear-gradient(90deg,#3b82f6,#60a5fa)}
        .d05-07-12-stage:nth-child(2){background:linear-gradient(90deg,#6366f1,#818cf8)}
        .d05-07-12-stage:nth-child(3){background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
        .d05-07-12-stage:nth-child(4){background:linear-gradient(90deg,#ec4899,#f472b6)}
        .d05-07-12.is-in .d05-07-12-stage{animation:d05-07-12-grow .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .15s)}
        @keyframes d05-07-12-grow{to{transform:scaleX(1);opacity:1}}
        .d05-07-12-label{font-size:10.5px;color:#fff;font-weight:600;white-space:nowrap}