.ship-btn{--b-dark:#1b362f;--b-blue:#c39d63;--b-bll:#d4b074;--b-grey:#6c7486;--b-gd:#3f4656;--b-gl:#cdd9ed;--b-green:#16bf78;--b-sand:#dcb773;--b-sandl:#edd9a9;appearance:none;background:var(--b-dark);cursor:pointer;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);-webkit-tap-highlight-color:transparent;border:0;border-radius:32px;outline:none;width:100%;height:63px;margin:0 auto;padding:0;transition:width .4s cubic-bezier(.4,0,.2,1),transform .3s;display:block;position:relative;overflow:hidden;mask-image:radial-gradient(#fff,#000)}.ship-btn.go{width:240px}.ship-btn:active{transform:scale(.96)}.ship-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.ship-btn.go:disabled{opacity:1}.ship-btn .lbl{--o:1;text-align:center;color:#fff;opacity:var(--o);font-size:16px;font-weight:500;line-height:24px;transition:opacity .3s;position:absolute;top:19px;left:0;right:0}.ship-btn .lbl.idle{transition-delay:.3s}.ship-btn .lbl.done{--o:0}.ship-btn .lbl.done svg{vertical-align:top;fill:none;width:12px;height:10px;stroke:var(--b-green);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16px;margin:7px 0 0 4px;transition:stroke-dashoffset .3s;display:inline-block}.ship-btn .stage{pointer-events:none;width:240px;height:63px;margin-left:-120px;position:absolute;top:0;left:50%}.ship-btn .rail{opacity:0;background:#fff;border-radius:2px;width:6px;height:3px;position:absolute;top:30px;left:100%;box-shadow:15px 0 #fff,30px 0 #fff,45px 0 #fff,60px 0 #fff,75px 0 #fff,90px 0 #fff,105px 0 #fff,120px 0 #fff,135px 0 #fff,150px 0 #fff,165px 0 #fff,180px 0 #fff,195px 0 #fff,210px 0 #fff,225px 0 #fff,240px 0 #fff,255px 0 #fff,270px 0 #fff,285px 0 #fff,300px 0 #fff,315px 0 #fff,330px 0 #fff}.ship-btn .cargo{background:linear-gradient(var(--b-sandl), var(--b-sand));border-radius:2px;width:21px;height:21px;position:absolute;top:21px;right:100%}.ship-btn .cargo:before,.ship-btn .cargo:after{content:"";position:absolute;top:10px;left:0;right:0}.ship-btn .cargo:before{background:#0000001a;height:3px;margin-top:-1px}.ship-btn .cargo:after{background:#00000026;height:1px}.ship-btn .vehicle{z-index:1;width:60px;height:41px;position:absolute;top:11px;left:100%;transform:translate(24px)}.ship-btn .vehicle:before,.ship-btn .vehicle:after{--r:-90deg;content:"";transform-origin:100%;width:20px;height:2px;transform:rotate(var(--r));background:#fff;border-radius:1px;display:block;position:absolute;right:58px}.ship-btn .vehicle:before{top:4px}.ship-btn .vehicle:after{--r:90deg;bottom:4px}.ship-btn .cab-back{background:linear-gradient(#fff, var(--b-gl));z-index:1;border-radius:2px;width:60px;height:41px;position:absolute;top:0;left:0}.ship-btn .cab-front{border-radius:2px 9px 9px 2px;width:26px;height:41px;position:absolute;left:60px;overflow:hidden}.ship-btn .cab-front:before,.ship-btn .cab-front:after{content:"";display:block;position:absolute}.ship-btn .cab-front:before{background:linear-gradient(var(--b-grey), var(--b-gd));width:2px;height:13px;top:14px;left:0}.ship-btn .cab-front:after{background:var(--b-blue);border-radius:2px 9px 9px 2px;width:24px;height:41px;right:0}.ship-btn .windshield{background:var(--b-bll);z-index:1;transform-origin:0;border-radius:2px 8px 8px 2px;width:22px;height:41px;position:absolute;top:0;left:2px;overflow:hidden;transform:perspective(4px)rotateY(3deg)}.ship-btn .windshield:before,.ship-btn .windshield:after{content:"";position:absolute;right:0}.ship-btn .windshield:before{background:var(--b-dark);width:14px;top:0;bottom:0}.ship-btn .windshield:after{background:#ffffff24;width:14px;height:4px;top:7px;transform:skewY(14deg);box-shadow:0 7px #ffffff24}.ship-btn .headlight{transform-origin:100%;background:#f0dc5f;border-radius:2px;width:3px;height:8px;position:absolute;left:83px;transform:scaleX(.8)}.ship-btn .headlight:before{content:"";opacity:0;transform-origin:0;background:linear-gradient(90deg,#f0dc5f,#f0dc5fb3,#f0dc5f00);width:7px;height:4px;margin-top:-2px;position:absolute;top:50%;left:3px;transform:perspective(2px)rotateY(-15deg)scaleX(.94)}.ship-btn .headlight.top{top:4px}.ship-btn .headlight.bottom{bottom:4px}.ship-btn.go .lbl.idle{--o:0;transition-delay:0s}.ship-btn.go .lbl.done{--o:1;transition-delay:4.8s}.ship-btn.go .lbl.done svg{stroke-dashoffset:0;transition-delay:5.1s}.ship-btn.go .vehicle{animation:7s forwards veh}.ship-btn.go .vehicle:before{animation:1.6s .2s forwards hatch1}.ship-btn.go .vehicle:after{animation:1.6s .4s forwards hatch2}.ship-btn.go .headlight:before{animation:7s forwards glow}.ship-btn.go .cargo{animation:7s forwards pkg}.ship-btn.go .rail{animation:7s forwards rails}@keyframes veh{10%,30%{transform:translate(-164px)}40%{transform:translate(-104px)}60%{transform:translate(-320px)}75%,to{transform:translate(24px)}}@keyframes rails{0%,30%{opacity:0;transform:scaleY(.7)translate(0)}35%,65%{opacity:1}70%{opacity:0}to{transform:scaleY(.7)translate(-400px)}}@keyframes glow{0%,30%{opacity:0;transform:perspective(2px)rotateY(-15deg)scaleX(.88)}40%,to{opacity:1;transform:perspective(2px)rotateY(-15deg)scaleX(.94)}}@keyframes hatch1{30%,50%{transform:rotate(32deg)}}@keyframes hatch2{30%,50%{transform:rotate(-32deg)}}@keyframes pkg{8%,10%{opacity:1;transform:translate(40px)}25%{opacity:1;transform:translate(112px)}26%{opacity:0;transform:translate(112px)}27%,to{opacity:0;transform:translate(0)}}