// studio animations & keyframes
// ====================

// fade in
@include keyframes(fadeIn) {
  0% {
    opacity: 0.0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1.0;
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-fadeIn {
  @include animation(fadeIn $tmg-f2 linear 1);
}


// fade out
@include keyframes(fadeOut) {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.0;
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-fadeOut {
  @include animation(fadeOut $tmg-f2 linear 1);
}


// ====================


// rotate up
@include keyframes(rotateUp) {
  0% {
    @include transform(rotate(0deg));
  }

  50% {
    @include transform(rotate(-90deg));
  }

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

// canned animation - use if you want out of the box/non-customized anim
.anim-rotateUp {
  @include animation(rotateUp $tmg-f2 ease-in-out 1);
}


// rotate up
@include keyframes(rotateDown) {
  0% {
    @include transform(rotate(0deg));
  }

  50% {
    @include transform(rotate(90deg));
  }

  100% {
    @include transform(rotate(180deg));
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-rotateDown {
  @include animation(rotateDown $tmg-f2 ease-in-out 1);
}


// rotate clockwise
@include keyframes(rotateCW) {
  0% {
    @include transform(rotate(0deg));
  }

  50% {
    @include transform(rotate(180deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-rotateCW {
  @include animation(rotateCW $tmg-s1 linear infinite);
}


// rotate counter-clockwise
@include keyframes(rotateCCW) {
  0% {
    @include transform(rotate(0deg));
  }

  50% {
    @include transform(rotate(-180deg));
  }

  100% {
    @include transform(rotate(-360deg));
  }
}

// canned  animation - use if you want out of the box/non-customized anim
.anim-rotateCCW {
  @include animation(rotateCCW $tmg-s1 linear infinite);
}


// ====================


// notifications slide up
@include keyframes(notificationSlideUp) {
  0% {
    @include transform(translateY(0));
  }

  90% {
    @include transform(translateY(-($notification-height)));
  }

  100% {
    @include transform(translateY(-($notification-height*0.99)));
  }
}

// notifications slide down
@include keyframes(notificationSlideDown) {
  0% {
    @include transform(translateY(-($notification-height*0.99)));
  }

  10% {
    @include transform(translateY(-($notification-height)));
  }

  100% {
    @include transform(translateY(0));
  }
}


// ====================


// bounce in
@include keyframes(bounceIn) {
  0% {
    opacity: 0.0;
    @include transform(scale(0.3));
  }

  50% {
    opacity: 1.0;
    @include transform(scale(1.05));
  }

  100% {
    @include transform(scale(1));
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-bounceIn {
  @include animation(bounceIn $tmg-f1 ease-in-out 1);
}


// bounce out
@include keyframes(bounceOut) {
  0% {
    @include transform(scale(1));
  }

  50% {
    opacity: 1.0;
    @include transform(scale(1.05));
  }

  100% {
    opacity: 0.0;
    @include transform(scale(0.3));
  }
}

// canned animation - use if you want out of the box/non-customized anim
.anim-bounceOut {
  @include animation(bounceOut $tmg-f1 ease-in-out 1);
}