<section class="watch-container">
    <article class="watch">
        <div class="bg-image"></div>
        <div class="screen">
            <header>
                <span class="title">Activity</span>
                <span class="time">10:09</span>
            </header>
            <section class="dials">
                <div class="dial move">
                    <div class="dial-background one"></div>
                    <div class="dial-container container1">
                        <div class="wedge"></div>
                    </div>
                    <div class="dial-container container2">
                        <div class="wedge"></div>
                    </div>
                    <div class="marker start"></div>
                    <div class="marker end"></div>
                </div>
                <div class="dial exercise">
                    <div class="dial-background two"></div>
                    <div class="dial-container container1">
                        <div class="wedge"></div>
                    </div>
                    <div class="marker start"></div>
                    <div class="marker end"></div>
                </div>
                <div class="dial stand">
                    <div class="dial-background three"></div>
                    <div class="dial-container container1">
                        <div class="wedge"></div>
                    </div>
                    <div class="marker start"></div>
                    <div class="marker end"></div>
                </div>
            </section>
            <section class="pips">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>
        </div>
    </article>
</section>

@import "https://fonts.googleapis.com/css?family=Varela+Round|Open+Sans";

$path: "https://www.w3cplus.com/sites/default/files/blogs/2015/1507";

.watch-container {
    background: #fff;
    padding: 1em 1.5em 2.75em 1em
}

.watch {
    background: url(#{$path}/watchbg.jpg) no-repeat;
    background-size: 100%;
    font-family: "San Francisco Display UltraLight","Open Sans",Helvetica,Arial,Serif;
    font-size: 16px;
    width: 220px;
    height: 244px;
    position: relative;
    margin: 50px auto;
}

.screen {
    width: 59.2%;
    height: 74%;
    position: absolute;
    left: 18%;
    top: 13%;
    
    .title,
    .time {
       animation: show-title 5s infinite ease-out;
       color: #b1b4c2;
       font-size: 0.9em;
       position: absolute;
       top: 0;
       left: 0;
       letter-spacing: 0.05em;   
    }
      
    .time {
        animation-delay: 0.2s;
        right: 0;
        left: auto;
    }
      
    .dials {
        animation: show-dials 5s infinite ease-out;
        width: 4em;
        height: 4em;
        border-radius: 50% ;
        position: absolute;
        top: 1.75em;
        left: 0;
    }
}

.dial {
    border: 1px solid #000;
    border-radius: 50%;
          
    &.move {
        position: absolute;
        width: 8em;
        height: 8em;
          
        &:before {
            background: url(#{$path}/1.png) no-repeat center;
            background-size: 50%;
            content: "";
            width: 1.5em;
            height: 1.5em;
            position: absolute;
            top: -0.35em;
            left: calc(50% - 0.75em);
            z-index: 10;
        }
        &:after {
            content: "";
            background: #000;
            border-radius: 50%;
            width: 6em;
            height: 6em;
            position: absolute;
            top: 1em;
            left: 1em;
        }
    }
    &.exercise {
        position: absolute;
        width: 6em;
        height: 6em;
        top: 1em;
        left: 1em;
        &:before {
            background: url(#{$path}/2.png) no-repeat center;
            background-size: 50%;
            content: "";
            width: 1.5em;
            height: 1.5em;
            position: absolute;
            top: -0.35em;
            left: calc(50% - 0.75em);
            z-index: 10;
        }
        &:after {
            content: "";
            background: #000;
            border-radius: 50%;
            width: 4em;
            height: 4em;
            position: absolute;
            top: 1em;
            left: 1em
        }
    }      
    &.stand {
        position: absolute;
        width: 4em;
        height: 4em;
        top: 2em;
        left: 2em;
        
        &:before {
            background: url(#{$path}/3.png) no-repeat center;
            background-size: 50%;
            content: "";
            width: 1.5em;
            height: 1.5em;
            position: absolute;
            top: -0.35em;
            left: calc(50% - 0.75em);
            z-index: 10
        }
          &:after {
            content: "";
            background: #000;
            border-radius: 50%;
            width: 2em;
            height: 2em;
            position: absolute;
            top: 1em;
            left: 1em
        }
    }
}


.dial-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4em;
    overflow: hidden;
    
    &.container1 {
      left: 4em;
    }
    &.container2 {
        left: 0;
    }
    .dial.exercise & {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3em;
        overflow: hidden;
    }
}

.wedge {
    width: 4em;
    height: 8em;
    position: absolute;
    top: 0;
    left: 0;
  
    .container1 &{
        animation: rotate-bg-dial-1-1 5s 0.2s linear infinite;
        border-radius: 8em 0 0 8em;
        background: #fc1d20;
        left: -4em;
        transform-origin: 100% 50%
    }
    .container2 &{
        animation: rotate-bg-dial-1-2 5s 0.2s linear infinite;
        background: #fc1d20;
        border-radius: 0 8em 8em 0;
        transform-origin: 0 50%;
        left: 4em;
    }
    .dial.exercise & {
        border-radius: 50%;
        width: 3em;
        height: 6em;
        position: absolute;
    }
}

.marker {
    width: 1em;
    height: 1em;
    background: #fc1d20;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: calc(50% - 0.5em)
}

.end {
    animation: rotate-marker-dial-1 5s 0.2s linear infinite;
    transform-origin: 50% 4em
}

.dial.exercise{
   .container1 {
        left: 3em;
      
        .wedge {
            animation: rotate-bg-dial-2-1 5s .5s linear infinite;
            border-radius: 8em 0 0 8em;
            position: absolute;
            background: #9cfc33;
            left: -3em;
            transform-origin: 100% 50%;
        }
    }
    .marker {
        width: 1em;
        height: 1em;
        background: #9cfc33;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: calc(50% - 0.48em);
    }
    .end {
        animation: rotate-marker-dial-2 5s .5s linear infinite;
        transform-origin: 45% 3em;
    }
}

.dial.stand {
    .dial-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4em;
        overflow: hidden;
    }
    .wedge {
        border-radius: 50%;
        width: 2em;
        height: 4em;
        position: absolute;
  }
  .container1 {
        left: 2em;
    
        .wedge {
            position: absolute;
            animation: rotate-bg-dial-3-1 5s 0.5s linear infinite;
            background: #32cbd4;
            border-radius: 8em 0 0 8em;
            left: -2em;
            transform-origin: 100% 50%;
        }
    }
    .marker {
        width: 1em;
        height: 1em;
        background: #32cbd4;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: calc(50% - 0.5em);
    }
    .end {
        animation: rotate-marker-dial-3 5s 0.5s linear infinite;
        transform-origin: 50% 2em;
    }
}


.dial-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    
    &.one {
        background: #400818;
    }
    &.two {
        background: #2d400c;
    }
    &.three {
        background: #163d3b
    }
}


.pips {
    animation: show-dials 5s 0.1s infinite ease-out;
    position: absolute;
    bottom: 0;
    left: calc(50% - 1em);
    width: 2em;
  
    div {
        width: 0.25em;
        height: 0.25em;
        background-color: #353535;
        border-radius: 50%;
        display: inline-block;
        margin: 0 0.02em;
        
        &:first-child {
            background-color: #fff
        }
    }
}


@keyframes rotate-marker-dial-1 {
    0%,6% {
        transform: none
    }

    28%,94% {
        transform: rotateZ(220deg)
    }

    95%,100% {
        transform: none
    }
}

@keyframes rotate-bg-dial-1-1 {
    0%,6% {
        transform: rotateZ(0)
    }

    24%,94% {
        transform: rotateZ(180deg)
    }

    95%,100% {
        transform: rotateZ(0)
    }
}


@keyframes rotate-bg-dial-1-2 {
    24% {
        transform: rotateZ(0)
    }

    28%,94% {
        transform: rotateZ(40deg)
    }

    95%,100% {
        transform: rotateZ(0)
    }
}

@keyframes rotate-marker-dial-2 {
    20%,90% {
        transform: rotateZ(160deg)
    }

    91%,100% {
        transform: none
    }
}

@keyframes rotate-bg-dial-2-1 {
    0%,0.5% {
        transform: none
    }

    19%,90% {
        transform: rotateZ(160deg)
    }

    91%,100% {
        transform: none
    }
}


@keyframes rotate-marker-dial-3 {
    19%,90% {
        transform: rotateZ(90deg)
    }

    91%,100% {
        transform: none
    }
}


@keyframes rotate-bg-dial-3-1 {
    0%,1% {
        transform: none
    }

    19%,90% {
        transform: rotateZ(90deg)
    }

    91%,100% {
        transform: none
    }
}

@keyframes show-title {
    0% {
        transform: translateY(0.25em);
        opacity: 0
    }

    10%,95% {
        transform: translateY(0);
        opacity: 1
    }

    100% {
        transform: translateY(0.25em);
        opacity: 0
    }
}

@keyframes show-dials {
    0%,8% {
        opacity: 0;
        transform: translateY(0.25em)
    }

    15%,93% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0;
        transform: translateY(0.25em)
    }
}

//from: https://cssanimation.rocks/watch/
//by http://hop.ie/