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

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

.cmn_h_title {
	&.animate {opacity: 0; transform: translateY(50%);
		&::before {opacity: 0; transform: translate(60% , 50%);}
		&.scroll_in , &.load_open {opacity: 1; transform: translateY(0); transition: 0.4s var(--easeOutCirc);
			&::before {opacity: 1; transform: translate(100% , 0%); transition: 0.3s var(--easeOutCirc); transition-delay: 0.2s;}
		}
	}
}

.cmn_ornament_icon {
	&.animate {
		img {opacity: 0; transform: translateY(50%);}
		&.scroll_in {
			img { opacity: 1; transform: translateY(0); transition: 0.8s var(--easeOutCirc);}
		}
	}
}

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

/* fv
------------------------------------------*/
#fv {
    &.animate {
		.fv_bg_layer {
    	    .bg_cassette_layer {
    	        .cassette_area { transform: translateY(14%); opacity: 0;}
    	        .parts_large_18trip_text_tl {
    	            img { transform: translateY(180%); opacity: 0;}
    	        }
    	    }
    	    .bg_bottom_layer { transform: translateY(90%);}
    	}
    	&.v1 {
    	    .fv_main_layer {transform: translate(0% , 40%); opacity: 0;
    	        .center_box {}
    	    }
    	}
		&.load_open {
			.fv_bg_layer {
    		    .bg_cassette_layer {
    		        .cassette_area { transform: translateY(0); opacity: 1; transition: 0.8s var(--easeOutCirc);}
    		        .parts_large_18trip_text_tl {
    		            img { transform: translateY(0); opacity: 1; transition: 0.8s var(--easeOutCirc);}
    		        }
    		    }
    		    .bg_bottom_layer { transform: translateY(0); opacity: 1; transition: 0.8s var(--easeOutCirc);}
    		}
    		&.v1 {
    		    .fv_main_layer {transform: translate(0% , 0%); opacity: 1; transition: 0.8s var(--easeOutCirc);
    		        .center_box {}
    		    }
    		}
		}
	}
}

#introduction {
    .section_left {
        .intro_text_box {
            p {
				&.animate {opacity: 0; transform: translateY(3em);
					&.scroll_in {opacity: 1; transform: translateY(0); transition: 0.6s var(--easeOutCirc);}
				}
            }
        }
    }
}