#boneco-1 {
    position: absolute;
    bottom: 300px;
    left: -100px;
    cursor: pointer;

    &.aparecer {
        animation: boneco1Aparecer 3s ease-out forwards;
    }

    &.retornar {
        animation: boneco1Retornar 0.5s ease-in forwards;
    }

    .boneco-corpo {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .boneco-cabeca {
        width: 320px;
        position: absolute;
        z-index: 1;
    }

    .boneco-rosto {
        width: 320px;
        position: absolute;
        z-index: 2;
    }

    .boneco-expressao {
        position: absolute;
        opacity: 0;
        width: 200px;
        transition: opacity 0.1s ease;
    }

    &.visivel:hover .boneco-expressao,
    &.mostrar-expressao .boneco-expressao {
        animation: shake 0.2s ease 2;
    }

    .expressao-1 {
        left: -10px;
        top: -170px;
        width: 150px;
        rotate: -10deg;
    }

    .expressao-2 {
        left: -119px;
        top: -150px;
        width: 120px;
        rotate: 90deg;
    }

    .expressao-3 {
        left: -60px;
        top: -159px;
        width: 120px;
        rotate: 30deg;
    }
}

@keyframes boneco1Aparecer {
    0% {
        left: -100px;
        transform: rotate(0deg);
        transform-origin: bottom right;
    }
    70% {
        left: 20px;
        transform: rotate(8deg);
        transform-origin: bottom right;
    }
    100% {
        left: 80px;
        transform: rotate(30deg);
        transform-origin: bottom right;
    }
}

@keyframes boneco1Retornar {
    0% {
        left: 80px;
        transform: rotate(30deg);
        transform-origin: bottom right;
    }
    70% {
        left: -100px;
        transform: rotate(30deg);
        transform-origin: bottom right;
    }
    100% {
        left: -100px;
        transform: rotate(0deg);
        transform-origin: bottom right;
    }
}

@keyframes shake {
    0%, 100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: translateX(-8px) translateY(-5px) rotate(-5deg);
    }
    20% {
        opacity: 1;
        transform: translateX(8px) translateY(5px) rotate(5deg);
    }
    30% {
        opacity: 1;
        transform: translateX(-8px) translateY(5px) rotate(-5deg);
    }
    40% {
        opacity: 1;
        transform: translateX(8px) translateY(-5px) rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: translateX(-8px) translateY(-5px) rotate(-5deg);
    }
    60% {
        opacity: 1;
        transform: translateX(8px) translateY(5px) rotate(5deg);
    }
    70% {
        opacity: 1;
        transform: translateX(-8px) translateY(5px) rotate(-5deg);
    }
    80% {
        opacity: 1;
        transform: translateX(8px) translateY(-5px) rotate(5deg);
    }
    90% {
        opacity: 1;
        transform: translateX(-8px) translateY(-5px) rotate(-5deg);
    }
}

#boneco-2 {
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;

    &.aparecer {
        animation: boneco2Aparecer 2.5s ease-out forwards;
    }

    &.retornar {
        animation: boneco2Retornar 0.4s ease-in forwards;
    }

    .boneco-corpo {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .boneco-cabeca {
        width: 320px;
        position: absolute;
        z-index: 1;
    }

    .boneco-rosto {
        width: 320px;
        position: absolute;
        z-index: 2;
    }

    .boneco-expressao {
        position: absolute;
        opacity: 0;
        width: 200px;
        transition: opacity 0.1s ease;
    }

    &.visivel:hover .boneco-expressao,
    &.mostrar-expressao .boneco-expressao {
        animation: shake 0.2s ease 2;
    }

    .expressao-1 {
        left: -70px;
        top: -230px;
        width: 150px;
        rotate: 5deg;
    }
}

@keyframes boneco2Aparecer {
    0% {
        bottom: -120px;
    }
    100% {
        bottom: 90px;
    }
}

@keyframes boneco2Retornar {
    0% {
        bottom: 90px;
    }
    100% {
        bottom: -120px;
    }
}

#boneco-3 {
    position: absolute;
    top: -100px;
    right: -100px;
    rotate: 230deg;
    cursor: pointer;

    &.aparecer {
        animation: boneco3Aparecer 2s ease-out forwards;
    }

    &.retornar {
        animation: boneco3Retornar 1s ease-in forwards;
    }

    .boneco-corpo {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .boneco-cabeca {
        width: 320px;
        position: absolute;
        z-index: 1;
    }

    .boneco-rosto {
        width: 320px;
        position: absolute;
        z-index: 2;
    }

    .boneco-expressao {
        position: absolute;
        opacity: 0;
        width: 200px;
        transition: opacity 0.1s ease;
    }

    &.visivel:hover .boneco-expressao,
    &.mostrar-expressao .boneco-expressao {
        animation: shake 0.2s ease 2;
    }
}

@keyframes boneco3Aparecer {
    0% {
        top: -100px;
        right: -100px;
    }
    100% {
        top: 80px;
        right: 80px;
    }
}

@keyframes boneco3Retornar {
    0% {
        top: 80px;
        right: 80px;
    }
    100% {
        top: -100px;
        right: -100px;
    }
}