/****** REVEAL ******/

// ------ Mixins ------
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}

@mixin defineAnimation($name) {
  &.reveal--#{$name} {
	-webkit-animation-name: reveal--#{$name};
	-moz-animation-name: reveal--#{$name};
	-o-animation-name: reveal--#{$name};
	animation-name: reveal--#{$name};
	@content
  }
}

// ------ Animations ------
@include keyframes('reveal--fadeInDown') {
  0% {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate3d(0, -30px, 0);
	-moz-transform: translate3d(0, -30px, 0);
	-ms-transform: translate3d(0, -30px, 0);
	-o-transform: translate3d(0, -30px, 0);
	transform: translate3d(0, -30px, 0);
  }

  100% {
	opacity: 1;
	visibility: visible;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
  }
}

@include keyframes('reveal--fadeInUp') {
  0% {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate3d(0, 30px, 0);
	-moz-transform: translate3d(0, 30px, 0);
	-ms-transform: translate3d(0, 30px, 0);
	-o-transform: translate3d(0, 30px, 0);
	transform: translate3d(0, 30px, 0);
  }

  100% {
	opacity: 1;
	visibility: visible;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
  }
}

@include keyframes('reveal--zoomOut') {
  0% {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale3d(2.2, 1.2, 1);
	-moz-transform: scale3d(2.2, 1.2, 1);
	-ms-transform: scale3d(2.2, 1.2, 1);
	-o-transform: scale3d(2.2, 1.2, 1);
	transform: scale3d(2.2, 1.2, 1);
  }

  100% {
	opacity: 1;
	visibility: visible;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
  }
}

@include keyframes('reveal--zoomIn') {
  0% {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale3d(0.2, 0.7, 1);
	-moz-transform: scale3d(0.2, 0.7, 1);
	-ms-transform: scale3d(0.2, 0.7, 1);
	-o-transform: scale3d(0.2, 0.7, 1);
	transform: scale3d(0.2, 0.7, 1);
  }

  100% {
	opacity: 1;
	visibility: visible;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
  }
}

// ------ Generic ------
.reveal {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  opacity: 0;
  visibility: hidden;

  &.inview {

	@include defineAnimation('fadeInDown') {}
	@include defineAnimation('fadeInUp') {}
	@include defineAnimation('zoomOut') {}
	@include defineAnimation('zoomIn') {}
  }

  @for $i from 1 through 8 {
	&.reveal-duration--#{$i * 250} {
	  -webkit-animation-duration: 250ms * $i;
	  -moz-animation-duration: 250ms * $i;
	  -o-animation-duration: 250ms * $i;
	  animation-duration: 250ms * $i;
	}
  }

  @for $i from 1 through 12 {
	&.reveal-delay--#{$i * 250} {
	  -webkit-animation-delay: 250ms * $i;
	  -moz-animation-delay: 250ms * $i;
	  -o-animation-delay: 250ms * $i;
	  animation-delay: 250ms * $i;
	}
  }
}