body{
    margin: 0;
 
}

.caixa {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;

}

.caixa1{
    margin-top: -100px;

}

.caixa2 {
    box-sizing: border-box;
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    border-top: solid 10px rgb(0, 255, 13);
    border-bottom: solid 10px rgb(0, 255, 13);
    animation: rotate 3s infinite linear, cores 20s infinite;
}

.img_fundo{
    position: absolute;
    width: 100%;
    height: 100%;
}

.lata{
    box-sizing: border-box;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background-color: black;
   
}

.lata img {
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* entrando */
.entrar {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* saindo (indo pro “buraco”) */
.sair {
    transform: translateY(300px) scale(0.5);
    opacity: 0;
}

.lata img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* melhor pra produto */
    
}




@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes cores {

    0% {
        
        border-top-color: #00ff0d;
        border-bottom-color: #00ff0d;
        box-shadow: 0px 0px 5px rgb(0, 252, 13),
                    0px 0px 10px rgb(0, 252, 13),
                    0px 0px 15px rgb(0, 252, 13),
                    0px 0px 20px rgb(0, 252, 13),
                    0px 0px 25px rgb(0, 252, 13),
                    0px 0px 30px rgb(0, 252, 13),
                    0px 0px 35px rgb(0, 252, 13);
    }
    10% {

        border-top-color: #00ff0d;
        border-bottom-color: #00ff0d;
        box-shadow: 0px 0px 5px rgb(0, 252, 13),
                    0px 0px 10px rgb(0, 252, 13),
                    0px 0px 15px rgb(0, 252, 13),
                    0px 0px 20px rgb(0, 252, 13),
                    0px 0px 25px rgb(0, 252, 13),
                    0px 0px 30px rgb(0, 252, 13),
                    0px 0px 35px rgb(0, 252, 13);
    }
    20% {
        border-top-color: #00ff0d;
        border-bottom-color: #00ff0d;
        box-shadow: 0px 0px 5px rgb(0, 252, 13),
                    0px 0px 10px rgb(0, 252, 13),
                    0px 0px 15px rgb(0, 252, 13),
                    0px 0px 20px rgb(0, 252, 13),
                    0px 0px 25px rgb(0, 252, 13),
                    0px 0px 30px rgb(0, 252, 13),
                    0px 0px 35px rgb(0, 252, 13);
    }
    30% {
        border-top-color: #00ff0d;
        border-bottom-color: #00ff0d;
        box-shadow: 0px 0px 5px rgb(0, 252, 13),
                    0px 0px 10px rgb(0, 252, 13),
                    0px 0px 15px rgb(0, 252, 13),
                    0px 0px 20px rgb(0, 252, 13),
                    0px 0px 25px rgb(0, 252, 13),
                    0px 0px 30px rgb(0, 252, 13),
                    0px 0px 35px rgb(0, 252, 13);
    }
    

    40% {
        
        border-top-color: #ff0202;
        border-bottom-color: #ff0000;
        box-shadow: 0px 0px 5px #ff0000,
                    0px 0px 10px #ff0000,
                    0px 0px 15px #ff0000,
                    0px 0px 20px #ff0000,
                    0px 0px 25px #ff0000,
                    0px 0px 30px #ff0000,
                    0px 0px 35px #ff0000;
    }
    50% {
       
        border-top-color: #ff0000;
        border-bottom-color: #ff0000;
        box-shadow: 0px 0px 5px #ff0000,
                    0px 0px 10px #ff0000,
                    0px 0px 15px #ff0000,
                    0px 0px 20px #ff0000,
                    0px 0px 25px #ff0000,
                    0px 0px 30px #ff0000,
                    0px 0px 35px #ff0000;
    }
    60% {
        
        border-top-color: #ff0000;
        border-bottom-color: #ff0000;
        box-shadow: 0px 0px 5px #ff0000,
                    0px 0px 10px #ff0000,
                    0px 0px 15px #ff0000,
                    0px 0px 20px #ff0000,
                    0px 0px 25px #ff0000,
                    0px 0px 30px #ff0000,
                    0px 0px 35px #ff0000;
    }
    70% {
       
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        box-shadow: 0px 0px 5px #ffff,
                    0px 0px 10px #ffff,
                    0px 0px 15px #ffff,
                    0px 0px 20px #ffff,
                    0px 0px 25px #ffff,
                    0px 0px 30px #ffff,
                    0px 0px 35px #ffff;
    }
    80% {
       
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        box-shadow: 0px 0px 5px #ffff,
                    0px 0px 10px #ffff,
                    0px 0px 15px #ffff,
                    0px 0px 20px #ffff,
                    0px 0px 25px #ffff,
                    0px 0px 30px #ffff,
                    0px 0px 35px #ffff;
    }
    90% {
   
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        box-shadow: 0px 0px 5px #ffff,
                    0px 0px 10px #ffff,
                    0px 0px 15px #ffff,
                    0px 0px 20px #ffff,
                    0px 0px 25px #ffff,
                    0px 0px 30px #ffff,
                    0px 0px 35px #ffff;
    }
    100% {
     
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        box-shadow: 0px 0px 5px #ffff,
                    0px 0px 10px #ffff,
                    0px 0px 15px #ffff,
                    0px 0px 20px #ffff,
                    0px 0px 25px #ffff,
                    0px 0px 30px #ffff,
                    0px 0px 35px #ffff;
    }
}


.botao {
    position: relative;
    overflow: hidden;

    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    background: transparent;
    border: 2px solid #000000;
    border-radius: 10px;
    cursor: pointer;
    background-color: white;

    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    transition: 0.3s;
}



/* efeito onda */
.botao span {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgb(0, 255, 13);
    animation: ripple 10s linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}