.ob{--drive:1;--road:#ffffff8c}[dir=rtl] .ob{--drive:-1}.ob-stack{place-items:center;display:grid}.ob-stack>*{grid-area:1/1;transition:opacity .28s,transform .34s cubic-bezier(.16,.84,.3,1)}.ob-idle{align-items:center;gap:.6rem;display:inline-flex}.ob-done{opacity:0;align-items:center;gap:.5rem;display:inline-flex;transform:translateY(8px)}.ob[data-state=sending] .ob-idle,.ob[data-state=done] .ob-idle{opacity:0;transform:translateY(-8px)}.ob[data-state=done] .ob-done{opacity:1;transform:none}.ob-road{inset-inline:14%;opacity:0;background-image:linear-gradient(to right, var(--road) 0 10px, transparent 10px 20px);background-repeat:repeat-x;background-size:20px 2px;height:2px;transition:opacity .3s;position:absolute;top:50%}.ob[data-state=sending] .ob-road{opacity:1;animation:.6s linear infinite ob-road}@keyframes ob-road{to{background-position-x:calc(var(--drive) * 20px)}}.ob-truck{top:50%;margin-top:-12px;opacity:0;pointer-events:none;width:52px;transform:scaleX(var(--drive)) translateX(0);margin-inline-start:-26px;position:absolute;inset-inline-start:50%}.ob[data-state=sending] .ob-truck{animation:1.5s cubic-bezier(.55,0,.45,1) infinite ob-drive}.ob[data-state=done] .ob-truck{animation:.55s cubic-bezier(.5,0,.75,0) forwards ob-leave}@keyframes ob-drive{0%{opacity:0;transform:scaleX(var(--drive)) translateX(-130px)}12%,88%{opacity:1}to{opacity:0;transform:scaleX(var(--drive)) translateX(130px)}}@keyframes ob-leave{0%{opacity:1;transform:scaleX(var(--drive)) translateX(0)}to{opacity:0;transform:scaleX(var(--drive)) translateX(150px)}}.ob[data-state=sending] .ob-truck-box{transform-origin:50% 100%;animation:.42s ease-in-out infinite alternate ob-jostle}@keyframes ob-jostle{to{transform:translateY(-1px)rotate(-1.4deg)}}.ob-tick{animation:none}.ob[data-state=done] .ob-tick circle{animation:.45s cubic-bezier(.16,.84,.3,1) both ob-ring}.ob[data-state=done] .ob-tick path{stroke-dasharray:22;stroke-dashoffset:22px;animation:.4s cubic-bezier(.16,.84,.3,1) .16s forwards ob-draw}@keyframes ob-ring{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes ob-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.ob-truck,.ob[data-state=sending] .ob-road{animation:none}.ob[data-state=sending] .ob-truck{opacity:1;transform:scaleX(var(--drive))}.ob[data-state=done] .ob-truck{opacity:0}.ob[data-state=done] .ob-tick circle,.ob[data-state=done] .ob-tick path{stroke-dashoffset:0;animation:none}.ob-stack>*{transition:none}}