div.stage {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: grid;
	z-index: 1;
	> div.circle {
		grid-area: 1/1/2/2;
		justify-self: center;
		align-self: center;
		width: 100px;
		height: 100px;
		border-radius: 100px;
		background-image: radial-gradient(#fff, rgba(48,35,101,1));
		filter: blur(3px);
		&.circle1 {
			animation: scaleOnScroll01;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle2 {
			animation: scaleOnScroll02;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle3 {
			animation: scaleOnScroll03;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle4 {
			animation: scaleOnScroll04;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle5 {
			animation: scaleOnScroll05;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle6 {
			animation: scaleOnScroll06;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle7 {
			animation: scaleOnScroll07;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
		&.circle8 {
			animation: scaleOnScroll08;
			animation-timeline: scroll();
			mix-blend-mode: multiply;
		}
	}
	> div.fill {
		grid-area: 1/1/2/2;
		width: 100%;
		height: 100%;
		background-color: #302368;
		animation: fill;
		animation-timeline: scroll();
	}
	> div.logo {
		grid-area: 1/1/2/2;
		justify-self: center;
		align-self: center;
		z-index: 1;
		animation: logo;
		animation-timeline: scroll();
		max-width: 90%;
		> img {
			max-width: 100%;
		}
	}
}
@keyframes scaleOnScroll01 {
	0%	{ opacity: 0; }
	1%	{ transform: scale(1); opacity: 0; }
	5%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll02 {
	0%	{ opacity: 0; }
	5%	{ transform: scale(1); opacity: 0; }
	10%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll03 {
	0%	{ opacity: 0; }
	10%	{ transform: scale(1); opacity: 0; }
	15%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll04 {
	0%	{ opacity: 0; }
	15%	{ transform: scale(1); opacity: 0; }
	20%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll05 {
	0%	{ opacity: 0; }
	20%	{ transform: scale(1); opacity: 0; }
	25%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll06 {
	0%	{ opacity: 0; }
	25%	{ transform: scale(1); opacity: 0; }
	30%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll07 {
	0%	{ opacity: 0; }
	30%	{ transform: scale(1); opacity: 0; }
	35%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes scaleOnScroll08 {
	0%	{ opacity: 0; }
	35%	{ transform: scale(1); opacity: 0; }
	40%	{ opacity: 1; }
	50%	{ transform: scale(30); }
}
@keyframes fill {
	0%	{ opacity: 0; }
	30%	{ opacity: 0; }
	50%	{ opacity: 1; }
}
@keyframes logo {
	0%		{
		mix-blend-mode: difference;
	}
	40%		{
		mix-blend-mode: difference;
	}
	50%	{
		mix-blend-mode: screen;
	}
}

main {
	position: relative;
	margin-top: 6000px;
	z-index: 2;
	background-image: url(./common/image/leather_beige.png);
}