br
.frank-hover
  .frank
    .scar
    .eye.left
    .eye.right
    .mouth
      .tongue

*
  margin: 0
  position: relative
html
  height: 100%
body
  background: linear-gradient(#ffffbb, #ffffbb 420px, #fff 430px, #e0e0e0)
  min-height: 100%

$frank-width: 150px
div
  border: 8px solid black
.frank-hover
  width: $frank-width
  margin: 200px auto 0
  border: none
  transform-origin: 50% 100%
  overflow: visible
  &:before
    display: inline-block
    position: absolute
    bottom: -15px
    left: -20px
    z-index: -999
    content: ""
    width: 200px
    height: 20px
    background: rgba(#e0e0e0, 0.5)
    border-radius: 50%
    //box-shadow: #e0e0e0 0 0 10px  
    overflow: visible
    animation: shadow 10s ease-in-out 0s infinite forwards
  &:hover
    animation: bounce .25s cubic-bezier(.15,.60,.30,1.9) 0s 1 forwards
    .eye
      animation: crazy-eyes .25s linear 0s 2
    .mouth
      animation: bounce .25s cubic-bezier(.05,.50,.5, 1) 0s 1 forwards
    .tongue
      animation: tongue-sticking .25s ease-out 1
.frank
  display: block
  width: $frank-width
  height: $frank-width * 1.45
  border-radius: 60px
  background: #00eeaa
  box-shadow: darken(#00eeaa, 10%) -6px -6px 0px 4px inset
  animation: wobble 10s ease-in-out 0s infinite forwards
  transform-origin: 50% 110%
  z-index: 10
.scar
  height: 110px
  width: 50px
  border-bottom-right-radius: 40px
  border-left: none
  border-top: none
  position: absolute
  left: 0px
  top: 0px
  &:before, &:after
    content: ""
    width: 30px
    height: 10px
    position: absolute
    right: -20px
  &:before
    border-top: 10px solid black
    border-bottom: 10px solid black
    top: 20px
  &:after
    border-top: 10px solid black
    right: -20px
    top: 60px
  
$eye-wh: 12px    
.eye
  width: 20px
  height: 20px
  border-radius: 50%
  position: absolute
  top: 40%
  background: #fff
  &:before
    content: ""
    background: black
    width: $eye-wh
    height: $eye-wh
    border-radius: 50%
    position: absolute
    bottom: 0px
    left: calc( 50% - 6px )
  &.left
    left: 20px
  &.right
    right: 20px
.mouth
  background: #000
  width: $frank-width - $frank-width/3
  height: 50px
  position: absolute
  bottom: 15px
  left: $frank-width/9
  border-bottom-left-radius: 40px
  border-bottom-right-radius: 40px

.tongue
  background: pink
  border: 4px solid black
  position: absolute
  width: 40px
  height: 10px
  border-bottom-left-radius: 50%
  border-bottom-right-radius: 50%
  border-top-left-radius: 10px
  border-top-right-radius: 10px
  bottom: 0px
  left: calc(50% - 20px)
  
// ANIMATIONS

@keyframes wobble
  0%
    transform: rotate(0deg)
  20%
    transform: rotate(-10deg)
  40%
    transform: rotate(3deg)
  60%
    transform: rotate(-1deg)
  75%
    transform: rotate(8deg)
  90%
    transform: rotate(-1deg)
  100%
    transform: rotate(0deg)

=border-left-radius($perc)
  border-bottom-left-radius: $perc
  border-top-left-radius: $perc
=border-right-radius($perc)
  border-bottom-right-radius: $perc
  border-top-right-radius: $perc
  
@keyframes shadow
  0%
    +border-left-radius(50%)
    +border-right-radius(50%)
    background: rgba(#e0e0e0, 0.25)
  20%
    +border-left-radius(20%)
    +border-right-radius(80%)
    background: linear-gradient(to right, rgba(#e0e0e0, 0.25), #fcfcfc)
  40%
    border-radius-bottom-right: 50%
  60%
    border-radius-bottom-right: 50%
  75%
    border-radius-bottom-right: 50%
  90%
    border-radius-bottom-right: 50%
  100%
    border-radius-bottom-right: 50%

  
@keyframes bounce
  0%
    transform: scale(1)
    margin-bottom: 0
  50%
    transform: scale(1.05)
  100%
    transform: scale(1)

@keyframes crazy-eyes
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes tongue-sticking
  0%
    height: 10px
    bottom: 0px
  50%
    height: 40px
    bottom: -30px
  100%
    height: 10px
    bottom: 0px