@keyframes spin {
	from {
		transform: translate(-50%, -50%) rotate3d(1, 1, 1, 0deg) perspective(1000px);
	}
	to {
		transform: translate(-50%, -50%) rotate3d(1, 1, 1, 360deg) perspective(1000px);
	}
}

@keyframes rise {
	from {
		top: 110vh;
	}
	to {
		top: -20vh;
	}
}

.levitateCard {
	position: absolute;
	top: 110vh;
	animation: spin 20s infinite var(--spin-delay) linear;
	transition: top var(--float-time) linear, filter .25s;

	background-size: cover;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	aspect-ratio: 813 / 1185;
}
.levitateCard:hover, .levitateCard:hover > * {
	filter: brightness(1.3);
}

.levitateCard::before, .levitateCard::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;

	transform: rotateY(180deg);
	background-size: cover;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.levitateCard::before {
	background-image: var(--p1-card-back), url("../images/cardBack.jpg");
	background-position: center;
}

.levitateCard::after {
	background-image: url("../images/cardBackFrameP1.png");
}

/* Styling elements other than the cards themselves */
#levitatingCards {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 1500px;
	overflow: clip;
}
#levitatingCardPreviewOverlay {
	backdrop-filter: blur(5px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;

	filter: opacity(0);
	transition: filter .25s;
	pointer-events: none;
}
#levitatingCardPreviewOverlay.shown {
	filter: opacity(1);
	pointer-events: all;
}
#levitatingCardPreviewImage {
	height: 75%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.shown > #levitatingCardPreviewImage {
	height: 90%;
	transition: height .3s;
}