:root{
    --ball-size:30px;
}

#basketball{
    width: var(--ball-size);
    height: var(--ball-size);
    background: radial-gradient(circle, #000 60%, #000 100%);
    border-radius: 50%;
    top: 40%;
    left: 49.5%;
    z-index: 3;
    position: absolute;
    
    background-size: 100% 20px; /* Tamanho das listras */
    background-position: center;
}

#basketball.active {
    animation: fall-and-bounce 2s ease-in, bounce 0.5s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
    animation-delay: 0s, 2s;
}


@keyframes fall-and-bounce {
    0% {
      transform: translateY(-300px); /* Começa acima da tela */
    }
    100% {
      transform: translateY(0); /* Chega ao ponto inicial */
    }
  }

@keyframes bounce{
    0%,100%{
        transform: translateY(0);
        height: var(--ball-size);
    }

    10%{
        transform: translateY(-5px);
        height: var(--ball-size);
    }

    20%{
        transform: translateY(-5px);
        height: var(--ball-size);
    }

    30%{
        transform: translateY(-5px);
        height: var(--ball-size);
    }

    40%{
        transform: translateY(-5px);
        height: var(--ball-size);
    }

    50%{
        transform: translateY(5px) ;
        height: var(--ball-size);
    }

    60%{
        transform: translateY(5px) ;
        height: var(--ball-size);
    }

    70%{
        transform: translateY(5px) ;
        height: var(--ball-size);
    }

    90%{
        transform: translateY(10px) ;
        height: var(--ball-size);
    }


}