* {
	margin:0;
	padding:0;
}
img {
	user-select:none;
	-webkit-user-drag:none;
}
img[alt]:after {
	content:attr(alt);
	display:block;
	position:absolute;
	inset:0;
	display:inline-grid;
	justify-content:center;
	align-items:center;
	background:inherit;
	border-radius:inherit;
	font-size:1.4em;
	color:#c3c2d4;
	background-color:#454258;
	z-index:2;
}
html,body {
	height:100%;
	background-color:#1c1c28;
}
:root {
	--perspective:1000px;
}
.carousel-motion {
	--size:clamp(8em,40vw,10em);
	--distance:calc(.85 * var(--size));
	--parallax-factor:1.1;
	--rotation:0deg;
	--perspective:100rem;
	margin:10rem auto;
	width:var(--size);
	height:var(--size);
	perspective:var(--perspective);
	transform-style:preserve-3d;
	transform:translateZ(calc(var(--perspective) * (1 - var(--parallax-factor)))) scale(var(--parallax-factor));
	z-index:calc(100 * var(--parallax-factor));
	transition:.5s cubic-bezier(.3,3,.66,1);
	cursor:pointer;
}
.motion-item {
	position:absolute;
	width:var(--size);
	height:var(--size);
	filter:brightness(var(--brightness,100%));
	transition:1s cubic-bezier(.5,1.33,.3,1);
	transform:rotateX(-10deg) translateZ(calc(-1 * var(--distance))) rotateY(calc(var(--rotation) + var(--angle))) translateZ(var(--distance)) rotateY(calc(-1 * (var(--rotation) + var(--angle)))) rotateX(10deg);
	border-radius:50%;
	overflow:hidden;
}
.motion-item img {
	width:100%;
	height:100%;
}
.carousel-motion:hover>:nth-of-type(3n+1),.carousel-motion:not(:hover)>:nth-of-type(3n+2),.carousel-motion:not(:hover)>:nth-of-type(3n+3) {
	--brightness:75%
}
.carousel-motion:hover {
	--rotation:180deg;
}
.carousel-motion>:nth-child(3n + 1) {
	--angle:0deg;
	transition-delay:.05s;
	transition-duration:1.06s;
}
.carousel-motion>:nth-child(3n + 2) {
	--angle:120deg;
	transition-delay:.1s;
	transition-duration:1.12s;
}
.carousel-motion>:nth-child(3n + 3) {
	--angle:240deg;
}
.carousel-motion>:nth-child(1n + 4) {
	transition:1s ease-in-out;
	transform:translate3d(0,-100vh,calc(-2 * var(--perspective)));
	opacity:0;
}
main {
	animation:flyZ 2s backwards;
	display:grid;
	justify-items:center;
	align-items:center;
	height:100%;
	overflow:hidden;
	transform-style:preserve-3d;
}
section {
	animation:flyZ 2s backwards;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	transform-style:preserve-3d;
	width:100%;
}
.carousel-motion:active {
	transition:.4s 75ms cubic-bezier(.16,1,.3,1);
	transform:scale(.8) rotateX(2deg)
}
@keyframes flyZ {
	0% {
	transform:scale(0) translateZ(calc(1 * var(--perspective)));
}
}