// Colors
// ==========================================================================
$mopro-colors: (
    "mopro-orange-1": #ff5722,
    "mopro-orange-2": #ff9800,
    "mopro-orange-3": #ffc107,
    "mopro-purple-1": #673ab7,
    "mopro-blue-1":   #0099ff
);
$static-colors: (
    "blue-1":  #ced3e0,
    "blue-2":  #667fac,
    "blue-3":  #90c6db,
    "blue-4":  #a5c2d4,
    "gray-1":  #959da7,
    "gray-2":  #f2f5f9,
    "black":   #636363,
    "jetblack":#000000,
    "error":   #ea1744,
    "success": #0aa958
);
$social-colors: (
    "facebook":   #3b5998,
    "twitter":    #55acee,
    "google-plus":#dd4b39,
    "google":     #4285f4,
    "youtube":    #bb0000,
    "linkedin":   #007bb5,
    "instagram":  #e95950,
    "pinterest":  #cb2027,
    "flickr":     #ff0084,
    "tumblr":     #32506d,
    "rss":        #ff6600,
    "vimeo":      #aad450,
    "yelp":       #d32323,
    "foursquare": #f94877
);

// Gradient
// ==========================================================================
$gradient: linear-gradient(to bottom left, map-get($mopro-colors, "mopro-blue-1"), map-get($mopro-colors, "mopro-purple-1"));
$half-gradient: linear-gradient(to  bottom, transparent, map-get($mopro-colors, "mopro-purple-1") 80%);

// Material Shadow
// ==========================================================================
$dropdown-shadow: 0 16px 10px -4px rgba(0, 0, 0, 0.16), 0 16px 20px -4px rgba(0, 0, 0, 0.12);
$z-depth-one: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
$z-depth-two: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3);
$z-depth-three: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);
$z-depth-four: 0 10px 12px 0 rgba(0,0,0,0.14), 0 3px 16px 1px rgba(0,0,0,0.12), 0 5px 5px -2px rgba(0,0,0,0.3);
$z-depth-five: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
$z-depth-one-light: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.08);
$z-depth-two-light: 0 16px 24px 2px rgba(0,0,0,0.10),0 5px 30px 4px rgba(0,0,0,0.04),0 8px 10px -5px rgba(0,0,0,0.1);

// Transition
// ==========================================================================
$transition-speed: .3s;
$transition-speed-medium: .2s;
$transition-speed-fast: .15s ease-out;


// Transform
// ==========================================================================
$scale-up-one: scale(1.1);
$scale-up-two: scale(1.3);


// Border Radius
// ==========================================================================
$border-radius: 2px;


// Font Import
// ==========================================================================
@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }
}

// Transition
// ==========================================================================
@mixin transition($transition...) {
    -webkit-transition: $transition;
        -ms-transition: $transition;
            transition: $transition;
}

// Transition Delay
// ==========================================================================
@mixin transition-delay($transition-delay...) {
    -webkit-transition-delay: $transition-delay;
        -ms-transition-delay: $transition-delay;
            transition-delay: $transition-delay;
}

// Transform
// ==========================================================================
@mixin transform($transforms) {
    -webkit-transform: $transforms;
        -ms-transform: $transforms;
            transform: $transforms;
}

// Transform Origin
// ==========================================================================
@mixin transform-origin($transform-origin) {
    -webkit-transform-origin: $transform-origin;
        -ms-transform-origin: $transform-origin;
            transform-origin: $transform-origin;
}

// Keyframes
// ==========================================================================
@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

// Animation
// ==========================================================================
@mixin animation($str...) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  animation: #{$str};      
}

// Animation Delay
// ==========================================================================
@mixin animation-delay($str...) {
  -webkit-animation-delay: #{$str};
  -moz-animation-delay: #{$str};
  -ms-animation-delay: #{$str};
  animation-delay: #{$str};
}

// Animation Direction
// ==========================================================================
@mixin animation-direction($str...) {
  -webkit-animation-direction: #{$str};
  -moz-animation-direction: #{$str};
  -ms-animation-direction: #{$str};
  animation-direction: #{$str};
}

// Animation Duration
// ==========================================================================
@mixin animation-duration($str...) {
  -webkit-animation-duration: #{$str};
  -moz-animation-duration: #{$str};
  -ms-animation-duration: #{$str};
  animation-duration: #{$str};
}

// Placeholder
// ==========================================================================
@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

// Flex
// ==========================================================================
@mixin flex {
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}
@mixin inline-flex {
	display: -moz-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
@mixin align-items($align) {
    -ms-flex-pack: $align;
    align-items: $align;
}
@mixin justify-content($justify) {
    -ms-flex-align: $justify;
    justify-content: $justify;
}


// Unnecessary
// ==========================================================================
html,
body {
  width: 100%;
  height: 100%;
}
html {
  font-size: 14px;
  display: table;
}
body {
  position: relative;
  background: url("https://d3ciwvs59ifrt8.cloudfront.net/0f85269b-d32e-41c5-8859-fa3f391e0897/d353110f-2387-4b6a-b01d-1712dc23e781.jpg");
  background-size: cover;
  color: #fff;
  font-family: "Lato", sans-serif;
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom right, #ff0000, #cb33aa);
    opacity: 0.9;
    z-index: -1;
  }
}
a {
  cursor: pointer;
}


// Rings
// ==========================================================================
.ring__container {
    max-width: 660px;
    margin: 0 auto;
    .ring {
        opacity: 0;
        @include animation(circle-position .45s cubic-bezier(.165,.84,.44,1) forwards);
        // glow on hover
        &:after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 0 0 26px map-get($mopro-colors, "mopro-orange-3");
            border-radius: 50%;
            opacity: 0;
            @include transform(scale(0.88));
        }
        @keyframes ring-shadow {
            50% {
                opacity: 0.5;
            }
        }
        // disabled state
        &.disabled {
            pointer-events: none;
            .ring__circles,
            .ring__text {
                opacity: 0.2;
            }
        }
        &:hover {
            &:before {
                @include animation(ring-pulse .6s forwards);
            }
            &:after {
                @include animation(ring-shadow .6s forwards);
            }
            .ring__circles {
                span > span {
                    @include transform(translate(0) scale(0.93)!important);
                }
            }
        }
        // opening animation (home screen), size & positions
        &:nth-child(1) {
            width: 300px;
            height: 300px;
            @include transform(translate(-40px, -40px));
            @include animation-delay(.1s);
            margin-left: 105px;
        }
        &:nth-child(2) {
            width: 150px;
            height: 150px;
            @include transform(translate(40px, -40px));
            @include animation-delay(.15s);
            margin-top: -274px;
            margin-left: 410px;
        }
        &:nth-child(3) {
            width: 225px;
            height: 225px;
            @include transform(translate(40px, 40px));
            @include animation-delay(.2s);
            margin-top: -5px;
            margin-left: auto;
        }
        &:nth-child(4) {
            width: 175px;
            height: 175px;
            @include transform(translate(0, 40px));
            @include animation-delay(.25s);
            margin-top: -40px;
            margin-left: 333px;
        }
        &:nth-child(5) {
            width: 140px;
            height: 140px;
            @include transform(translate(-40px, 40px));
            @include animation-delay(.3s);
            margin-top: -222px;
            margin-left: 202px;
        }
        &:nth-child(6) {
            width: 200px;
            height: 200px;
            @include transform(translate(-40px, 0));
            @include animation-delay(.35s);
            margin-top: -195px;
        }
    }
    // adjust position of 4th and 5th ring
    &.ring-num-5 {
        .ring {
            &:nth-child(4) {
                width: 200px;
                height: 200px;
                margin-top: -84px;
                margin-left: 272px;
            }
            &:nth-child(5) {
                margin-top: -215px;
                margin-left: 129px;
            }
        }
    }
}
// general
.ring {
    position: relative;
    /*@include flex;
    @include align-items(center);
    @include justify-content(center);*/
    display: table;
    @include transition(.45s cubic-bezier(.165,.84,.44,1));
    // pulse on hover
    &:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        border: 1px solid #fff;
        border-radius: 100%;
        @include transform(scale(0.78));
        opacity: 0;
    }
    @include keyframes(ring-pulse) {
        0% {
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            @include transform(scale(1));
        }
    }
    @include keyframes(ring-pulse-two) {
        0% {
            opacity: 0;
        }
        1% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            @include transform(scale(1.2));
        }
    }
    .ring__text {
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        // font-family: "Proxima-Nova";
        font-size: 0.857rem;
        letter-spacing: 1px;
        font-weight: 300;
        line-height: normal;
        display: table-cell;
        vertical-align: middle;
        span, i {
            display: block;
        }
        span {
            margin-top: 10px;
        }
        i {
            font-size: 48px;
            @include transition(.45s cubic-bezier(.165,.84,.44,1));
        }
    }
    .ring__circles {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        > span {
            @include animation(rotate360 linear infinite);
            > span {
                @include transition(.45s cubic-bezier(.165,.84,.44,1));
            }
        }
    }
    // animation on non disabled rings
    &:not(.disabled) {
        .ring__circles {
            span {
                &:nth-child(1) {
                    > span {
                        @include transform(translate(-4%, 0));
                    }
                }
                &:nth-child(2) {
                    > span {
                        @include transform(translate(3%, -2%));
                        opacity: 0.6;
                    }
                }
                &:nth-child(3) {
                    > span {
                        @include transform(translate(3%, -3%));
                        opacity: 0.8;
                    }
                }
                &:nth-child(4) {
                    > span {
                        @include transform(translate(2%, 1%));
                        opacity: 0.5;
                    }
                }
                &:nth-child(5) {
                    > span {
                        @include transform(translate(-4%, -2%));
                        opacity: 0.4;
                    }
                }
            }
        }
    }
    // offset ring animation timings
    &:nth-child(1) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(4.8s);
                }
                &:nth-child(2) {
                    @include animation-delay(.2s);
                    @include animation-duration(4.5s);
                }
                &:nth-child(3) {
                    @include animation-direction(reverse);
                    @include animation-delay(.4s);
                    @include animation-duration(4.2s);
                }
                &:nth-child(4) {
                    @include animation-delay(.6s);
                    @include animation-duration(3.9s);
                }
                &:nth-child(5) {
                    @include animation-direction(reverse);
                    @include animation-delay(.8s);
                    @include animation-duration(3.7s);
                }
            }
        }
    }
    &:nth-child(2) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(3.6s);
                }
                &:nth-child(2) {
                    @include animation-direction(reverse);
                    @include animation-delay(.3s);
                    @include animation-duration(3.8s);
                }
                &:nth-child(3) {
                    @include animation-delay(.5s);
                    @include animation-duration(4.1s);
                }
                &:nth-child(4) {
                    @include animation-direction(reverse);
                    @include animation-delay(.7s);
                    @include animation-duration(4.4s);
                }
                &:nth-child(5) {
                    @include animation-delay(.9s);
                    @include animation-duration(4.7s);
                }
            }
        }
    }
    &:nth-child(3) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(4.4s);
                }
                &:nth-child(2) {
                    @include animation-delay(.4s);
                    @include animation-duration(4.2s);
                }
                &:nth-child(3) {
                    @include animation-direction(reverse);
                    @include animation-delay(.6s);
                    @include animation-duration(3.9s);
                }
                &:nth-child(4) {
                    @include animation-delay(.8s);
                    @include animation-duration(3.6s);
                }
                &:nth-child(5) {
                    @include animation-direction(reverse);
                    @include animation-delay(1s);
                    @include animation-duration(3.3s);
                }
            }
        }
    }
    &:nth-child(4) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(4.8s);
                }
                &:nth-child(2) {
                    @include animation-direction(reverse);
                    @include animation-delay(.5s);
                    @include animation-duration(4.5s);
                }
                &:nth-child(3) {
                    @include animation-delay(.7s);
                    @include animation-duration(4.2s);
                }
                &:nth-child(4) {
                    @include animation-direction(reverse);
                    @include animation-delay(.9s);
                    @include animation-duration(3.9s);
                }
                &:nth-child(5) {
                    @include animation-delay(1.1s);
                    @include animation-duration(3.6s);
                }
            }
        }
    }
    &:nth-child(5) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(4.1s);
                }
                &:nth-child(2) {
                    @include animation-delay(.6s);
                    @include animation-duration(4s);
                }
                &:nth-child(3) {
                    @include animation-direction(reverse);
                    @include animation-delay(.8s);
                    @include animation-duration(3.9s);
                }
                &:nth-child(4) {
                    @include animation-delay(1s);
                    @include animation-duration(3.8s);
                }
                &:nth-child(5) {
                    @include animation-direction(reverse);
                    @include animation-delay(1.2s);
                    @include animation-duration(3.7s);
                }
            }
        }
    }
    &:nth-child(6) {
        .ring__circles {
            > span {
                &:nth-child(1) {
                    @include animation-duration(4.6s);
                }
                &:nth-child(2) {
                    @include animation-direction(reverse);
                    @include animation-delay(.9s);
                    @include animation-duration(4.3s);
                }
                &:nth-child(3) {
                    @include animation-delay(1.1s);
                    @include animation-duration(4s);
                }
                &:nth-child(4) {
                    @include animation-direction(reverse);
                    @include animation-delay(1.3s);
                    @include animation-duration(3.7s);
                }
                &:nth-child(5) {
                    @include animation-delay(1.5s);
                    @include animation-duration(3.4s);
                }
            }
        }
    }
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        stop {
            @include transition(.45s cubic-bezier(.165,.84,.44,1));
        }
    }
    circle {
        fill: transparent;
        stroke-width: 1px;
    }
    // hover gradient effect
    &:hover {
        .ring__text {
            i {
                color: map-get($mopro-colors, "mopro-orange-2");
            }
        }
        svg {
            stop {
                &:nth-child(1) {
                    stop-color: map-get($mopro-colors, "mopro-orange-1");
                }
                &:nth-child(2) {
                    stop-color: map-get($mopro-colors, "mopro-orange-3");
                }
            }
        }
    }
    // smaller rings (not on homepage)
    &.ring--xxs {
        width: 80px;
        height: 80px;
        .ring__text {
            i {
                font-size: 30px;
            }
        }
        &.disabled {
            .ring__text {
                opacity: 0.2;
            }
        }
        &:not(.disabled) {
            .ring__circles {
            > span {
                &:nth-child(2) {
                    > span {
                        @include transform(translate(-3px, -4px));
                    }
                }
                &:nth-child(3) {
                    > span {
                        @include transform(translate(2px, -5px));
                    }
                }
                &:nth-child(4) {
                    > span {
                        @include transform(translate(-2px, -5px));
                    }
                }
                &:nth-child(5) {
                    > span {
                        @include transform(translate(-3px, -3px));
                    }
                }
            }
        }
        }
    }
}
@include keyframes(rotate360) {
    to {
        @include transform(rotate(360deg));
    }
}
@include keyframes(circle-position) {
    to {
        opacity: 1;
        @include transform(translate(0));
    }
}
$x: 0;
// home screen circles
@while $x < 6 {
    $x: $x + 1;
    .circle#{$x} {
        stroke: url(#circle#{$x});
    }
}
$e: 69;



// Media Queries
// ==========================================================================

@media(max-height: 600px) {
    // main screen rings for small screens
    .ring__container {
        max-width: 500px;
        .ring {
            .ring__text i {
                font-size: 32px;
            }
            &:nth-child(1) {
                width: 225px;
                height: 225px;
                margin-left: 7px;
            }
            &:nth-child(2) {
                width: 140px;
                height: 140px;
                margin-top: -204px;
                margin-left: 235px;
            }
            &:nth-child(3) {
                width: 150px;
                height: 150px;
                margin-top: -50px;
            }
            &:nth-child(4) {
                width: 125px!important; // !important to override desktop ring-num-5 nth-child(4)
                height: 125px!important;
                margin-top: -93px!important;
                margin-left: 231px!important;
            }
            &:nth-child(5) {
                width: 150px;
                height: 150px;
                margin-top: -32px;
                margin-left: 123px;
            }
            &:nth-child(6) {
                width: 130px;
                height: 130px;
                margin-top: -189px;
            }
        }
        // adjust position of 5th ring
        &.ring-num-5 {
            .ring {
                &:nth-child(5) {
                    margin-top: -71px;
                    margin-left: 91px;
                }
            }
        }
    }
}