// mixin / extend / variable
@import "_setting";

/*-------------------------------------------> animation module */
.anim-fadeInUp {
	opacity: 0;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.67,0,.18,1);
	animation-fill-mode: both;
}
.inView .isAnim.inView.anim-fadeInUp,
.inView .isAnim.inView .anim-fadeInUp,
.inView .anim-fadeInUp,
.inView.anim-fadeInUp {
	animation-name: fadeInUp;
}
.inView .isAnim.anim-fadeInUp,
.inView .isAnim .anim-fadeInUp{
	animation-name: none;
}

.anim-fadeIn {
	opacity: 0;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.67,0,.18,1);
	animation-fill-mode: both;
}
.inView .isAnim.inView.anim-fadeIn,
.inView .isAnim.inView .anim-fadeIn,
.inView .anim-fadeIn,
.inView.anim-fadeIn {
	animation-name: fadeIn;
}
.inView .isAnim.anim-fadeIn,
.inView .isAnim .anim-fadeIn{
	animation-name: none;
}

.anim-fadeImage img {
	opacity: 0;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.inView .isAnim.inView.anim-fadeImage img,
.inView .isAnim.inView .anim-fadeImage img,
.inView .anim-fadeImage img,
.inView.anim-fadeImage img {
	animation-name: fadeImage;
}
.inView .isAnim.anim-fadeImage img,
.inView .isAnim .anim-fadeImage img{
	animation-name: none;
}

.anim-moreBtn {
	animation-duration: .15s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.26,1.04,1,1.42);
	animation-fill-mode: both;
}
.inView .isAnim.inView.anim-moreBtn,
.inView .isAnim.inView .anim-moreBtn,
.inView .anim-moreBtn,
.inView.anim-moreBtn {
	animation-name: moreBtn;
}
.inView .isAnim.anim-moreBtn,
.inView .isAnim .anim-moreBtn{
	animation-name: none;
}

.linkArrow {
	img, .svg {
		animation-duration: .5s;
		animation-iteration-count: 1;
		animation-timing-function: linear;
		animation-fill-mode: both;
	}
	&:hover {
		img, .svg {
			animation-name: linkArrow;
		}
	}
	&.arrowR {
		&:hover {
			img, .svg {
				animation-name: linkArrowR;
			}
		}
	}
}

.anim-slice {
	// clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
	clip-path: inset(0 100% 0 0);
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	// animation-timing-function: cubic-bezier(.67,0,.18,1);
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	// animation-timing-function: ease-out;
	animation-fill-mode: both;
	will-change: filter;
}
.inView .isAnim.inView.anim-slice,
.inView .isAnim.inView .anim-slice,
.inView .anim-slice,
.inView.anim-slice {
	animation-name: slice;
}
.inView .isAnim.anim-slice,
.inView .isAnim .anim-slice{
	animation-name: none;
}

.anim-slice.reverse {
	// clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	clip-path: inset(0 0 0 100%);
}
.inView .isAnim.inView.anim-slice.reverse,
.inView .isAnim.inView .anim-slice.reverse,
.inView .anim-slice.reverse,
.inView.anim-slice.reverse {
	animation-name: sliceR;
}
.inView .isAnim.anim-slice.reverse,
.inView .isAnim .anim-slice.reverse {
	animation-name: none;
}

.anim-textUp {
	.line {
		overflow: hidden;
		.char {
			translate: 0 100%;
			transition: translate .5s ease-out;
		}
		@for $i from 1 through 20 {
			&:nth-child(#{$i}) {
				.char {
					transition-delay: #{($i - 1) * 0.1}s;
				}
			}
		}
	}
}
.anim-textUp.inView {
	.line {
		.char {
			translate: 0 0;
		}
	}
}

.anim-imgZoomIn {
	overflow: hidden;
}
.anim-imgZoomIn img {
	transform: scale(1.08);
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.inView .isAnim.inView.anim-imgZoomIn img,
.inView .isAnim.inView .anim-imgZoomIn img,
.inView .anim-imgZoomIn img,
.inView.anim-imgZoomIn img {
	animation-name: imgZoomIn;
}
.inView .isAnim.anim-imgZoomIn img,
.inView .isAnim .anim-imgZoomIn img{
	animation-name: none;
}

/* delay */
.delay0 { animation-delay: 0s; }
.delay1 { animation-delay: 0.2s; }
.delay2 { animation-delay: 0.4s; }
.delay3 { animation-delay: 0.6s; }
.delay4 { animation-delay: 0.8s; }
.delay5 { animation-delay: 1.0s; }
.delay6 { animation-delay: 1.2s; }
.delay7 { animation-delay: 1.4s; }
.delay8 { animation-delay: 1.6s; }
.delay9 { animation-delay: 1.8s; }
.delay10 { animation-delay: 2.0s; }
.delay11 { animation-delay: 2.2s; }


/*-------------------------------------------> keyframe */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes fadeImage {
	from{
		opacity: 0;
		transform: scale(1.08);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes imgZoomIn {
	from{
		transform: scale(1.08);
	}
	to{
		transform: scale(1);
	}
}
@keyframes moreBtn {
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
@keyframes hoverImage {
  from {
		transform: translateX(1);
  }
  to {
		transform: translateX(1.08);
  }
}

@keyframes linkArrow {
	0%{transform:translateX(0); opacity:1}
	40%{opacity:0}
	49.9%{transform:translateX(50%); opacity:0}
	50%{transform:translateX(0); opacity:0}
	100%{transform:translateX(0); opacity:1}
}

@keyframes linkArrowR {
	0%{transform:translateX(0) rotate(180deg); opacity:1}
	40%{opacity:0}
	49.9%{transform:translateX(-50%) rotate(180deg); opacity:0}
	50%{transform:translateX(0) rotate(180deg); opacity:0}
	100%{transform:translateX(0) rotate(180deg); opacity:1}
}

@keyframes scrollArrow {
	0% { transform: translate3d(0, -5, 0); }
	100% { transform: translate3d(0, 5px, 0); }
}

@keyframes slice {
  0% {
		// clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
		clip-path: inset(0 100% 0 0);
  }
  99% {
		// clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: inset(0 0 0 0);
  }
	100% {
		clip-path: none;
	}
}

@keyframes sliceR {
  0% {
		// clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		clip-path: inset(0 0 0 100%);
  }
  99% {
		// clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: inset(0 0 0 0);
  }
	100% {
		clip-path: none;
	}
}

@keyframes line {
	0%{
		transform-origin: top center;
		scale: 1 0;
	}
	45%{
		transform-origin: top center;
		scale: 1 1;
	}
	50%{
		transform-origin: bottom center;
		scale: 1 1;
	}
	95%{
		transform-origin: bottom center;
		scale: 1 0;
	}
	100%{
		transform-origin: top center;
		scale: 1 0;
	}
}