/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
header div img {
	animation: logo_ani1 2s ease-in-out alternate infinite;
	animation-delay: 1.0s;
	animation-fill-mode: backwards;
}
header div::after {
	animation: logo_ani2 2s alternate infinite;
	animation-delay: 1.0s;
	animation-fill-mode: backwards;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes logo_ani1{
	0% {
		transform:translateX(0.25rem) translateY(-1rem);
	}
	100% {
		transform:translateX(-0.25rem) translateY(1rem);
	}
}
@keyframes logo_ani2{
	0% {
		transform:translateX(0.25rem) translateY(-1rem);
	}
	100% {
		transform:translateX(-0.25rem) translateY(1rem);
	}
}

article > * {
	opacity: 0.01;
	transition: all 1s ease-out;
}
.active {
	opacity: 1 !important;
}

article h1 {
	transform-origin: center 80%;
}
article h1.active {
	animation: sub_title 0.5s ;
}
@keyframes sub_title{
	0%{
		transform:scale(0.5);}

	80%{
		transform:scale(1.1);}

	100%{
		transform:scale(1);}
}
article .active h2 {
	animation: move_x 0.5s ;
}


#tenipuri_day > *:not(h2) {
	opacity: 0.01;
	transition: all 1s ease-out 1s;
}
#td_d {
	opacity: 0.01;
	transform: scale(0.5) rotateZ(45deg);
	transform-origin: 20% bottom;
	transition: all 1s ease 1s ;
}
#td_d.active {
	transform: none;
}
#td_t {
	opacity: 0.01;
	transform: translate(80%, -40%);
	transition: all 0.75s ease 0s ;
}
#td_t.active {
	transform: none;
}
@keyframes move_x{
	0%{
		opacity: 0;
		transform:translateX(4rem);}
	100%{
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_y{
	0%{
		opacity: 0;
		transform:translateY(4rem);}
	100%{
		opacity: 1;
		transform:translateY(0);}
}