:root{--mainColor:#5f3017}.loader-wrapper{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex;overflow:hidden}.loader-main{position:relative}.loader-title{text-transform:uppercase;letter-spacing:5px;color:var(--mainColor);font-family:PT Sans,sans-serif;font-size:4rem;font-weight:600}.loader-title span{visibility:hidden}.loader-cup{z-index:2;width:100px;height:100px;animation:10s ease-in-out infinite cupAnim;position:absolute;top:-20px;left:43px}.loader-cup:before{z-index:1;content:"";background-color:var(--mainColor);opacity:0;border-radius:10px 100% 100%;width:30px;height:50px;animation:10s ease-in-out infinite coffeeAnim;display:block;position:absolute;bottom:40px;left:-5px;transform:rotate(-60deg)}.loader-cup__img{object-fit:cover;width:100%;height:100%}.loader-progress{width:120%;position:absolute;top:120px;left:50%;transform:translate(-50%)}.loader-progress__area{border:4px solid;border-radius:30px;min-height:50px;position:relative;overflow:hidden}.loader-progress__line{background-color:var(--mainColor);width:115%;height:100%;animation:10s ease-out infinite lineAnim;position:absolute;top:50%;left:-115%;transform:translateY(-50%)}.loader-progress__line:before{content:"";background-color:#fff;border-bottom-left-radius:100%;width:10%;height:100%;display:block;position:absolute;top:0;right:0}.loader-progress__sub{text-transform:uppercase;text-align:center;margin-top:15px;font-size:18px;font-weight:400;animation:1s linear infinite alternate lineSub}@keyframes cupAnim{0%{opacity:0;transform:scale(0)}18%{transform:scale(1.05)}20%{opacity:1;transform:scale(1)}30%{transform:scale(1)rotate(-85deg)}80%{transform:scale(1)rotate(-70deg)}90%{transform:scale(1)rotate(0)}}@keyframes lineAnim{0%{left:-115%}24%{left:-115%}to{left:0}}@keyframes lineSub{0%{opacity:1}to{opacity:.2}}@keyframes coffeeAnim{0%{opacity:0;height:50px;bottom:40px;left:-5px;transform:rotate(-60deg)}25%{opacity:0;height:50px;bottom:40px;left:-5px;transform:rotate(-60deg)}30%{opacity:1;height:160px;bottom:5px;left:-30px;transform:rotate(-65deg)}60%{opacity:1;height:140px;bottom:0;left:-30px;transform:rotate(-75deg)}85%{opacity:0}90%{opacity:0;height:100px;bottom:0;left:-30px;transform:rotate(-85deg)}to{opacity:0;height:50px;bottom:40px;left:-5px;transform:rotate(-60deg)}}