@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 {
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
		opacity: 1;
	}
}




/* スライド */
/* 上からスライド */
.acms-slide-top {
	transform: translateX(0px) translateY(global.$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);
	.active  & {
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
		opacity: 1;
		will-change: opacity,transform;
	}
}
/* 下からスライド */
.acms-slide-bottom {
	transform: translateX(0px) translateY(global.$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);
	.active  & {
		transform: translateX(0px) translateY(0px);
		opacity: 1;
		will-change: opacity,transform;
	}
}
/* 左からスライド */
.acms-slide-left {
	transform: translateX(global.$acms-slide-left) translateY(0px);
	opacity: 0;
	transition: opacity global.$acms-slide-opacity-speed, transform global.$acms-slide-transform-speed cubic-bezier(0.165, 0.84, 0.44, 1);
	.active  & {
		transform: translateX(0px) translateY(0px);
		opacity: 1;
		will-change: opacity,transform;
	}
}
/* 右からスライド */
.acms-slide-right {
	transform: translateX(global.$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);
	.active  & {
		transform: translateX(0px);
		opacity: 1;
		will-change: opacity,transform;
	}
}



/* ズーム */
// 拡大
// hoverしたときに拡大する
.acms-zoom-in {
	transform: scale(global.$acms-slide-zoom-in-default);
	transition: transform global.$acms-zoom-transform-speed;
	 &:hover {
    transform: scale(global.$acms-slide-zoom-in-hover);
		will-change: opacity,transform;
	}
}
// 拡大しながら表示する
.acms-zoom-in-show {
	transform: scale(global.$acms-slide-zoom-in-show);
	opacity: 0;
	transition: opacity global.$acms-zoom-opacity-speed, transform global.$acms-zoom-transform-speed;
	.active  &,
	 &.active {
    transform: scale(global.$acms-slide-zoom-in-default);
		opacity: 1;
		will-change: opacity,transform;
	}
}

// 縮小
// hoverしたときに縮小する
.acms-zoom-out {
  transform: scale(global.$acms-slide-zoom-out-default);
	transition: transform global.$acms-zoom-transform-speed;
	 &:hover {
		transform: scale(global.$acms-slide-zoom-out-hover);
		will-change: opacity,transform;
	}
}
// 縮小しながら表示する
.acms-zoom-out-show {
  transform: scale(global.$acms-slide-zoom-out-show);
	opacity: 0;
	transition: opacity global.$acms-zoom-opacity-speed, transform global.$acms-zoom-transform-speed;

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




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

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

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

//左
.acms-popup-left-child {
	.acms-popup-child {
    transform: translateX(0px) translateY(0px);
		transition: transform global.$acms-popup-down-speed;
	}
	 &:hover .acms-popup-child {
    transform: translateX(global.$acms-popup-left) translateY(0px);
		transition: transform global.$acms-popup-up-speed;
		will-change: transform;
	}
}
.acms-popup-left {
  transform: translateX(0px) translateY(0px);
	transition: transform global.$acms-popup-down-speed;
	 &:hover {
    transform: translateX(global.$acms-popup-left) translateY(0px);
		transition: transform global.$acms-popup-up-speed;
		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 {
    transform: translateX(0px) translateY(0px);
		opacity: 1;
	}
	.acms-zoom-in-show,
	.acms-zoom-out-show {
    transform: scale(1);
		opacity: 1;
	}
}
