@mixin t($i) {
    transition: $i+s;
}

* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}


body {
    margin: 0;
    display: flex;
    flex-flow: column wrap;
    background: #E74C3C;
}

.main {
    position: absolute;
    top: 68%;
    left: 50%;    
}

.nose {
    position: absolute;
    top: 50%;
    left: 50%;

    margin-left: -40px;
    margin-top: -30px;
    
    width: 80px;
    height: 80px;
    z-index: 10;
    transform: scale(0, 0);
    filter: url(./baidu_beer.html#gooey);
}

.nose-be, .nose-mi, .nose-af {
    @include t(1);
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    height: 100%;
            
    border-radius: 50%;
    background: #88282A;
}

.nose-be {
    transform: rotate(-60deg);
}

.nose-af {
    transform: rotate(60deg);
}

.nose.nose-end {
    .nose-mi {
        left: 17px;
        top: 58px;
        width: 50px;
        height: 30px;
        border-radius: 40px 40px 80px 80px/20px 20px 80px 80px;    
    }

    .nose-be, .nose-af {
        background: transparent;
    }
}

.nose-mor {
    .nose-mi {
        animation: gooey-mor-animate 2s ease-in-out .16s forwards;
    }

    .nose-be {
        animation: gooey-mor-be-animate 2s ease-in-out forwards;
    }

    .nose-af {
        animation:  gooey-mor-af-animate 2s ease-in-out .32s forwards;
    }
}

.face {
    @include t(1);
    position: absolute;
    top: 17px;
    left: -99px;
    width: 201px;
    height: 130px;
    
    border-radius: 50%;
    z-index: 5;
    background: #F8F6E1;
    transform: scale(0,0);
}

.face-mor {
    border-radius: 50% 50% 60% 60%;
}

.header {
    @include t(1);
    position: absolute;
    top: -375px;
    left: -335px;
    
    width: 666px;
    height: 550px;
    
    border-radius: 50% 50% 50% 50%/63% 63% 37% 37%;
    z-index: 2;
    
    background: #E4B790;
    transform: scale(0,0);
}

.l-eye-wrap, .r-eye-wrap {
    @include t(2);
    position: absolute;
    z-index: 14;
    transform: translate(15px, 60px);
}

.eye {
    @include t(1);
    position: absolute;
    background: #88282A;
    width: 60px;
    height: 60px;
    z-index: 10;

    border-radius: 50%;
}

.eye-be {
    transform: rotate(60deg);
}

.eye-af {
    transform: rotate(-60deg);
}

.l-eye-wrap-mor {
    transform: translate(-115px, -41px);    
}

.r-eye-wrap-mor {
    transform: translate(136px, -41px);
}

.l-eye-wrap-mor .eye-mor, .r-eye-wrap-mor .eye-mor {
    width: 51px;
    height: 58.75px  
}

.eye-mor {
    .eye-mi {
        animation: gooey-mor-animate 2s ease-in-out .16s forwards;
    }

    .eye-be {
        animation: gooey-mor-be-animate 2s ease-in-out forwards;
    }

    .eye-af {
        animation:  gooey-mor-af-animate 2s ease-in-out .32s forwards;
    }
}

.l-eye-face, .r-eye-face {
    position: absolute;
    top: -49px;
    width: 135px;
    height: 154px;
    background: #fff;
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    transform: scale(0,0);
    opacity: 1;
}

.l-eye-face {
    left: -55px; 
}

.r-eye-face {
    left: -29px;
}

.l-ear-wrap, .r-ear-wrap {
    @include t(3);
    position: absolute;
    transform: translate(5px, 5px);
}

.l-ear-wrap-mor {
    transform: translate(-134px, -301px);    
}

.r-ear-wrap-mor {
    transform: translate(78px, -301px);
}

.l-ear {
    transform: rotate(49deg);
}

.r-ear {
    transform: rotate(-49deg);
}

.ear {
    @include t(.5);
    position: absolute;
    width: 50px;
    height: 50px;
    background: #88282A;
    border-radius: 50%;
    .l-ear-hole-mor {
        transform: scale(1,1) translate(33px, 33px);
    }

    .r-ear-hole-mor {
        transform: scale(1,1) translate(16px, 33px);
    }
}

.ear-mor {
    width: 110px;
    height: 123px;
    background: #E4B790;
}

.ear-hole {
    @include t(.5);
    transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    width: 58px;
    height: 50px;
    border-radius: 50%;
    background: #F1D6BB;
    
    .l-ear-hole-mor {
        transform: scale(1,1) translate(33px, 33px);
    }

    .r-ear-hole-mor {
        transform: scale(1,1) translate(33px, 33px);
    }
}

.l-ear-hole {
    transform-origin: 140% 50%;
    transform: scale(0,1) translate(33px, 33px);
}

.r-ear-hole {
    transform-origin: 20% 50%;
    transform: scale(0,1) translate(16px, 33px);
}

.ear-hole-mask {
  width: 21px;
  height: 65px;
  background: #E4B790;
  border-radius: 50%;
  opacity: 0;
}

.l-ear-hole-mask {
  transform: translate(77px, -25px);
}

.r-ear-hole-mask {
  transform: translate(11px, -25px);
}

.show {
    animation: show-animate 2s ease forwards;
}

.op-show {
    opacity: 1;
}

@keyframes gooey-mor-animate {
    25% {
        transform: scale(.7, 1.3);
    }

    50% {
        transform: scale(.7, .7);
        animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    }

    100% {
        transform: scale(.85, .85);
    }
}

@keyframes gooey-mor-be-animate {
    
    30% {
        transform: rotate(-60deg) scale(.7, 1.3);
    }

    45% {
        transform: rotate(-60deg) scale(.7, .7);
        animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    }

    100% {
        transform: rotate(-60deg) scale(.85, .85);
    }
}

@keyframes gooey-mor-af-animate {
    30% {
        transform: rotate(60deg) scale(.7, 1.3);
    }

    45% {
        transform: rotate(60deg) scale(.9, .9);
        animation-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
    }

    100% {
        transform: rotate(60deg) scale(.85, .85);
    }
}

@keyframes show-animate {
    0% {
        -webkit-transform: matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.7,0,0,0,0,.7,0,0,0,0,1,0,0,0,0,1);
        opacity: 0
    }

    3.4% {
        -webkit-transform: matrix3d(.795,0,0,0,0,.822,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.795,0,0,0,0,.822,0,0,0,0,1,0,0,0,0,1)
    }

    4.7% {
        -webkit-transform: matrix3d(.835,0,0,0,0,.88,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.835,0,0,0,0,.88,0,0,0,0,1,0,0,0,0,1)
    }

    6.81% { 
        -webkit-transform: matrix3d(.898,0,0,0,0,.968,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.898,0,0,0,0,.968,0,0,0,0,1,0,0,0,0,1)
    }

    9.41% {
        -webkit-transform: matrix3d(.965,0,0,0,0,1.05,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.965,0,0,0,0,1.05,0,0,0,0,1,0,0,0,0,1)
    }

    10.21% {
        -webkit-transform: matrix3d(.982,0,0,0,0,1.068,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.982,0,0,0,0,1.068,0,0,0,0,1,0,0,0,0,1)
    }

    13.61% {
        -webkit-transform: matrix3d(1.037,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.037,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1)
    }

    14.11% {
        -webkit-transform: matrix3d(1.042,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.042,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1)
    }

    17.52% {
        -webkit-transform: matrix3d(1.062,0,0,0,0,1.072,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.062,0,0,0,0,1.072,0,0,0,0,1,0,0,0,0,1)
    }

    18.72% {
        -webkit-transform: matrix3d(1.064,0,0,0,0,1.056,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.064,0,0,0,0,1.056,0,0,0,0,1,0,0,0,0,1)
    }

    21.32% {
        -webkit-transform: matrix3d(1.059,0,0,0,0,1.021,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.059,0,0,0,0,1.021,0,0,0,0,1,0,0,0,0,1)
    }

    24.32% {
        -webkit-transform: matrix3d(1.045,0,0,0,0,.988,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.045,0,0,0,0,.988,0,0,0,0,1,0,0,0,0,1)
    }

    25.23% {
        -webkit-transform: matrix3d(1.04,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.04,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1)
    }

    29.03% {
        -webkit-transform: matrix3d(1.019,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.019,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1)
    }

    29.93% {
        -webkit-transform: matrix3d(1.014,0,0,0,0,.97,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.014,0,0,0,0,.97,0,0,0,0,1,0,0,0,0,1)
    }

    35.54% {
        -webkit-transform: matrix3d(.994,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.994,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1)
    }

    36.74% {
        -webkit-transform: matrix3d(.991,0,0,0,0,.994,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.991,0,0,0,0,.994,0,0,0,0,1,0,0,0,0,1)
    }

    41.04% {
        -webkit-transform: matrix3d(.988,0,0,0,0,1.007,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.988,0,0,0,0,1.007,0,0,0,0,1,0,0,0,0,1)
    }

    44.44% {
        -webkit-transform: matrix3d(.99,0,0,0,0,1.01,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.99,0,0,0,0,1.01,0,0,0,0,1,0,0,0,0,1)
    }

    52.15% {
        -webkit-transform: matrix3d(.997,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(.997,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1);
    }

    59.86% {
        -webkit-transform: matrix3d(1.002,0,0,0,0,.997,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.002,0,0,0,0,.997,0,0,0,0,1,0,0,0,0,1)
    }

    63.26% {
        -webkit-transform: matrix3d(1.002,0,0,0,0,.998,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1.002,0,0,0,0,.998,0,0,0,0,1,0,0,0,0,1)
    }

    75.28% {
        -webkit-transform: matrix3d(1,0,0,0,0,1.001,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1,0,0,0,0,1.001,0,0,0,0,1,0,0,0,0,1)
    }

    85.49%,90.69%,100% {
        -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
        transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)
    }

    100% {
        opacity: 1
    }
}