@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

:root {
 --background: #d74e68;
 --left-side: #ff9568;
 --smile: #ffe073;
 --star: #d74e68;
 --arrow: cfcfcf;
}

html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
}

body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
 width: 100%;
 background: var(--background);
}

.container {
 background-color: #ffffff;
 display: flex;
 width: 460px;
 height: 120px;
 position: relative;
 border-radius: 6px;
 transition: 0.3s ease-in-out;
 &:hover {
  transform: scale(1.04);
 }
}
 
 .left-side {
 background-color: var(--left-side);
 width: 130px;
 height: 120px;
 border-radius: 6px;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 transition: 0.3s;
 overflow: hidden;
}

.right-side {
 width: calc(100% - 130px);
 display: flex;
 align-items: center;
 overflow: hidden;
 cursor: pointer;
 justify-content: space-between;
 white-space: nowrap;
 transition: 0.3s;
 border-radius: 6px;
 &:hover {
  background-color: #f9f7f9;
 }
}

.arrow {
 width: 20px;
 height: 20px;
 margin-right: 20px;
}

.refer {
 font-size: 23px;
 font-family: "Lexend Deca", sans-serif;
 margin-left: 20px;
}

.smile {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: var(--smile);
 position: absolute;
 display: flex;
 align-items: center;
 -webkit-box-shadow: 2px 5px 10px -2px rgba(0,0,0, .2);
}

.eyes {
  width: 6px;
  height: 10px;
  position: absolute;
  box-shadow: -15px 0 0 0 #000, 15px 0 0 0 #000;
  border-radius: 50%;
  left: 27px;
  top: 20px;
}

.mouth {
 width: 36px;
 height: 18px;
 background-color: #000;
 position: absolute;
 border-radius: 0 0 60px 60px;
 top: 35px;
 left: 12px;
}

.container:hover {
  & .smile {
 animation: slide-cross .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 & .eyes, & .mouth {
  animation: slide-bottom .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 & .talk {
  animation: scale-up .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
 }
 & .star {
   animation: turning .5s ease-in-out .5s both;
 }
 & .friend {
  animation: slide-in .7s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
 }
 & .shock {
  animation: wow .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .4s both;
 }
}

@keyframes wow {
 0% {
  transform: scale(.9);
 }
  100% {
         transform: scale(1.2);
 }
}

@keyframes slide-in {

  100% {
   right: -45px;
   top: 35px;
  }
}


@keyframes turning {
  0% {
       transform: rotate(-160deg) scale(0);
       opacity: 0;   
  }
  85% {
        transform: rotate(0) scale(1.5);
        opacity: 1;
  } 
  100% {
        transform: rotate(0) scale(1);
        opacity: 1;
  }
}

@keyframes scale-up {
  0% {
         transform: scale(0.6);
         transform-origin: 100% 100%;       
  }
  100% {
         transform: scale(1);
         transform-origin: 100% 100%;
         opacity: 1;
  }
}

@keyframes slide-cross {
  0% {
       transform: translateY(0) translateX(0);
  }
  100% {
       transform: translateY(-38px) translateX(-41px);
  }
}

@keyframes slide-bottom {
  0% {
         transform: translateY(0) translateX(0);
  }
  100% {
         transform: translateY(1px) translateX(5px);
  }
}

.talk {
 width: 56px;
 height: 40px;
 border-radius: 10px;
 background-color: #fff;
 position: absolute;
 z-index: 10;
 bottom: 34px;
 left: 33px;
 opacity: 0;
}

.triangle {
 position: absolute;
	background-color: #fff;
 top: -9px;
 left: 8px;
}
.triangle:before,
.triangle:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
	width:  12px;
	height: 12px;
	border-top-right-radius: 35%;
}

.triangle {
	transform: rotate(-85deg) skewX(-30deg) scale(1,.866);
  &:before {
	  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414)   translate(50%);
 }
}

.star {
 width: 18px;
 height: 18px;
 position: absolute;
 left: 20px;
 top: 10px;
}

.friend {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: var(--smile);
 position: relative;
 right: -85px;
 top: 85px;
 z-index: 15;
 box-shadow: 2px 5px 10px -2px rgba(0,0,0, .2);
 &:before {
  content: '';
  width: 6px;
  height: 10px;
  position: absolute;
  box-shadow: -15px 0 0 0 #000, 15px 0 0 0 #000;
  border-radius: 50%;
  left: 24px;
  top: 18px;
 }
}

.shock {
 width: 12px;
 height: 12px;
 background-color: #000;
 position: absolute;
 border-radius: 50%;
 top: 34px;
 right: 28px;
 will-change: transform;
}

@media only screen and (max-width: 480px) {
 .container {
  transform: scale(0.7);
  &:hover {
   transform: scale(0.74);
  }
 }
 .refer {
  font-size: 18px;
 }
}