/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */


#kv0 img ,
#kv0::before ,
#kv0::after {
	opacity: 0;
}

#kv0-radio:checked ~ #kv_box #kv0 img {
	animation: main_entry 1s ease-in-out 0s forwards;
}
#kv0-radio:checked ~ #kv_box #kv0::before {
	animation: main_entry2 1.5s ease-in-out 1s forwards;
}
#kv0-radio:checked ~ #kv_box #kv0::after {
	animation: main_entry 1.0s ease-in-out 0.25s forwards;
}

@keyframes main_entry{
	0% {
		opacity: 0;
		transform: scale(1.2);
		filter: blur(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1.0);
		filter: blur(0px);
	}
}
@keyframes main_entry2{
	0% {
		opacity: 0;
		transform: translateY(10em);
		filter: blur(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0em);
		filter: blur(0px);
	}
}


@keyframes main_exit{
	0%, 40%{
		opacity: 1;
		transform: scale(1.0);
	}
	49.5%,100%{
		opacity: 0;
		transform: scale(0.8);
	}
}



section {
	opacity: 0.01;
	transition: all 0.5s ease;
}

article > * {
	opacity: 0.01;
	transition: all 0.5s ease;
}

.active {
	opacity: 1;
}

@media (min-width: 900px) {
article > * {
	transition-delay: 0s;
}
.movie_btn {
	transition-delay: 0s;
}

}

@keyframes move_x{
	0%{
		opacity: 0;
		transform:translateX(1em);}
	100%{
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_y{
	0%{
		opacity: 0;
		transform:translateY(1em);}
	100%{
		opacity: 1;
		transform:translateY(0);}
}
#movie_title ,
section h3 {
	transform: translateX(0.5em);
	transition: all 0.5s ease-out 0s;
}
#movie_title.active ,
section.active h3 {
	transform: translateX(0em);
}