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

:root {
	--card-height: 600px;
	--card-width: calc(var(--card-height) / 1.5);
}
container-body {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.card {
	position: relative;
	width: var(--card-width);
	height: var(--card-height);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 36px;
	perspective: 2500px;

}
.wrapper {
	transition: all 0.5s;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.card:hover .wrapper {
	transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
	box-shadow: 2px 35px 32px -8px rgba(255, 255, 255, 0.75);
}

.wrapper::before,
.wrapper::after {
	content: "";
	opacity: 0;
	width: 100%;
	height: 80px;
	transition: all 0.5s;
	position: absolute;
	left: 0;
	border-radius: 10px;
}
/*
.wrapper::before {
	top: 0;
	height: 80%;
	background-image: linear-gradient(
		to top,
		transparent 46%,
		rgb(239, 243, 255) 68%,
		rgb(243, 244, 255) 97%;
	);
}
*/


.card:hover .wrapper::before,
.wrapper::after {
	opacity: 1;
}

.card:hover .wrapper::after {
	height: 120px;
}


.character {
	width: 100%;
	opacity: 0;
	transition: all 0.5s;
	position: absolute;
	z-index: -1;
}
.card:hover .character {
	opacity: 1;
	transform: translate3d(0%, -30%, 100px);
}