:root {
    --speed: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1C212B;
    color: white;
}

.watchBackground {
    position: absolute;
    width: 80vw;
    left: 50%;
    top: 65%;
    transform: translateY(-70%) translateX(-50%);
    z-index: -1;
    overflow: hidden;
    /* display: none; */
}

.layerSelect {
    position:absolute;
    bottom: 0;
    display: none;
}

svg * {
    transition: opacity 2s ease, blur 2s ease;
    fill-opacity: 1;
}

#anim path {
    fill: #b9c9eb;
}

/* ------------------------------------------------------------- */
/* layer3 animation -> escapement -> 1st wheel */

#anim-mali {
    transform-origin: 247.5px 585.5px;
    animation: rotateL calc(var(--speed)*16s) linear infinite;

}

#anim-veliki {
    transform-origin: 370px 631px;
    animation: rotateR calc(var(--speed)*34s) linear infinite;

}

/* ------------------------------------------------------------- */
/* layer4 animation -> escapement -> 1st wheel */

#anim-mal {
    transform-origin: 484px 709px;
    animation: rotateL calc(var(--speed)*7s) steps(100) infinite;

}

#anim-vel {
    transform-origin: 502px 642px;
    animation: rotateR calc(var(--speed)*80s) linear infinite;

}

/* ------------------------------------------------------------- */
/* layer5 animation -> escapement -> 2nd wheel */

#anim-vel_2 {
    transform-origin: 471px 555px;
    animation: rotateR calc(var(--speed)*60s) linear infinite;

}

#anim-mal_2 {
    transform-origin: 502px 642px;
    animation: rotateL calc(var(--speed)*8s) linear infinite;
}



/* ------------------------------------------------------------- */
/* layer6 animation -> escapement -> 3rd wheel */


#anim-vel_3 {
    transform-origin: 247.5px 585.5px;
    animation: rotateR calc(var(--speed)*8s) linear infinite;

}

#anim-mal_3 {
    transform-origin: 372px 513px;
    animation: rotateL calc(var(--speed)*1s) linear calc(var(--speed)*0.2s) infinite;

}

/* ------------------------------------------------------------- */
/* layer7 animation -  */
#anim-tik {

    transform-origin: 437px 752px;
    transform: rotate(11deg);
    animation: tik calc(var(--speed)*1s) linear calc(var(--speed)*0.5s) infinite;
}

@keyframes tik {
    0% {
        transform: rotate(11deg);
    }

    20% {
        transform: rotate(11deg);
    }

    30% {
        transform: rotate(-4deg);
    }

    72% {
        transform: rotate(-4deg);
    }

    82% {
        transform: rotate(11deg);

    }

    100% {
        transform: rotate(11deg);
    }
}

#anim-vel_4 {
    transform-origin: 483.8px 709.3px;
    /* transform: rotate(-26deg); */
    animation: rotateTik calc(var(--speed)*1s) ease-in-out infinite;
}

@keyframes rotateTik {

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

    23% {
        transform: rotate(-2deg);
    }

    33% {
        transform: rotate(-14deg);
    }

    72% {
        transform: rotate(-14deg);
    }

    82% {
        transform: rotate(-26deg);
    }

    100% {
        transform: rotate(-26deg);
    }
}


#anim-mal_4 {
    transform-origin: 371px 815px;
    transform: rotate(-30deg);
    transform: rotate(22deg);
    animation: tikSpring calc(var(--speed)*1s) ease-in-out calc(var(--speed)*0.5s) infinite;
}

@keyframes tikSpring {
    0% {
        transform: rotate(-180deg);
    }

    50% {
        transform: rotate(+172deg);
    }

    100% {
        transform: rotate(-180deg);
    }
}



/* ------------------------------------------------------------- */
/* layer8 animation minute wheels */

#anim-vel_5 {
    transform-origin: 372px 513px;
    animation: rotateR calc(var(--speed)*63s) linear infinite;

}

#anim-mal_5 {
    transform-origin: 471.2px 554.7px;
    animation: rotateL calc(var(--speed)*8s) linear infinite;

}

/* ------------------------------------------------------------- */
/* layer9 animation escapement spring */

#anim-vel_6 {
    transform-origin: 370.5px 813px;
    animation: tikSpring calc(var(--speed)*1s) ease-in-out calc(var(--speed)*.5s) infinite;
}

#anim-spring {
    transform-origin: 370.5px 813px;
    /* animation: tikSpring calc(var(--speed)*1s) ease-in-out calc(var(--speed)*.5s) infinite; */
    animation: springScale calc(var(--speed)*1s) ease-in-out infinite;


}

@keyframes springScale {
    0% {
        transform: scale(0.8) rotate(180deg);
    }

    50% {
        transform: scale(1) rotate(-165deg);
    }

    100% {
        transform: scale(.8) rotate(180deg);
    }


}


/* ------------------------------------------------------------- */
/* layer10 animation - minute */

#anim-vel_7 {
    transform-origin: 372px 513px;
    animation: rotateR calc(var(--speed)*40s) linear infinite;
}


#anim-mal_6 {
    transform-origin: 318px 480.1px;
    animation: rotateL calc(var(--speed)*10s) linear infinite;
}

@keyframes rotateR {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

@keyframes rotateL {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-359deg);
    }
}