.jogo-background {
    background-color: #030617;
    position: relative;
    overflow: hidden;
    margin-bottom: -60px;
    background-image: url('./css/Images/ondaBackground.svg');
}

.img-timao-historico-container {
    position: absolute;
    top: 140px;
    left: 50%;  
    transform: translateX(-50%);
    width: 100%; /* ou defina um tamanho específico */
    display: flex;
    justify-content: center;
}

.img-timao-historico {
    max-width: 450px; /* ajuste conforme necessário */
    cursor: pointer;
    will-change: transform;
    transition: transform 0.2s ease-in-out;
}

.img-timao-historico:hover{
    transform: scale(1.03);
}

/*Onda do Background*/
.onda-background {
    background-image: url('./css/Images/ondaBackground.svg');
    background-position: top;
    background-size: 160%;
    animation: moveWaves 6s ease-in-out infinite alternate;
}
/* Para animação contínua */
.onda-background.animate-wave {
    animation: moveWaves 6s ease-in-out infinite alternate;
}

@keyframes moveWaves {
    from {
        background-position-x: 25%;
    }

    to {
        background-position-x: 65%;
    }
}

@keyframes girarRapidoEDesacelerar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1080deg); /* 3 voltas completas (360 * 3) */
    }
}

.girar-timao {
    animation: girarRapidoEDesacelerar 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes batimentoTimao {
    0%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.05);
    }
}

.batendo {
    animation: batimentoTimao 0.8s ease-in-out 2; /* 3 batimentos */
}