/*

Captions

Captions effects adapted from [Effeckt.css](https://github.com/h5bp/Effeckt.css).

Effects availables (first example is without effect): `cover-push-right`, `cover-slide-top`, `guillotine-reverse`, `half-slide`, `offset`, `quarter-appear`, `quarter-fall-in`, `quarter-slide-side`, `quarter-slide-up`, `quarter-two-step`, `quarter-zoom`, `revolving-door-bottom`, `revolving-door-left`, `revolving-door-right`, `revolving-door-top`.

Markup:
<figure class="caption" data-effect-type="{$modifiers}">
  <img src=http://dummyimage.com/300x200/afe600/ffffff" alt="">
  <figcaption>
    <div class="effect-figcaption-wrap">
      <h3>Guillotine Reverse</h3>
      <p>Lorem ipsum dolar.</p>
    </div>
  </figcaption>
</figure>

cover-fade - Cover Fade
cover-push-right - Cover Push Right
cover-slide-top - Cover Slide Top
guillotine-reverse - Guillotine Reverse / Reveal Up
half-slide - Half Slide
offset - Caption Offset
quarter-appear - Appear
quarter-fall-in - Quarter Fall in
quarter-slide-side - Quarter Slide Side
quarter-slide-up - Quarter Slide Up
quarter-two-step - Quarter Two Step
quarter-zoom - Quarter Caption Zoom
revolving-door-bottom - Revolving Door
revolving-door-left - Revolving Door
revolving-door-right - Revolving Door
revolving-door-top - Revolving Door

Styleguide 5

*/

@if $captions {

  .caption {
    position: relative;
    overflow: hidden;
    @include perspective(1000);
    @extend %display-inline-block;


    &:nth-child(2n) {
      margin-right: 0;
    }
    img {
      @extend %display-block;
      transition: $caption-animations-duration;
    }
    figcaption {
      @extend %caption;
      position: absolute;
      transition: $caption-animations-duration;
      width: 100%;
      @include backface-visibility(hidden);

      * {
        margin-bottom: 0;
      }

    }

    // Effect 1: Appear
    &[data-effect-type="quarter-appear"] {
      figcaption {
        bottom: 0;
        left: 0;
        @include opacity(0);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include opacity(1);
        }
      }
    }


    // Effect 2: Quarter Slide Up
    &[data-effect-type="quarter-slide-up"] {
      figcaption {
        bottom: 0;
        left: 0;
        @include opacity(0);
        @include translateY(100%);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include opacity(1);
          @include translateY(0);
        }
      }
    }


    // Effect 4: Quarter Slide Side
    &[data-effect-type="quarter-slide-side"] {
      figcaption {
        left: 0;
        bottom: 0;
        @include opacity(0);
        @include translateX(100%);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include opacity(1);
          @include translateX(0);
        }
      }
    }


    // Effect 5: Cover Fade
    &[data-effect-type="cover-fade"] {
      figcaption {
        top: 0;
        left: 0;
        height: 100%;
        @include opacity(0);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include opacity(1);
        }
      }
    }


    // Effect 6 - Quarter Fall in
    &[data-effect-type="quarter-fall-in"] {
      figcaption {
        top: 0;
        left: 0;
        @include simple-transform($rotate: 20deg, $trans-x:100%);
        @include opacity(0);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include simple-transform($rotate: 0deg, $trans-x:0);
          @include opacity(1);
        }
      }
    }


    // Effect 7 - 3Quarter Two Step
    &[data-effect-type="quarter-two-step"] {
      figcaption {
        top: 0;
        left: 0;
        @include translateX(-100%);
        @include opacity(0);
        z-index: 2;
      }
      .effect-figcaption-wrap {
        transition: $caption-animations-duration $caption-animations-duration/2;
        @include translateX(200%);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include translateX(0);
          @include opacity(1);
        }
        .effect-figcaption-wrap {
          @include translateX(0);
        }
      }
    }


    // Effect 8 - Cover Push Right
    &[data-effect-type="cover-push-right"] {
      figcaption {
        top: 0;
        left: 0;
        height: 100%;
        @include translateX(-100%);
        @include opacity(0);
      }
      img {
        transition: $caption-animations-duration;
        @include translateX(0);
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include translateX(0);
          @include opacity(1);
        }
        img {
          @include translateX(100%);
        }
      }
    }

    // Effect 15 - Cover Slide Top
    &[data-effect-type="cover-slide-top"] {
      figcaption {
        top: 0;
        left: 0;
        height: 100%;
        @include translateY(-100%);
        @include opacity(0);
      }
      img {
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include translateY(0);
          @include opacity(1);
        }
      }
    }


    // Effect 9 - Quarter Caption Zoom
    &[data-effect-type="quarter-zoom"] {
      figcaption {
        top: 0;
        left: 0;
        @include scale(2);
        @extend %text-align-center;
        @include opacity(0);
      }
      img {
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include scale(1);
          @include opacity(1);
        }
        img {
          @include scale(1.1);
        }
      }
    }


    // Effect 10 - Revolving Door
    // BUG: Super flickery in Safari 5.1.7 on Windows 7
    &[data-effect-type="revolving-door-left"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include rotateY(180deg);
      }
      img {

        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include rotateY(0deg);
        }
        img {
          @include rotateY(-180deg);
        }
      }
    }

    &[data-effect-type="revolving-door-right"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include rotateY(180deg);
      }
      img {
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {

          @include rotateY(360deg);
        }
        img {
          @include rotateY(180deg);
        }
      }
    }

    &[data-effect-type="revolving-door-top"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include rotateX(180deg);
      }
      img {

        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include rotateX(360deg);
        }
        img {
          @include rotateX(180deg);
        }
      }
    }

    &[data-effect-type="revolving-door-bottom"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        @include rotateX(180deg);
      }
      img {

        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include rotateX(0deg);
        }
        img {
          @include rotateX(-180deg);;
        }
      }
    }

    // Effect 11 - Caption Offset
    &[data-effect-type="offset"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        @extend %text-align-center;
        @include opacity(0);
        height: 100%;
      }
      img {
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        figcaption {
          @include translate(15px, 15px);
          @include opacity(1);
          z-index: 100; //prevent ovarslap
          overflow: hidden;
        }
      }
    }
    // Effect 12 - Guillotine Reverse / Reveal Up
    &[data-effect-type="guillotine-reverse"] {
      overflow: visible;
      figcaption {
        top: 0;
        left: 0;
        @extend %text-align-center;
        height: 100%;
      }
      img {
        @extend %display-block;
        position:relative;
        z-index:10;
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        img {
          @include translateY(-100%);
        }
      }
    }
    // Effect 13 - Half Slide
    &[data-effect-type="half-slide"] {
      figcaption {
        top: 0;
        left: 0;
        @extend %text-align-center;
        height: 100%;
        @include translateY(100%);
      }
      img {
        @extend %display-block;
        position:relative;
        transition: $caption-animations-duration;
      }
      &:hover, &.hover, &:active {
        img {
          @include translateY(-50%);
        }
        figcaption {
          @include translateY(50%);
        }
      }
    }

  }

}