.text{
	animation:appear 3s both;
}
@keyframes appear{
	from{
		opacity:0;
		
	}
	to{
		opacity:1;
	}
}
.ani{
	animation:real 2s linear;
	animation-timeline:view();
	animation-range:entry 10% cover 40%;
}
@keyframes real{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}
.ani2{
	animation:real2 2s linear;
	animation-timeline:view();
	animation-range:entry 10% cover 40%;
}
@keyframes real2{
	from{
		opacity: 0;
        transform: perspective(1600px) rotateY(35deg) rotateX(25deg) translateY(150px) scale(0.55);
        filter: blur(10px);
	}
	60%{
		transform: perspective(1600px) rotateY(35deg) scale(1.05);
	}
	to{
		opacity: 1;
        transform: perspective(1600px) rotateY(0) rotateX(0) translateY(0) scale(1);
        filter: blur(0);
	}
}
.card{
	animation:appear2  linear;
	animation-timeline:view();
	animation-range:entry 10% cover 40%;
}
@keyframes appear2{
	from{
		opacity: 0;
        transform: perspective(1600px) rotateY(35deg) rotateX(25deg) translateY(150px) scale(0.55);
        filter: blur(10px);
	}
	60%{
		transform: perspective(1600px) rotateY(35deg) scale(1.05);
	}
	to{
		opacity: 1;
        transform: perspective(1600px) rotateY(0) rotateX(0) translateY(0) scale(1);
        filter: blur(0);
	}
}

.progress{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:2px;
	background-color:white;
	animation:progress 2s linear;
	z-index:99999;
	transform-origin:0 50%;
	animation-timeline:scroll();
}
@keyframes progress{
	from{
		transform:scalex(0);
	}
	to{
		transform:scalex(1);
	}
}