*,*::after,*::before{box-sizing:border-box}
body{background:black}
.steam svg{display:flex}
.plate,.plate::before,.plate::after{display:inline-block}
#cup1,#cup1::after,.plate::before,.plate::after,.handle,.handle::after,.coffee,.steam,.steam svg{position:absolute}
.plate{position:relative}
#cup1::after,.plate::before,.plate::after,.handle::after{content:""}
.plate,.plate::before,.plate::after,.coffee{border-radius:50%}
#cup1,.plate,.handle::after,.st0,.steam svg,.steam-cloud{-webkit-transform:var(--nLab);-moz-transform:var(--nLab);-ms-transform:var(--nLab);-o-transform:var(--nLab);transform:var(--nLab)}
.cloud-1,.cloud-2,.cloud-3{-webkit-animation:var(--anim);-moz-animation:var(--anim);-ms-animation:var(--anim);-o-animation:var(--anim);animation:var(--anim)}

#cup1{--wup1:15;--hup1:9;top:15vw;left:20vw;width:calc(var(--wup1)*1vw);height:calc(var(--hup1)*1vw);background:linear-gradient(245deg,#ddd 0,grey .5%,white 100%);background-color:white;border-radius:70% 70%;border-top-left-radius:70% 27.733%;border-top-right-radius:70% 27.733%;box-shadow:.083vw 0 1.25vw #eee}

#cup1::after{background:linear-gradient(-6deg,black 1%,rgba(126,89,39,1) 68%,rgba(237,152,60,1) 100%);width:85%;height:26%;top:9%;left:7.5%;border:solid rgba(126,92,39,1);border-radius:65% 65% 57.5% 57.5%}

.st0{--nLab:translate3d(calc(var(--wup1)*-.5%),calc(var(--hup1)*6.2%),0)rotateX(75deg)scale(1.875,1.45);opacity:.375;fill:#F4A460}
.steam{top:-5%;width:100%;z-index:1}
.steam svg{--nLab:translate3d(-10%,-50%,0)}
.steam-cloud{--nLab:translate3d(var(--cN),0,0);fill:none;stroke:#f7f7f7;stroke-width:42;stroke-linecap:round;-webkit-filter:blur(2vw);-moz-filter:blur(2vw);-ms-filter:blur(2vw);-o-filter:blur(2vw);filter:blur(2vw)}

.cloud-1,.cloud-2,.cloud-3{--anim:stC var(--time) ease-out var(--num);stroke:#fff;opacity:0;stroke-dasharray:284;stroke-dashoffset:0}

@-webkit-keyframes stC{0%{stroke-dashoffset:60;opacity:0}30%{stroke-dashoffset:284;opacity:.18}80%{stroke-dashoffset:568;opacity:.18}100%{stroke-dashoffset:568;opacity:0}}
@-moz-keyframes stC{0%{stroke-dashoffset:60;opacity:0}30%{stroke-dashoffset:284;opacity:.18}80%{stroke-dashoffset:568;opacity:.18}100%{stroke-dashoffset:568;opacity:0}}
@-ms-keyframes stC{0%{stroke-dashoffset:60;opacity:0}30%{stroke-dashoffset:284;opacity:.18}80%{stroke-dashoffset:568;opacity:.18}100%{stroke-dashoffset:568;opacity:0}}
@-o-keyframes stC{0%{stroke-dashoffset:60;opacity:0}30%{stroke-dashoffset:284;opacity:.18}80%{stroke-dashoffset:568;opacity:.18}100%{stroke-dashoffset:568;opacity:0}}
@keyframes stC{0%{stroke-dashoffset:60;opacity:0}30%{stroke-dashoffset:284;opacity:.18}80%{stroke-dashoffset:568;opacity:.18}100%{stroke-dashoffset:568;opacity:0}}

.plate{--nLab:translate3d(-14%,-4.375%,0)rotateX(75deg)rotate(195deg);padding:11% 67.75%;background:#FFFAFA;width:120%;height:200%;box-shadow:inset 0 .416vw .25vw 0 rgba(255,255,255,.5),inset 0 -.416vw .25vw 0 rgba(0,0,0,.78),inset .25vw 0 .16vw 0 rgba(0,0,0,.25),inset -.25vw 0 .16vw 0 rgba(0,0,0,.25),inset 0 .416vw 3.83vw 0 rgba(0,0,0,.4),0 -3.083vw 2.416vw 0 rgba(255,69,0,.75);z-index:-1}

.plate::before{top:11%;left:11%;bottom:11%;right:11%;box-shadow:inset 0 0 .33vw .25vw white,inset 0 .66vw 1.33vw .33vw rgba(0,0,0,.25)}
.plate::after{top:27%;left:27%;bottom:27%;right:27%;box-shadow:0 0 .33vw .25vw tan,inset 0 .66vw 1.33vw .33vw rgba(0,0,0,.3)}

.handle{--sk:-10deg;--po:382.5%,37.5%,0;--rt:180deg;top:0;width:24%;height:57%}

.handle::after{--nLab:skew(var(--sk))translate3d(var(--po))rotateY(var(--rt));width:100%;height:100%;border:solid #777 calc((var(--wup1)/25)*2vw);border-top-left-radius:11vw 12.5vw;border-bottom-left-radius:25.416vw 25vw;border-top-right-radius:3.75vw .416vw;border-bottom-right-radius:3.75vw .416vw;box-shadow:-.416vw .833vw 1.66vw #444;z-index:-1;-webkit-filter:blur(.083vw);-moz-filter:blur(1%);-ms-filter:blur(1%);-o-filter:blur(1%);filter:blur(1%)}

.coffee{background:linear-gradient(290deg,#eee 0,#fff 100%);width:88%;height:28%;top:8.25%;left:6%;box-shadow:.083vw 0 1.25vw #000}