進捗バー付き自動消去トースト

<div class="stage09-12-03">
          <div class="toast09-12-03">
            <div class="row09-12-03">
              <span class="ic09-12-03">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#4f46e5" stroke-width="2.2"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><circle cx="12" cy="16.2" r=".3" fill="#4f46e5"/></svg>
              </span>
              <span class="tx09-12-03">アップデートがあります</span>
            </div>
            <div class="track09-12-03"><div class="bar09-12-03"></div></div>
          </div>
        </div>

.d09-12-03{ background:#f4f5fb; }
        .d09-12-03 .stage09-12-03{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-03 .toast09-12-03{
          position:absolute; left:50%; bottom:18px; width:224px;
          transform:translate(-50%,140%); opacity:0;
          background:#fff; border-radius:11px; padding:11px 13px 10px;
          box-shadow:0 10px 26px rgba(20,30,50,.16);
          transition:transform .45s ease, opacity .35s ease;
        }
        .d09-12-03 .toast09-12-03.show09-12-03{ transform:translate(-50%,0); opacity:1; }
        .d09-12-03 .row09-12-03{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
        .d09-12-03 .tx09-12-03{ font-size:12px; color:#2b2f42; font-weight:700; }
        .d09-12-03 .track09-12-03{ height:4px; border-radius:99px; background:#e6e7f2; overflow:hidden; }
        .d09-12-03 .bar09-12-03{ height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#a855f7); transform-origin:left; }
        .d09-12-03 .toast09-12-03.run09-12-03 .bar09-12-03{ animation:shrink09-12-03 2.6s linear forwards; }
        @keyframes shrink09-12-03{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-03');
        var toast = root.querySelector('.toast09-12-03');
        var bar = root.querySelector('.bar09-12-03');
        function cycle(){
          toast.classList.remove('run09-12-03');
          void bar.offsetWidth;
          toast.classList.add('show09-12-03');
          requestAnimationFrame(function(){ toast.classList.add('run09-12-03'); });
          setTimeout(function(){ toast.classList.remove('show09-12-03','run09-12-03'); }, 2700);
        }
        cycle();
        setInterval(cycle, 4200);
      })();