// RAMEN REVEAL COMPONENT
//
//
// Required Global Variables:
//
// $animation-duration-short
//
//
// Required Component Variables:
//
// $reveal-transform-before: Transform style of hidden state
// $reveal-transform-after: Transform style of revealed
//
//
// Required mixins:
//
// transition-hide
// transition-show
//
//

@mixin pre-reveal {
  @include transition-hide($reveal-transform-before);

  @for $i from 1 through 12 {
    &:nth-child(#{$i + 1}) {
      transition-delay: #{$animation-duration-short * ($i + 1)};
    }
  }
}

@mixin reveal {
  @include transition-show($reveal-transform-after);
}

.c-reveal {
  position: relative;

  &.is-visible {
    .c-reveal__loaded {
      @include reveal;
    }

    .c-reveal__loading {
      display: none;
    }
  }

  &__loaded {
    @include pre-reveal;
  }

  &__loading {
    display: block;
  }
}