/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
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 ;
}

#info {
	mask-image: linear-gradient(to right, white 100%, white 100%);
	mask-repeat: no-repeat;
	mask-size: 0% 100%;
	mask-position: center;
	transition: mask-size 0.5s ease 0.5s;
}
#info.active {
	mask-size: 100% 100%;
}

#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);}
}