@use "../base/setting" as *;
@use "../base/mixin" as *;


/* 
 * 左から要素をスライドイン
 */
 @mixin slideInFromLeft($duration) {
  animation-name: slideInFromLeftAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
  opacity: 0;
}

/* 
 * 下から上へ要素をフワッと出現させる
 */
 @mixin fadeInAndSlideUp($duration) {
  animation-name: fadeInAndSlideUpAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
  opacity: 0;
}

/* 
 * その場で要素をフワッと出現させる
 */
 @mixin fadeInAndFadeIn($duration) {
  animation-name: fadeInAndFadeInAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
  opacity: 0;
}

/* 
 * 右へ要素をスライドアウト
 */
 @mixin slideOutToRight($duration) {
  animation-name: slideOutToRightAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
  opacity: 0;
}

/* 
 * 要素を最大1.5倍にして下のサイズに戻す
 */
 @mixin zoomInAndOut($duration) {
  animation-name: zoomInAndOutAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
}

/* 
 * 画像をチカチカさせる
 */
@mixin flickerInvert($duration, $iteration-count) {
  animation-name: flickerInvertAnime;
  animation-duration: $duration;
  animation-iteration-count: $iteration-count;
}


/* 
 * カバーの横サイズを縮めて下の要素を表示
 */
 @mixin slideOutWidth($duration) {
  animation-name: slideOutWidthAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
}


/* 
 * カバーの横サイズを縮めて下の要素を表示
 */
 @mixin slideOutRightWidth($duration) {
  animation-name: slideOutRightWidthAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
}


/* 
 * カバーの横サイズを縮めて下の要素を表示
 */
 @mixin slideOutLeftWidth($duration) {
  animation-name: slideOutLeftWidthAnime;
  animation-duration: $duration;
  animation-fill-mode: both;
}

/* 
 * アニメーションスタートの遅延時間
 * .delay-time01 = 0.1s
 * .delay-time10 = 1s
 * .delay-time100 = 10s
 */
 $delay-time: 0.1s;
 @for $i from 1 through 100 {
   .delay-time#{$i} {
     animation-delay: $delay-time * $i;
   }
 }


/* 
 * .active対応
 */
.js-parallax {
  opacity: 0;
  transform: translateY(50px);

  &--fast.active {
    @include fadeInAndSlideUp(.2s);
  }
  
  &--slow.active {
    @include fadeInAndSlideUp(1s);
  }
  
  &--medium.active {
    @include fadeInAndSlideUp(.5s);
  }
}



.js-parallax-fadein {
  opacity: 0;

  &--fast.active {
    @include fadeInAndFadeIn(.2s);
  }
  
  &--slow.active {
    @include fadeInAndFadeIn(2s);
  }
  
  &--medium.active {
    @include fadeInAndFadeIn(.5s);
  }
}

.js-parallax-cover {
  &--fast.active {
    @include slideOutToRight(.2s);
  }
  
  &--slow.active {
    @include slideOutToRight(1s);
  }
  
  &--medium.active {
    @include slideOutToRight(.5s);
  }
}

.js-parallax-zoom {
  &--fast.active {
    @include zoomInAndOut(.2s);
  }
  
  &--slow.active {
    @include zoomInAndOut(1s);
  }
  
  &--medium.active {
    @include zoomInAndOut(.5s);
  }
}

.js-parallax-flicker {
  &--fast.active {
    @include flickerInvert(.2s, 10);
  }
  
  &--slow.active {
    @include flickerInvert(1s, 10);
  }
  
  &--medium.active {
    @include flickerInvert(.5s, 10);
  }
}

.js-parallax-right-width {
  &--fast.active {
    @include slideOutRightWidth(.2s);
  }
  
  &--slow.active {
    @include slideOutRightWidth(1s);
  }
  
  &--medium.active {
    @include slideOutRightWidth(.5s);
  }
}

.js-parallax-left-width {
  &--fast.active {
    @include slideOutLeftWidth(.2s);
  }
  
  &--slow.active {
    @include slideOutLeftWidth(1s);
  }
  
  &--medium.active {
    @include slideOutLeftWidth(.5s);
  }
}


/* 
 * 直css
 */
.fadeInAndSlideUp-fast {
  @include fadeInAndSlideUp(.2s);
}

.fadeInAndSlideUp-slow {
  @include fadeInAndSlideUp(1s);
}

.fadeInAndSlideUp-medium {
  @include fadeInAndSlideUp(.5s);
}

.fadeInAndFadeIn-fast {
  @include fadeInAndFadeIn(.2s);
}

.fadeInAndFadeIn-slow {
  @include fadeInAndFadeIn(1s);
}

.fadeInAndFadeIn-medium {
  @include fadeInAndFadeIn(.5s);
}

.slideInFromLeft-fast {
  @include slideInFromLeft(.2s);
}

.slideInFromLeft-slow {
  @include slideInFromLeft(1s);
}

.slideInFromLeft-medium {
  @include slideInFromLeft(.5s);
}

.slideOutToRight-fast {
  @include slideOutToRight(.2s);
}

.slideOutToRight-slow {
  @include slideOutToRight(1s);
}

.slideOutToRight-medium {
  @include slideOutToRight(.5s);
}

.zoomInAndOut-fast {
  @include zoomInAndOut(.2s);
}

.zoomInAndOut-slow {
  @include zoomInAndOut(1s);
}

.zoomInAndOut-medium {
  @include zoomInAndOut(.5s);
}



/* 
 * keyframes
 */
 @keyframes fadeInAndSlideUpAnime {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInAndFadeInAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideInFromLeftAnime {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToRightAnime {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  90% {
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes zoomInAndOutAnime {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes flickerInvertAnime {
  0% {
    filter: invert(1);
  }
  50% {
    filter: invert(0);
  }
  100% {
    filter: invert(1);
  }
}

@keyframes slideOutRightWidthAnime {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes slideOutLeftWidthAnime {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}


/* 
 * style用css
 */
.anim-cover-hide {
  display: inline-block;
  position: relative;

  
  &__cover {  // 背景色部分
    background: white;
    display: inline-block;
    height: calc(100% + 5px);
    left: -1px;
    position: absolute;
    top: -1px;
    width: calc(100% + 5px);
  }

  &__cover--orange {
    background: #e57339;
    display: inline-block;
    height: calc(100% - 4px);;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &__cover--line {
    background: #fff;
    bottom: -4px;
    display: inline-block;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
  }
}