/* @import "compass/css3"; */

/* ------------------------ */
/* Variables				*/
/* ------------------------ */

$block-gutter: 10px;
$block-thumb-size: 200px;

$block-thumb-width: $block-thumb-size;
$block-thumb-height: $block-thumb-size;
$block-width: ($block-thumb-size * 3) + ($block-gutter * 2);
$block-height: $block-thumb-size * 2;

@function strip($number) {
  @return $number / ($number * 0 + 1);
}

$duration: 200ms;
$background: #fff;

$ease-linear: linear;
$ease-out: ease-out;
$ease-bounce: cubic-bezier(.17,.67,.68,3);
$ease-bounce-shallow: cubic-bezier(.17,.67,.68,2);

/* ------------------------ */
/* Some Helper Mixins		*/
/* ------------------------ */

@mixin gradient-to-color($color) {
  background: linear-gradient(color-stops(lighten($color, 20%), $color));
}

@function lorempixel-image-url($category, $index, $width, $height) {
  $width: strip($width);
  $height: strip($height);
  
  @return url(http://lorempixel.com/#{$width}/#{$height}/#{$category}/#{$index}/);
}

@mixin image($category, $index, $thumb: false, $generatedContent: false) {
  $width: $block-width;
  $height: $block-height;
  
  @if ($thumb) {
    $width: $block-thumb-size;
    $height: $width;
  }
  
  @if ($generatedContent == "before") {
    &:before {
      background: lorempixel-image-url($category, $index, $width, $height);
      background-size: cover;
      background-position: center center;
    }
  } @elseif ($generatedContent == "after") {
    &:after {
      background: lorempixel-image-url($category, $index, $width, $height);
      background-size: cover;
      background-position: center center;
    }
  } @else {
    background: lorempixel-image-url($category, $index, $width, $height);
    background-size: cover;
    background-position: center center;
  }
}

/* ------------------------ */
/* The Magic :)				*/
/* ------------------------ */

.slide-down {
  transition: transform;
  transition-duration: $duration;
  transition-timing-function: $ease-out;
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: -($block-height);
    width: $block-width;
    height: $block-height;
    background: $background;
    opacity: 0;
    transition: opacity, transform;
    transition-duration: $duration;
    transition-timing-function: $ease-out;
    pointer-events: none;
  }
  
  &:hover {
    &.from-center {
      transform: translateX(-50%) translateY($block-thumb-height);
      
      &:after {
        opacity: 1;
        transform: translateX(-50%) translateY($block-thumb-height);
      }
    }
    
    transform: translateY($block-thumb-height);
    
    &:after {
      opacity: 1;
      transform: translateY($block-thumb-height);
      pointer-events: auto;
    }
  }
}

.jump-up {  
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    opacity: 0;
    transition: opacity, transform;
    transition-duration: $duration*2;
    transition-timing-function: $ease-out, $ease-bounce;
    pointer-events: none;
  }
  
  &:before {
    top: $block-thumb-height;
    width: $block-width;
    height: $block-height;
    background: $background;
  }
  
  &:after {
    top: 0;
    width: $block-thumb-width;
    height: $block-thumb-height;
  }
  
  &:hover {
    &.from-center {
      &:before, &:after {
        opacity: 1;
      }
      
      &:before {
        transform: translateX(-50%) translateY(-($block-thumb-height));
      }
    }
    
    &:before, &:after {
      opacity: 1;
      pointer-events: auto;
    }
    
    &:before {
      transform: translateY(-($block-thumb-height));
    }
  }
}

.unfold {
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    top: -$block-thumb-height;
    opacity: 0;
    transition: transform, opacity, height;
    transition-duration: $duration;
    transition-timing-function: $ease-out, $ease-bounce;
    pointer-events: none;
    width: $block-thumb-width;
    height: $block-thumb-height;
  }
  
  &.block.from-center {
    background-size: cover;
    background-position: top center;
    
    &:before {
      left: -($block-thumb-width/2) - $block-gutter;
      background-size: $block-width;
      background-position: top left;
    }
    
    &:after {
      left: $block-thumb-width + ($block-thumb-width/2) + $block-gutter;
      background-size: $block-width;
      background-position: top right;
    }
  }
  
  &.block.to-right {
    background-size: cover;
    background-position: top left;
    
    &:before {
      left: $block-thumb-width + $block-gutter;
      background-size: $block-width;
      background-position: top center;
    }
    
    &:after {
      left: ($block-thumb-width + $block-gutter)*2;
      background-size: $block-width;
      background-position: top right;
    }
  }
  
  &.block.to-left {
    background-size: cover;
    background-position: top right;
    
    &:before {
      right: $block-thumb-width + $block-gutter;
      background-size: $block-width;
      background-position: top center;
    }
    
    &:after {
      right: ($block-thumb-width + $block-gutter)*2;
      background-size: $block-width;
      background-position: top left;
    }
  }
  
  transition: height;
  transition-duration: $duration;
  transition-timing-function: $ease-out;
  
  &.from-center {
    &:hover:before, &:hover:after {
      transform: translateX(-50%) translateY($block-thumb-height);
    }
  }
  
  &:hover {
    height: $block-height;
    
    &:before, &:after {
      opacity: 1;
      transform: translateY($block-thumb-height);
      height: $block-height;
    }
    &:before { transition-delay: $duration; }
    &:after { transition-delay: $duration*2; }
  }
}

.step-by-step {
  transition: height, width;
  transition-duration: $duration;
  transition-delay: 0, $duration*1.5;
  transition-timing-function: $ease-linear, $ease-linear;
  
  &:hover {
    width: $block-width;
    height: $block-height;
  }
}

.border-fill {
  transition: height, width;
  transition-duration: $duration;
  transition-delay: 0, $duration;
  transition-timing-function: $ease-out;
  border: 1px solid $background;
  
  &:after {
    content: "";
    position: absolute;
    top: -1px;
    width: $block-thumb-width;
    height: $block-thumb-height;
    background: $background;
    transition: height $duration, width $duration;
    transition-delay: $duration, $duration*2;
  }
  
  &.to-left:after { margin-right: -1px; }
  &.to-right:after { margin-left: -1px; }
  
  &:hover {
    width: $block-width;
    height: $block-height;
    background: transparent;
    
    &:after {
      width: $block-width;
      height: $block-height;
      transition-delay: $duration*2, $duration*3;
    }
  }
}

.circle {
  transition: width, height;
  transition-duration: $duration;
  transition-timing-function: $ease-out;
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    transition: width, height, right, left, opacity, transform;
    transition-duration: $duration*2;
    transition-timing-function: $ease-out, $ease-out, $ease-linear, $ease-linear, $ease-linear, $ease-linear;
    width: $block-thumb-width;
    height: $block-thumb-height;
  }
  
  &.to-right {
    &:after {
      left: 0;
    }
    &:hover:after {
      left: 50%; 
      transform: translateX(-50%); 
    }
  }
  &.to-left {
    &:after {
      right: 0;
    }
    &:hover:after {
      right: 50%; 
      transform: translateX(50%);
    }
  }
  
  &.block:after {
    border-radius: 50%;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  }
  
  &:hover {
    width: $block-width;
    height: $block-height;
    
    &:after {
      width: $block-height;
      height: $block-height;
    }
  }
}

.zoom {  
  &:hover {
    animation: grow forwards;
    animation-duration: 1s;
  }
}

.bouncy {
  transition: width, height, transform;
  transition-duration: $duration*2;
  transition-timing-function: $ease-bounce-shallow;
  
  &:hover {
    width: $block-width;
    height: $block-height;
  }
}

.shake {
  transition: transform;
  transition-duration: $duration;
  transition-timing-function: $ease-out;
  
  &:hover {
    &.from-center {
      animation: shake-from-center 10, grow steps(10) forwards;
      animation-duration: 0.1s, 1s;
    }
    
    animation: shake 10, grow steps(10) forwards;
    animation-duration: 0.1s, 1s;
  }
}

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

@keyframes grow {
  from {
    width: $block-thumb-width;
    height: $block-thumb-height;
  }
  to { 
    width: $block-width;
    height: $block-height;
  }
}

@keyframes shake {
  0% {
    transform: translateX(-5px) rotate(-5deg);
  }
  50% {
    transform: translateX(5px) rotate(5deg);
  }
  100% {
    transform: translateX(-5px) rotate(-5deg);
  }
}

@keyframes shake-from-center {
  0% {
    transform: translateX(calc(-50% - 5px)) rotate(-5deg);
  }
  50% {
    transform: translateX(calc(-50% + 5px)) rotate(5deg);
  }
  100% {
    transform: translateX(calc(-50% - 5px)) rotate(-5deg);
  }
}

/* ------------------------ */
/* General Styles			*/
/* ------------------------ */

body, h1, h3, h4 {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  color: white;
}

a { color: white; }

.row {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  background-size: cover;
  @include background-image(linear-gradient(160deg, transparentize(#41a6b4, 0.1), transparentize(#95cfb8, 0.1)));
  
  &:first-child, &:last-child {
    background: #41a6b4;
  }
  
  &.header .row__inner, &.footer .row__inner {
    text-align: center;
    line-height: 0.75em;
    padding: $block-gutter*5 0;
  }
  &:not(.header):not(.footer) .row__inner {
    height: 500px;
  }
}

.row__inner {
  margin: 0 auto;
  padding: $block-gutter 0 $block-gutter*3 0;
  width: $block-thumb-width * 3 + ($block-gutter * 2);
  position: relative;
}

.block {
  width: $block-thumb-size;
  height: $block-thumb-size;
  position: absolute;
  border-radius: 5px;
  box-sizing: border-box;
  
  &:before, &:after {
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  &:hover {
    z-index: 100;
  }
}

.to-left,
.to-left:before,
.to-left:after { 
  right: 0; 
}

.to-right, 
.to-right:before, 
.to-right:after { 
  left: 0; 
}

.from-center, 
.from-center:before, 
.from-center:after { 
  left: 50%; 
  transform: translateX(-50%); 
}

nav {
  font-size: 14px;
  
  ul {
    margin: 0;
    padding: 20px 0 0 0;
    list-style-type: none;
    
    li {
      display: inline-block;
      margin: 0 5px;
    }
  }
  
  a {
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.5);
    
    &:hover {
      background: white;
      color: lighten(#c0392b, 20%);
    }
  }
}

/* ------------------------ */
/* Lorem Pixels				*/
/* ------------------------ */

.slide-down {
  &:nth-child(2) { @include image("people", 1, true); @include image("people", 1, false, "after"); }
  &:nth-child(3) { @include image("people", 2, true); @include image("people", 2, false, "after"); }
  &:nth-child(4) { @include image("people", 3, true); @include image("people", 3, false, "after"); }
}

.jump-up {
  &:nth-child(2) { @include image("nature", 1, true); @include image("nature", 1, false, "before"); }
  &:nth-child(3) { @include image("nature", 2, true); @include image("nature", 2, false, "before"); }
  &:nth-child(4) { @include image("nature", 3, true); @include image("nature", 3, false, "before"); }
}

.unfold {
  &:nth-child(2) {
    @include image("cats", 1, false);
    @include image("cats", 1, false, "before");
    @include image("cats", 1, false, "after");
  }
  &:nth-child(3) { 
    @include image("cats", 5, false);
    @include image("cats", 5, false, "before");
    @include image("cats", 5, false, "after");
  }
  &:nth-child(4) { 
    @include image("cats", 3, false);
    @include image("cats", 3, false, "before");
    @include image("cats", 3, false, "after");
  }
}

.step-by-step {
  &:nth-child(2) { @include image("fashion", 1, false); }
  &:nth-child(3) { @include image("fashion", 2, false); }
  &:nth-child(4) { @include image("fashion", 3, false); }
}

.border-fill {
  &:nth-child(2) { @include image("sports", 1, false, "after"); }
  &:nth-child(3) { @include image("sports", 2, false, "after"); }
  &:nth-child(4) { @include image("sports", 3, false, "after"); }
}

.circle {
  &:nth-child(2) { @include image("transport", 1, false, "after"); }
  &:nth-child(3) { @include image("transport", 2, false, "after"); }
  &:nth-child(4) { @include image("transport", 3, false, "after"); }
}

.zoom {
  &:nth-child(2) { @include image("food", 1, false); }
  &:nth-child(3) { @include image("food", 2, false); }
  &:nth-child(4) { @include image("food", 3, false); }
}

.bouncy {
  &:nth-child(2) { @include image("nightlife", 1, false); }
  &:nth-child(3) { @include image("nightlife", 2, false); }
  &:nth-child(4) { @include image("nightlife", 3, false); }
}

.shake {
  &:nth-child(2) { @include image("sports", 4, false); }
  &:nth-child(3) { @include image("sports", 5, false); }
  &:nth-child(4) { @include image("sports", 6, false); }
}