body{
    position: relative;
}

#effectContainer.active{
    display: block;
}

#effect{
    position: absolute;
    width: 500px;
    height: 500px;
    /* display: none; */
    opacity: 0;
    scale: 0.5;

    user-select: none;
    pointer-events: none;
}
#effect>*{
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
}
#effect.active{
    display: block;
    animation: effectMovementAnimation 1.5s forwards 1.5s ease-in-out,
    effectAppearDesappearAnimation 3s forwards 0s ease-in-out;
    --maxScale: 1;
}

#eggCounter>img{
    width: 42px;
}
#eggCounter>#eggImgsCounter>img{
    transition: all 1s ease;
}
#eggCounter{
    display: none;
    /* display: flex; */
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    color: white;
    row-gap: 5px;

    pointer-events: all;
}

@media (max-width:800px) or (max-height:400px){
    #effect.active{
        --maxScale: 0.5;
    }
}

@keyframes effectMovementAnimation {
    50% {top: calc(-250px);}
    90% {top: calc(-250px + 59px); left: calc(-250px + 37px);}
    100% {top: calc(-250px + 59px); left: calc(-250px + 37px);}
}
@keyframes effectAppearDesappearAnimation {
    20% {opacity: 1; scale: var(--maxScale);}
    70% {opacity: 1; scale: var(--maxScale);}
    /* 100% {opacity: 1; scale: 1;} */
    85% {scale: calc(var(--maxScale) / 5); transform: skewX(9deg) skewY(-4deg);}
    90% {transform: skewX(9deg) skewY(-4deg);}
    95% {opacity: 1; scale: calc(var(--maxScale) / (1/0.06)); transform: skewX(0deg) skewY(0deg);}
    /* 100% {opacity: 0; scale: 0.06; transform: skewY(0deg);} TO COMMENT */
}



/* EGG IMG */
#effect #eggImg{
    border-radius: 1000px;
    background-position: center !important;
    background-size: contain !important;
    scale: 0.5;
}


.eggImgs{
    position: relative;
    width: 36px;
    height: 30px;
}
.eggImgs>img{
    position: absolute;
}
#eggColored{
    transition: opacity 0.5s 0.5s ease-in-out;
    opacity: 0;
}
#eggCounter.animated #eggColored{
    opacity: 1;
}
#eggCounter:hover #eggColored,
#eggCounter:hover img:nth-child(2),
#eggCounter:hover img:nth-child(4){
    opacity: 1;
    animation: eggMovement 1s ease-in-out 0s infinite alternate;
}
@keyframes eggMovement {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(-20deg);
    }
}


/* .eggHsType{
    border-radius: 1000px !important;
    box-shadow: 0px 0px 20px 20px #0000000d !important;
} */


span.bubbles svg>circle{
    opacity: 0.95;
    transform-origin: center;
    animation: bubbles 3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards,
        bubblesBack 1s 3.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards,
        bubblesRotation 5s cubic-bezier(0.275, 0.82, 0.165, 1) forwards,
        bubblesExpansion 4s cubic-bezier(0.275, 0.82, 0.165, 1) forwards;
}

@keyframes bubbles {
    0%{
        r: 0px;
    }
}
@keyframes bubblesExpansion {
    0%{
        cx: 500px;
        cy: 500px;
        transform: rotateZ(360deg);
    }
}
@keyframes bubblesRotation {
    0%{
        transform: rotateZ(540deg);
    }
    100%{
    }
}
@keyframes bubblesBack {
    100%{
        r: 10px;
        cx: 500px;
        cy: 500px;
    }
}


span.eggLeafs svg{
    position: absolute;
    top: -90%;
    left: -68%;
    opacity: 0;
    transform: translateY(0) scaleX(0) scaleY(0);
}
#eggCounter.animated span.eggLeafs svg,
#eggCounter:hover span.eggLeafs svg{
    animation: eggLeafs 2s 0.8s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes eggLeafs {
    20%{
        opacity: 1;
        transform: translateY(0) scaleX(1) scaleY(1);
    }
    80%{
        opacity: 0;
        transform: translateY(50%) scaleX(1.5) scaleY(1.5);
    }
    90%{
        opacity: 0;
        transform: translateY(50%) scaleX(2) scaleY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(50%) scaleX(2) scaleY(0);
    }
}


#leafs{
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    scale: 0;
    transition: scale cubic-bezier(0.215, 0.610, 0.86, 1) 2.5s 0.3s,
    opacity cubic-bezier(0.215, 0.610, 0.355, 1) 2s 0.8s,
    transform cubic-bezier(0.215, 0.610, 0.355, 1) 2s 1.6s;
}

#effect.active #leafs{
    scale: 6;
    opacity: 0;
    /* transform: scaleY(0.5) translateY(100px); */
    transform: scale(0.1) translateX(100px) translateY(150px);
}


#bird .bird{
    position: absolute;
    bottom: 0px;
    right: 0px;
    scale: 1 1;
    transform: rotate3d(0, 2, 1, 39deg) translate(-570px, -20px);
    /* transition: all cubic-bezier(0.215, 0.610, 0.755, 1) 3s 0s; */
}
@keyframes birdFly {
    /* 10%{
        scale: -1 1;
        transform: rotate3d(0, 2, 1, 30deg) translate(-30px, -40px);
    } */
    15%{
        scale: 1 1;
        transform: rotate3d(0, 2, 1, 39deg) translate(-570px, -20px);
    }
    55%{
        scale: -1 1;
        transform: rotate3d(0, 1, 2, 40deg) translate(-300px, -200px);
    }
    90%{
        scale: -1 1;
        opacity: 1;
        transform: rotate3d(0, 2, 1, 30deg) translate(-30px, -40px);
    }
    100%{
        scale: 0 0;
        opacity: 0;
        /* transform: rotate3d(0, 2, 1, 30deg) translate(-280px, 140px); */
        transform: rotate3d(0, 2, 1, 30deg) translate(280px, -240px);
    }
}

#effect.active #bird .bird{
    /* transform: translate(100px, 200px) rotate3d(0, 2, 1, 29deg); */
    /* transform: translate(-200px, 100px); */
    animation: birdFly 2.5s ease-in-out 0s forwards;
}