/*----------------------------------------
	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% { filter: blur(0); opacity: 1; }
	100% { filter: blur(1); opacity: 0; visibility: hidden; } 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/
.cmn_bg_balloon {
	&.animate {opacity: 0; transform: translateY(30%); transition: 1.6s var(--easeOutQuint);
		&.scroll_in {opacity: 1; transform: translateY(0%);}
	}
}

.cmn_h_title {
	&.animate {
		span {opacity: 0; transform: translateY(-30%); filter: brightness(5); transition: 0.8s var(--easeOutQuint); transition-delay: calc(var(--step_delay) * 0.04s + 0s);}
		&.scroll_in , &.load_open {
			span {opacity: 1; transform: translateY(0%); filter: brightness(1);}
		}
	}
}

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

#fv {
    &.animate {
		.visual_layer {
    	    .visual_box {
    	        .bg_fill {
    	            img {}
    	        }
    	        .main_img {
    	            img {transform: scale(1.1);}
    	        }
    	    }
    	}
    	.logo_layer {
    	    .logo {
    	        img {transform: translateY(50%); opacity: 0;}
    	    }
    	}
		&.load_open {
			.visual_layer {
    		    .visual_box {
    		        .bg_fill {
    		            img {}
    		        }
    		        .main_img {
    		            img {transform: scale(1); transition: 2.6s var(--easeOutQuint);}
    		        }
    		    }
    		}
    		.logo_layer {
    		    .logo {
    		        img { transform: translateY(0%); opacity: 1; transition: 1.6s var(--easeOutQuint);}
    		    }
    		}
		}
	}
}