/*----------------------------------------
	animation keyframes
------------------------------------------*/

@keyframes rotation{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes rotation_r{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes hor_move_l{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}
/* animation: hor_move_l 60s linear infinite; */

@keyframes hor_move_r{
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}
/* animation: hor_move_r 60s linear infinite; */

@keyframes ver_move_t{
	0% {transform: translateY(0%);}
	100% {transform: translateY(-100%);}
}
/* animation: ver_move_t 60s linear infinite; */

@keyframes ver_move_b{
	0% {transform: translateY(-100%);}
	100% {transform: translateY(0%);}
}
/* animation: ver_move_b 60s linear infinite; */

@keyframes fade_out { 
	0% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; } 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/

/*----- cmn_h_title -----*/
.cmn_h_title {
	&.animate {
		.bg_grid {
			&::before {opacity: 0;  transform: scale(1.2 , 1); transform-origin: right center;}
			&::after {}
		}
		&::after { }
		.h_title {
			span {display: inline-block; opacity: 0; transform: translateX(-0.5em);}
		}
		&.load_open , &.scroll_in {
			.bg_grid {
				&::before {opacity: 0.5; transform: scale(1 , 1); transition: 1.8s var(--easeOutQuint);}
				&::after {}
			}
			&::after { transform: translateY(calc(100% - 1px));}
			.h_title { 
				span {opacity: 1; transform: translateX(0); transition: 1.8s var(--easeOutQuint); transition-delay: calc(var(--step_delay) * 0.05s + 0s);}
			}
		}
	}
}

/*----------------------------------------
	pages animation
------------------------------------------*/

/* fv
------------------------------------------*/
#fv {
    &.animate {
    	.cmn_bg_layer {
	        .bg_circles { /* transform: translate(-50% , -50%); */
	            .circle_rotate {/* animation: rotation 180s linear infinite; */
	                .circle1, .circle2 {/* transform: translate(-50% , -50%); */
						span {
							&::after {}
						}
	                }
					.circle1 span {opacity: 0; transform: scale(0.6);}
					.circle2 span {opacity: 0; transform: scale(0.4);}
	                .circle1 span::after { /* animation: rotation 60s steps(60) infinite; */}
	                .circle2 span::after { /* animation: rotation 360s steps(60) infinite; */}
	            }
	        }
	        .side_stars {
	            &::before { }
	            &.left { /* transform:translate(-12% , 15%); */
	                &::before {opacity: 0; transform: scale(0.4); transform-origin: right center;}
	            }
	            &.right { /* transform:translate(12% , -15%); */
	                &::before { opacity: 0; transform: scale(0.4); transform-origin: left center;}
	            } 
	        }
	    }
	    .cmn_main_layer {
	        .center_box {/* transform: translate(-50% , -50%); */
	            .h_title { opacity: 0; transform: translateY(30%);
	                img {}
	            }
	            .countdown_timer { opacity: 0; transform: translateY(10%);}
	        }
	    }
		&.load_open {
			.cmn_bg_layer {
	    	    .bg_circles { /* transform: translate(-50% , -50%); */
	        	    .circle_rotate {/* animation: rotation 180s linear infinite; */
	        	        .circle1, .circle2 {/* transform: translate(-50% , -50%); */
							span {
								&::after {}
							}
	        	        }
						.circle1 span {opacity: 1; transform: scale(1); transition: 1.8s var(--easeOutQuint);}
						.circle2 span {opacity: 1; transform: scale(1); transition: 2.6s var(--easeOutQuint);}
	        	        .circle1 span::after { /* animation: rotation 60s steps(60) infinite; */}
	        	        .circle2 span::after { /* animation: rotation 360s steps(60) infinite; */}
	        	    }
	        	}
	    	    .side_stars {
	    	        &::before { }
	    	        &.left { /* transform:translate(-12% , 15%); */
	    	            &::before { opacity: 1; transform: scale(1); transition: 1.8s var(--easeOutQuint);}
	    	        }
	    	        &.right { /* transform:translate(12% , -15%); */
	    	            &::before { opacity: 1; transform: scale(1); transition: 1.8s var(--easeOutQuint);}
	    	        } 
	    	    }
	    	}
	    	.cmn_main_layer {
	    	    .center_box {/* transform: translate(-50% , -50%); */
	    	        .h_title { opacity: 1; transform: translateY(0); transition: 1.8s var(--easeOutQuint);
	    	            img {}
	    	        }
	    	        .countdown_timer { opacity: 1; transform: translateY(0); transition: 2.6s var(--easeOutQuint);}
	    	    }
	    	}
		}
    }
}