/* ===========================
   BILLIARD THROW EFFECT
=========================== */

.billiard-throw-layer{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.billiard-throw{

    --size:54px;

    position:absolute;
    left:-90px;
    bottom:-90px;

    width:var(--size);
    height:var(--size);

    /* Ganti URL berikut dengan sprite PNG milikmu */
    background-image:url("../img/billiard-sprite-1-15-029dc2e32f.png");

    background-repeat:no-repeat;

    background-size:
        calc(var(--size) * 5)
        calc(var(--size) * 3);

    filter:drop-shadow(0 5px 7px rgba(0,0,0,.55));

    animation:billiardThrow 8s cubic-bezier(.22,.65,.3,1) infinite;

    will-change:transform,opacity;
}


/* ===========================
   SPRITE POSITION
=========================== */

.bt-1{
    background-position:0 0;
}

.bt-3{
    background-position:
        calc(var(--size) * -2)
        0;
}

.bt-5{
    background-position:
        calc(var(--size) * -4)
        0;
}

.bt-8{
    background-position:
        calc(var(--size) * -2)
        calc(var(--size) * -1);
}

.bt-9{
    background-position:
        calc(var(--size) * -3)
        calc(var(--size) * -1);
}

.bt-12{
    background-position:
        calc(var(--size) * -1)
        calc(var(--size) * -2);
}

.bt-15{
    background-position:
        calc(var(--size) * -4)
        calc(var(--size) * -2);
}


/* ===========================
   POSISI MASING-MASING BOLA
=========================== */

.billiard-throw:nth-child(1){
    left:2%;
    animation-delay:0s;
    animation-duration:7.5s;
}

.billiard-throw:nth-child(2){
    left:16%;
    animation-delay:1s;
    animation-duration:8.2s;
}

.billiard-throw:nth-child(3){
    left:30%;
    animation-delay:2s;
    animation-duration:7.7s;
}

.billiard-throw:nth-child(4){
    left:45%;
    animation-delay:3s;
    animation-duration:9s;
}

.billiard-throw:nth-child(5){
    left:60%;
    animation-delay:4s;
    animation-duration:8.4s;
}

.billiard-throw:nth-child(6){
    left:76%;
    animation-delay:5s;
    animation-duration:8.8s;
}

.billiard-throw:nth-child(7){
    left:90%;
    animation-delay:6s;
    animation-duration:7.8s;
}


/* ===========================
   ANIMASI
=========================== */

@keyframes billiardThrow{

    0%{

        transform:
            translate3d(-40px,90px,0)
            rotate(0deg)
            scale(.45);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    35%{

        transform:
            translate3d(70px,-45vh,0)
            rotate(360deg)
            scale(.8);

    }

    60%{

        transform:
            translate3d(-30px,-70vh,0)
            rotate(720deg)
            scale(1);

    }

    85%{

        transform:
            translate3d(50px,-35vh,0)
            rotate(960deg)
            scale(.9);

        opacity:1;

    }

    100%{

        transform:
            translate3d(110px,130px,0)
            rotate(1260deg)
            scale(.6);

        opacity:0;

    }

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

    .billiard-throw{

        --size:38px;

    }

}


/* ===========================
   LAYER WEBSITE
=========================== */

header,
main,
footer,
.float-nav,
.header-wrapper{

    position:relative;
    z-index:2;

}