:root {
    --bean-rotation: 3612deg;
}

#spinner {
    clip-path:                 circle(500px at 50%);
    animation-duration:        5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode:       forwards;
    transform:                 rotate(13deg);
    position:                  absolute;
    top:                       2px;
    left:                      0;
}

#overlay {
    clip-path:           circle(493px at 50%);
    position:            absolute;
    top:                 0;
    left:                0;
    animation-duration:  1500ms;
    animation-fill-mode: forwards;
    opacity:             0;
}

.spin-a-bean {
    animation-name: spin-a-bean;
}

.show-a-lay {
    animation-delay: 5000ms;
    animation-name:  show-a-lay;
}

@keyframes spin-a-bean {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(var(--bean-rotation, 3612deg));
    }

}

@keyframes show-a-lay {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

/*
Spinner positions:

1:	11
2:	47
3:	83
4:	119
5:	155
6:	191
7:	227
8:	263
9:	299
10:	335

 */