@font-face {
	font-family: "Aeonik Pro Regular";
	src: url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.eot");
	src: url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.eot?#iefix")
			format("embedded-opentype"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.woff2")
			format("woff2"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.woff")
			format("woff"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.ttf")
			format("truetype"),
		url("https://db.onlinewebfonts.com/t/12ff62164c9778917bddb93c6379cf47.svg#Aeonik Pro Regular")
			format("svg");
}
* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
html,
body {
	margin: 0;
	padding: 0;
}
:root {
	--sz: clamp(10px, min(2vw, 3vh), 24px);
	font-size: var(--sz);
}
body {
	display: grid;
	place-items: center;
	background: #1e1e1e;
	background: radial-gradient(circle at 50% 30%, #2a2a2a 0%, #131313 64%);
	font-family: "Aeonik Pro Regular";
	height: 100vh;
	overflow: hidden;
}

.card {
	position: relative;
	background: radial-gradient(circle at 50% 0%, #3a3a3a 0%, #1a1a1a 64%);
	box-shadow: inset 0 1.01rem 0.2rem -1rem #fff0,
		inset 0 -1.01rem 0.2rem -1rem #0000, 0 -1.02rem 0.2rem -1rem #fff0,
		0 1rem 0.2rem -1rem #0000, 0 0 0 1px #fff3, 0 4px 4px 0 #0004, 0 0 0 1px #333;
	width: 18rem;
	height: 24rem;
	border-radius: 1.8rem;
	color: #fff;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: end;
	transition: all 0.4s ease-in-out, translate 0.4s ease-out;
	&::before {
		content: "";
		display: block;
		--offset: 1rem;
		width: calc(100% + 2 * var(--offset));
		height: calc(100% + 2 * var(--offset));
		position: absolute;
		left: calc(-1 * var(--offset));
		right: calc(-1 * var(--offset));
		top: calc(-1 * var(--offset));
		bottom: calc(-1 * var(--offset));
		margin: auto;
		box-shadow: inset 0 0 0px 0.06rem #fff2;
		border-radius: 2.6rem;
		--ax: 4rem;
		clip-path: polygon(
			var(--ax) 0,
			0 0,
			0 var(--ax),
			var(--ax) var(--ax),
			var(--ax) calc(100% - var(--ax)),
			0 calc(100% - var(--ax)),
			0 100%,
			var(--ax) 100%,
			var(--ax) calc(100% - var(--ax)),
			calc(100% - var(--ax)) calc(100% - var(--ax)),
			calc(100% - var(--ax)) 100%,
			100% 100%,
			100% calc(100% - var(--ax)),
			calc(100% - var(--ax)) calc(100% - var(--ax)),
			calc(100% - var(--ax)) var(--ax),
			100% var(--ax),
			100% 0,
			calc(100% - var(--ax)) 0,
			calc(100% - var(--ax)) var(--ax),
			var(--ax) var(--ax)
		);
		transition: all 0.4s ease-in-out;
	}
	&:hover {
		translate: 0 -0.2rem;
	}
	&:hover::before {
		--offset: 0.5rem;
		--ax: 8rem;
		border-radius: 2.2rem;
		box-shadow: inset 0 0 0 0.08rem #fff1;
	}
	.light-layer {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		transform-style: preserve-3d;
		perspective: 400px;
		.slit {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 64%;
			height: 1.2rem;
			transform: rotateX(-76deg);
			background: #121212;
			box-shadow: 0 0 4px 0 #fff0;
			transition: all 0.4s ease-in-out;
		}
		.lumen {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			pointer-events: none;
			perspective: 400px;
			opacity: 0;
			transition: opacity 0.4s ease-in-out;
			.min {
				width: 70%;
				height: 3rem;
				background: linear-gradient(#fff0, #fffa);
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 2.5rem;
				margin: auto;
				transform: rotateX(-42deg);
				opacity: 0.4;
			}
			.mid {
				width: 74%;
				height: 13rem;
				background: linear-gradient(#fff0, #fffa);
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 10em;
				margin: auto;
				transform: rotateX(-42deg);
				filter: blur(1rem);
				opacity: 0.8;
				border-radius: 100% 100% 0 0;
			}
			.hi {
				width: 50%;
				height: 13rem;
				background: linear-gradient(#fff0, #fffa);
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 12em;
				margin: auto;
				transform: rotateX(22deg);
				filter: blur(1rem);
				opacity: 0.6;
				border-radius: 100% 100% 0 0;
			}
		}
		.darken {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			pointer-events: none;
			perspective: 400px;
			transition: opacity 0.4s ease-in-out;
			opacity: 0.5;
			& > * {
				transition: opacity 0.4s ease-in-out;
			}
			.sl {
				width: 64%;
				height: 10rem;
				background: linear-gradient(#000, #0000);
				position: absolute;
				left: 0;
				right: 0;
				top: 9.6em;
				bottom: 0;
				margin: auto;
				filter: blur(0.2rem);
				opacity: 0.1;
				border-radius: 0 0 100% 100%;
				transform: rotateX(-22deg);
			}
			.ll {
				width: 62%;
				height: 10rem;
				background: linear-gradient(#000a, #0000);
				position: absolute;
				left: 0;
				right: 0;
				top: 11em;
				bottom: 0;
				margin: auto;
				filter: blur(0.8rem);
				opacity: 0.4;
				border-radius: 0 0 100% 100%;
				transform: rotateX(22deg);
			}
			.slt {
				width: 0.5rem;
				height: 4rem;
				background: linear-gradient(#0005, #0000);
				position: absolute;
				left: 0;
				right: 11.5rem;
				top: 3.9em;
				bottom: 0;
				margin: auto;
				opacity: 0.6;
				border-radius: 0 0 100% 100%;
				transform: skewY(42deg);
			}
			.srt {
				width: 0.5rem;
				height: 4rem;
				background: linear-gradient(#0005, #0000);
				position: absolute;
				right: 0;
				left: 11.5rem;
				top: 3.9em;
				bottom: 0;
				margin: auto;
				opacity: 0.6;
				border-radius: 0 0 100% 100%;
				transform: skewY(-42deg);
			}
		}
	}
	.content {
		.icon {
			position: absolute;
			top: 5rem;
			left: 0;
			right: 0;
			margin: auto;
			width: fit-content;
			filter: drop-shadow(0 -1.2rem 1px transparent);
			transition: filter 0.4s ease-in-out;
		}
		.bottom {
			position: relative;
			h4 {
				margin: 0;
				margin-bottom: 1rem;
				font-size: 1.2rem;
				color: #ccc;
			}
			p {
				margin: 0;
				padding-bottom: 0.6rem;
				color: #fff4;
				font-size: 0.6rem;
				font-weight: 100;
				border-bottom: 1px solid #fff1;
				max-width: 64%;
			}
			.toggle {
				position: absolute;
				right: 0;
				bottom: 0;
				height: 2rem;
				width: 4.8rem;
				border-radius: 0.6rem;
				background: #000;
				box-shadow: inset 0 -8px 8px 0.3rem #0004, inset 0 0 1px 0.3rem #ddd,
					inset 0 -2px 1px 0.3rem #fff, inset 0 1px 2px 0.3rem #0006,
					inset 0 0 1px 0.8rem #aaa;
				cursor: pointer;
				transition: all 0.4s ease-in-out;
				&::before {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 3.4rem;
					height: 0.68rem;
					border-radius: 0.2rem;
					background: #000;
					transition: all 0.4s ease-in-out;
				}
				.handle {
					position: absolute;
					top: 0;
					bottom: 0.04rem;
					margin: auto;
					left: 0.68rem;
					width: 40%;
					height: 30%;
					background: #aaa;
					border-radius: 0.2rem;
					box-shadow: inset 0 1px 4px 0 #fff, inset 0 -1px 1px 0 #000a,
						0 0 1px 1px #0003, 1px 3px 6px 1px #000a;
					transition: all 0.4s ease-in-out;
				}
				&.active .handle {
					transform: translateX(1.58rem);
				}
				span {
					pointer-events: none;
					text-align: center;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: calc(100% + 0.4rem);
					font-size: 0.6rem;
					font-weight: 100;
					color: #555;
					opacity: 0;
					transition: opacity 0.4s ease-in-out;
				}
				&:hover span {
					opacity: 1;
				}
				&:not(.active):hover .handle {
					transform: translateX(0.2rem);
				}
			}
		}
	}
	&:has(.toggle.active) {
		box-shadow: inset 0 1.01rem 0.1rem -1rem #fffa, inset 0 -4rem 3rem -3rem #000a,
			0 -1.02rem 0.2rem -1rem #fffa, 0 1rem 0.2rem -1rem #000, 0 0 0 1px #fff2,
			0 4px 4px 0 #0004, 0 0 0 1px #333;
		.slit {
			background: #fff;
			box-shadow: 0 0 4px 0 #fff;
		}
		.lumen {
			opacity: 0.5;
		}
		.darken {
			opacity: 0.8;
			.sl {
				opacity: 0.2;
			}
			.ll {
				opacity: 1;
			}
			.slt {
				opacity: 1;
			}
			.srt {
				opacity: 1;
			}
		}
		.content {
			.icon {
				filter: drop-shadow(0 -1.2rem 2px #0003) brightness(1.64);
			}
			.toggle::before {
				background: #fffc;
				box-shadow: 0 0 0.3rem 0.2rem #fff7;
			}
			.handle {
				box-shadow: inset 0 1px 12px 0 #fff, inset 0 -1px 1px 0 #fffa,
					0 0 2px 1px #4443, 1px 3px 6px 1px #0004;
			}
		}
	}
}