export function part(demo) {	// Intro: Horse In Motion
	document.body.innerHTML = `<style>
	#intro{
		position:relative;
		width:100vw;
		height:100vh;
		animation:move 2s ease-in-out 0s 1 normal forwards;
		will-change:transform
	}
	@keyframes move{
		0%{transform:translateX(-42vw)}
		100%{transform:translateX(30vw)}
	}
	#logoName{
		width:41vw;
		position:absolute;
		top:50%;
		color:#FFF;
		font:4vw Syncopate;
		text-align:center;
		border:5px solid #FFF;
		border-radius:10px;
		animation:zoom 1.5s linear 2s 1 normal forwards,end .5s linear 4s normal forwards;
		will-change:transform;
		white-space:nowrap;
	}
	@keyframes zoom{
		0%{transform:scale(1.00,1.00)}
		100%{transform:scale(1.03,1.03)}
	}
	@keyframes end{
		0%{transform:scale(1.03,1.03);filter:blur(0);opacity:1}
		100%{transform:scale(100.00,100.00);filter:blur(100px);opacity:0}
	}
	#HiM{
		background-color:white;
		width:10vw;
		position:absolute;
		top:calc(50% - 1vw);
		animation:move2 .75s ease-in-out 2s 1 normal forwards,rainbowAnim 140s linear infinite;
		will-change:transform;transform:translateX(42vw)
	}
	@keyframes move2{
		0%{transform:translateX(42vw)}
		100%{transform:translateX(70vw)}
	}
	.rainbow{
		background-image:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet,red);
		animation:rainbowAnim 35s linear infinite
	}
	@keyframes rainbowAnim{
		to{background-position:4500vh}
	}
	</style>
	<main id="intro">
		<span id="logoName">Revision&nbsp;2025</span>
		<img id="HiM" src="./gfx/HQ_mask.gif" class="rainbow"/>
	</main>`
	checkCSSEnded(demo)
}

function checkCSSEnded(demo) {
	if (logoName.getBoundingClientRect().height < 3300) {
		setTimeout(()=>{ checkCSSEnded(demo) }, 100)
		return
	}
	demo.next()
}