@import url("https://fonts.googleapis.com/css?family=Droid+Sans:400,700");

:root {
	--intro-duration: 2s;
	--intro-gap: 100ms;
	--logo-duration: 5s;
	--crawl-delay: calc(var(--intro-duration) + var(--intro-gap) + var(--logo-duration));
	--crawl-color: #ff5;
	--intro-color: #4dd;
	--crawl-size: clamp(2.75rem, 7vw, 5.5rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	block-size: 100%;
	margin: 0;
}

body {
	position: relative;
	overflow: hidden;
	font-family: "Droid Sans", Arial, Verdana, sans-serif;
	font-weight: 700;
	background: #000;
	color: var(--crawl-color);
}

#intro {
	position: absolute;
	z-index: 1;
	inset-block-start: 50%;
	left: 50%;
	inline-size: min(16em, 90vw);
	margin: 0;
	color: var(--intro-color);
	font-size: clamp(1.25rem, 4vw, 2.2rem);
	font-weight: 500;
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: intro var(--intro-duration) ease-out both;
}

@keyframes intro {
	0%, 90% { opacity: 1; }
	100% { opacity: 0; }
}

h1 {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	left: 50%;
	inline-size: 2.9em;
	margin: 0 0 0 -1.3em;
	font-size: clamp(4.5rem, 20vw, 12rem);
	text-align: center;
	line-height: 0.8em;
	letter-spacing: 0;
	color: var(--crawl-color);
	opacity: 0;
	transform: translateY(-50%);
	animation: logo var(--logo-duration) ease-out calc(var(--intro-duration) + var(--intro-gap)) forwards;
}

@keyframes logo {
	from { transform: translateY(-50%) scale(1); opacity: 1; }
	to { transform: translateY(-50%) scale(0.1); opacity: 0; }
}

#mainscroll {
	position: absolute;
	z-index: 0;
	inset-block-end: 4vh;
	left: 50%;
	inline-size: min(22em, 94vw);
	block-size: 60em;
	font-size: var(--crawl-size);
	text-align: justify;
	transform: translateX(-50%) perspective(300px) rotateX(30deg);
	transform-origin: 50% 100%;
}

#mainscroll p {
	text-align: justify;
	margin-block: 0.7em;
	margin-inline: 0;
}

#mainscroll .center {
	text-align: center;
	margin-block-end: 10%;
}

#scrolltext {
	position: absolute;
	inset-block-start: 100%;
	inline-size: 100%;
	text-align: center;
	animation: scroll 150s linear var(--crawl-delay) infinite;
}

@keyframes scroll {
	from { inset-block-start: 100%; }
	to { inset-block-start: -200%; }
}

@media (prefers-reduced-motion: reduce) {
	#intro,
	h1,
	#scrolltext {
		animation: none;
	}

	#intro,
	h1 {
		opacity: 1;
	}

	#scrolltext {
		inset-block-start: 0;
	}
}