@use 'global/common' as global;

/* ------------------------------
 アニメーション
------------------------------ */

/* フェードイン */
.acms-fade-in-strong {
  opacity: global.$acms-fade-in-strong;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: 1;
    will-change: opacity;
  }
}

.acms-fade-in {
  opacity: global.$acms-fade-in;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: 1;
    will-change: opacity;
  }
}

.acms-fade-in-light {
  opacity: global.$acms-fade-in-light;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: 1;
    will-change: opacity;
  }
}

/* フェードアウト */
.acms-fade-out-strong {
  opacity: 1;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: global.$acms-fade-out-strong;
    will-change: opacity;
  }
}

.acms-fade-out {
  opacity: 1;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: global.$acms-fade-out;
    will-change: opacity;
  }
}

.acms-fade-out-light {
  opacity: 1;
  transition: opacity global.$acms-fade-speed;

  &:hover {
    opacity: global.$acms-fade-out-light;
    will-change: opacity;
  }
}

/* JSが読み込めない環境のとき */
.no-js {
  .acms-slide-top,
  .acms-slide-left,
  .acms-slide-bottom,
  .acms-slide-right {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/* スライド */

/* 上からスライド */
.acms-slide-top {
  opacity: 0;
  transition:
    opacity global.$acms-slide-opacity-speed,
    transform global.$acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateX(0) translateY(global.$acms-slide-top);

  .active & {
    opacity: 1;
    transform: translateX(0) translateY(0);
    will-change: opacity, transform;
  }
}

/* 下からスライド */
.acms-slide-bottom {
  opacity: 0;
  transition:
    opacity global.$acms-slide-opacity-speed,
    transform global.$acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateX(0) translateY(global.$acms-slide-bottom);

  .active & {
    opacity: 1;
    transform: translateX(0) translateY(0);
    will-change: opacity, transform;
  }
}

/* 左からスライド */
.acms-slide-left {
  opacity: 0;
  transition:
    opacity global.$acms-slide-opacity-speed,
    transform global.$acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateX(global.$acms-slide-left) translateY(0);

  .active & {
    opacity: 1;
    transform: translateX(0) translateY(0);
    will-change: opacity, transform;
  }
}

/* 右からスライド */
.acms-slide-right {
  opacity: 0;
  transition:
    opacity global.$acms-slide-opacity-speed,
    transform global.$acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translateX(global.$acms-slide-right);

  .active & {
    opacity: 1;
    transform: translateX(0);
    will-change: opacity, transform;
  }
}

/* ズーム */
// 拡大
// hoverしたときに拡大する
.acms-zoom-in {
  transition: transform global.$acms-zoom-transform-speed;
  transform: scale(global.$acms-slide-zoom-in-default);

  &:hover {
    transform: scale(global.$acms-slide-zoom-in-hover);
    will-change: opacity, transform;
  }
}

// 拡大しながら表示する
.acms-zoom-in-show {
  opacity: 0;
  transition:
    opacity global.$acms-zoom-opacity-speed,
    transform global.$acms-zoom-transform-speed;
  transform: scale(global.$acms-slide-zoom-in-show);

  .active &,
  &.active {
    opacity: 1;
    transform: scale(global.$acms-slide-zoom-in-default);
    will-change: opacity, transform;
  }
}

// 縮小
// hoverしたときに縮小する
.acms-zoom-out {
  transition: transform global.$acms-zoom-transform-speed;
  transform: scale(global.$acms-slide-zoom-out-default);

  &:hover {
    transform: scale(global.$acms-slide-zoom-out-hover);
    will-change: opacity, transform;
  }
}

// 縮小しながら表示する
.acms-zoom-out-show {
  opacity: 0;
  transition:
    opacity global.$acms-zoom-opacity-speed,
    transform global.$acms-zoom-transform-speed;
  transform: scale(global.$acms-slide-zoom-out-show);

  .active &,
  &.active {
    opacity: 1;
    transform: scale(global.$acms-slide-zoom-out-default);
    will-change: opacity, transform;
  }
}

/* JSが読み込めない環境のとき */
.no-js {
  .acms-zoom-in-show,
  .acms-zoom-out-show {
    opacity: 1;
    transform: scale(1);
  }
}

/* ポップアップ */
//上
.acms-popup-top-child {
  .acms-popup-child {
    transition: transform global.$acms-popup-down-speed;
    transform: translateX(0) translateY(0);
  }

  &:hover .acms-popup-child {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(0) translateY(global.$acms-popup-top);
    will-change: transform;
  }
}

.acms-popup-top {
  transition: transform global.$acms-popup-down-speed;
  transform: translateX(0) translateY(0);

  &:hover {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(0) translateY(global.$acms-popup-top);
    will-change: transform;
  }
}

//右
.acms-popup-right-child {
  .acms-popup-child {
    transition: transform global.$acms-popup-down-speed;
    transform: translateX(0) translateY(0);
  }

  &:hover .acms-popup-child {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(global.$acms-popup-right) translateY(0);
    will-change: transform;
  }
}

.acms-popup-right {
  transition: transform global.$acms-popup-down-speed;
  transform: translateX(0) translateY(0);

  &:hover {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(global.$acms-popup-right) translateY(0);
    will-change: transform;
  }
}

//下
.acms-popup-bottom-child {
  .acms-popup-child {
    transition: transform global.$acms-popup-down-speed;
    transform: translateX(0) translateY(0);
  }

  &:hover .acms-popup-child {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(0) translateY(global.$acms-popup-bottom);
    will-change: transform;
  }
}

.acms-popup-bottom {
  transition: transform global.$acms-popup-down-speed;
  transform: translateX(0) translateY(0);

  &:hover {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(0) translateY(global.$acms-popup-bottom);
    will-change: transform;
  }
}

//左
.acms-popup-left-child {
  .acms-popup-child {
    transition: transform global.$acms-popup-down-speed;
    transform: translateX(0) translateY(0);
  }

  &:hover .acms-popup-child {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(global.$acms-popup-left) translateY(0);
    will-change: transform;
  }
}

.acms-popup-left {
  transition: transform global.$acms-popup-down-speed;
  transform: translateX(0) translateY(0);

  &:hover {
    transition: transform global.$acms-popup-up-speed;
    transform: translateX(global.$acms-popup-left) translateY(0);
    will-change: transform;
  }
}

/* 左から */
.acms-delay:nth-child(1),
.acms-delay-first {
  transition-delay: global.$acms-animation-delay-first;
}

.acms-delay:nth-child(2),
.acms-delay-second {
  transition-delay: global.$acms-animation-delay-second;
}

.acms-delay:nth-child(3),
.acms-delay-third {
  transition-delay: global.$acms-animation-delay-third;
}

.acms-delay:nth-child(4),
.acms-delay-fourth {
  transition-delay: global.$acms-animation-delay-fourth;
}

/* 右（反対方向）から */
.acms-delay-reverse:nth-child(4),
.acms-delay-reverse-fourth {
  transition-delay: global.$acms-animation-delay-reverse-fourth;
}

.acms-delay-reverse:nth-child(3),
.acms-delay-reverse-third {
  transition-delay: global.$acms-animation-delay-reverse-third;
}

.acms-delay-reverse:nth-child(2),
.acms-delay-reverse-second {
  transition-delay: global.$acms-animation-delay-reverse-second;
}

.acms-delay-reverse:nth-child(1),
.acms-delay-reverse-first {
  transition-delay: global.$acms-animation-delay-reverse-first;
}

/* JSが読み込めない環境のとき */
.no-js {
  .acms-slide-top,
  .acms-slide-left,
  .acms-slide-bottom,
  .acms-slide-right {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }

  .acms-zoom-in-show,
  .acms-zoom-out-show {
    opacity: 1;
    transform: scale(1);
  }
}
