/* ++++ ANIMATIONS ++++ */

/* ---------------------------------------- */
/* ---------------- GLOBAL ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col .spinBlockMain.middle .inner-col.scroll {
    animation:  out_SpinMain 0.6s 0.25s,
                constSpinMainAfterStart_10 0.3s 0.85s;
    
    animation-fill-mode: forwards;
}

.slotmachine .window .col .spinBlockMain.middle .inner-col.scroll .bounce-wrapper {
    animation: bounceOut 0.8s;

    animation-fill-mode: forwards;
}




/* ---------------------------------------- */
/* ---------------- COL 01 ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col:nth-child(1) .spinBlockMain.top .inner-col.scroll {
    animation:  in_const_10_SpinMain 0.3s 0.85s,
                in_stop_SpinMain 0.6s 1.15s;

    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(1) .spinBlockMain.top .inner-col.scroll .bounce-wrapper {
    animation:  prepBunceIn 0.9s 0.85s,
                bunceIn 0.12s 1.75s;
    
    animation-fill-mode: forwards;
}




/* ---------------------------------------- */
/* ---------------- COL 02 ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col:nth-child(2) .spinBlockConst_10 .inner-col.scroll {
    animation: constSpinBlock_20 0.6s linear 0.85s;
    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(2) .spinBlockMain.top .inner-col.scroll {
    animation:  in_const_10_SpinMain 0.3s 1.15s,
                in_stop_SpinMain 0.6s 1.45s;

    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(2) .spinBlockMain.top .inner-col.scroll .bounce-wrapper {
    animation:  prepBunceIn 0.9s 1.15s,
                bunceIn 0.12s 2.05s;
    
    animation-fill-mode: forwards;
}




/* ---------------------------------------- */
/* ---------------- COL 03 ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col:nth-child(3) .spinBlockConst_20 .inner-col.scroll {
    animation: constSpinBlock_30 0.9s linear 0.85s;
    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(3) .spinBlockMain.top .inner-col.scroll {
    animation:  in_const_10_SpinMain 0.3s 1.45s,
                in_stop_SpinMain 0.6s 1.75s;

    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(3) .spinBlockMain.top .inner-col.scroll .bounce-wrapper {
    animation:  prepBunceIn 0.9s 1.45s,
                bunceIn 0.12s 2.35s;
    
    animation-fill-mode: forwards;
}




/* ---------------------------------------- */
/* ---------------- COL 04 ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col:nth-child(4) .spinBlockConst_30 .inner-col.scroll {
    animation: constSpinBlock_40 1.2s linear 0.85s;
    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(4) .spinBlockMain.top .inner-col.scroll {
    animation:  in_const_10_SpinMain 0.3s 1.75s,
                in_stop_SpinMain 0.6s 2.05s;

    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(4) .spinBlockMain.top .inner-col.scroll .bounce-wrapper {
    animation:  prepBunceIn 0.9s 1.75s,
                bunceIn 0.12s 2.65s;
    
    animation-fill-mode: forwards;
}




/* ---------------------------------------- */
/* ---------------- COL 05 ---------------- */
/* ---------------------------------------- */

.slotmachine .window .col:nth-child(5) .spinBlockConst_40 .inner-col.scroll {
    animation: constSpinBlock_50 1.5s linear 0.85s;
    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(5) .spinBlockMain.top .inner-col.scroll {
    animation:  in_const_10_SpinMain 0.3s 2.05s,
                in_stop_SpinMain 0.6s 2.35s;

    animation-fill-mode: forwards;
}

.slotmachine .window .col:nth-child(5) .spinBlockMain.top .inner-col.scroll .bounce-wrapper {
    animation:  prepBunceIn 0.9s 2.05s,
                bunceIn 0.12s 2.95s;
    
    animation-fill-mode: forwards;
}






/* Const Spin Filler block between two main blocks */ 
@keyframes constSpinBlock_20 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(calc(100% / 10 * 10 + 100%));
    }
}

/* Const Spin Filler block between two main blocks */ 
@keyframes constSpinBlock_30 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(calc(100% / 20 * 10 + 100%));
    }
}

/* Const Spin Filler block between two main blocks */ 
@keyframes constSpinBlock_40 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(100% / 30 * 10 + 100%));
    }
}

/* Const Spin Filler block between two main blocks */ 
@keyframes constSpinBlock_50 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(calc(100% / 40 * 10 + 100%));
    }
}




/* Main-Block: Spin 10 Blocks down (accelerate after spin click) */
@keyframes out_SpinMain {
    0% {
        transform: translateY(calc(100% / 30 * 20));
        animation-timing-function: cubic-bezier(.51,.01,.85,.76);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Main-Block: Spin const 10 Blocks down (after acceleration) */
@keyframes constSpinMainAfterStart_10 {
    0% {
        transform: translateY(100%);
        animation-timing-function: linear;
    }

    100% {
        transform: translateY(calc(100% / 30 * 40));
    }
}

/* Main-Block: Start to spin 10 Blocks down (const) (bring new block in)  */
@keyframes in_const_10_SpinMain {
    0% {
        transform: translateY(0px);
        animation-timing-function: linear;
    }

    100% {
        transform: translateY(calc(100% / 30 * 10));
    }
}

/* Main-Block: Spin 10 Blocks down (decelerate to Stop) */
@keyframes in_stop_SpinMain {
    0% {
        transform: translateY(calc(100% / 30 * 10));
        animation-timing-function: cubic-bezier(.81,1.05,.81,1);
    }

    100% {
        transform: translateY(calc(100% / 30 * 20));
    }
}



/* -------- Bounce Animations -------- */

@keyframes bounceOut {
    0% {
        transform: translateY(0%);
        animation-timing-function: cubic-bezier(0.29, 0.18, 0.46, 1);
    }

    25% {
        transform: translateY(calc(100% / 30 / 7.5 * (-1)));
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes prepBunceIn {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(calc(100% / 30 / 10));
    }
}

@keyframes bunceIn {
    0% {
        transform: translateY(calc(100% / 30 / 10));
        animation-timing-function: cubic-bezier(.53,.01,.43,1);
    }

    100% {
        transform: translateY(0);
    }
}