/*----------------------------------------
	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; */

@keyframes swipe_out { 
	0% { transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
	100% { transform: translateY(-50%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); visibility: hidden; } 
}

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

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

/* fv
------------------------------------------*/
#fv {
	&.animate {
		.white_area {transform: translateY(25%); }
    	.artist_logo_area {transform: translateY(150%); opacity: 0;}
    	.scroll_sign {transform: translateY(100%); opacity: 0;}
		&.load_open {
			.white_area { transform: translateY(0%); transition: 1.5s var(--easeOutCirc);}
    		.artist_logo_area { transform: translateY(0%); opacity: 1; transition: 2.2s var(--easeOutCirc); transition-delay: 0.2s;}
    		.scroll_sign {transform: translateY(0%); opacity: 1; transition: 2.2s var(--easeOutCirc); transition-delay: 0.4s;}
		}
	}
}
/* catch
-------------------------------*/
#catch {
    .center_box {
		&.animate {
			.main {transform: translateX(20%); opacity: 0; letter-spacing: 0.7em;}
        	.sub { transform: translateX(20%); opacity: 0; letter-spacing: 0.6em;}
			&.scroll_in {
				.main { transform: translateX(0%); opacity: 1; letter-spacing: 0.5em; transition: 1.2s var(--easeOutCirc);}
        		.sub { transform: translateX(0%); opacity: 1; letter-spacing: 0.4em; transition: 1.3s var(--easeOutCirc);}
			}
		}
    }
}