@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #b4b3aa;
}

fieldset {
	--gap: 9px;
	position: absolute;
	top: calc(20px - var(--gap));
	right: -5px;
	border: none;
	margin: 0;
	padding: 0;
	width: 40px;

	legend {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0;
	}

	input {
		position: absolute;
		opacity: 0;
		pointer-events: 0;
	}

	label {
		position: relative;
		display: block;
		width: 40px;
		height: 30px;
		background: var(--bg-color);
		margin: var(--gap) 0;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
		border-bottom-left-radius: 2px;
		font-size: 0;
		box-shadow: -2px 1px 3px rgba(0 0 0 / 0.2);
		cursor: pointer;
		transform: translate(0, 0) scaleX(1);
		transform-origin: left center;
		filter: brightness(90%);
		transition-property: transform filter;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(1, 1, 0.5, 1.3333);

		&:hover {
			transform: translate(0, 0) scaleX(1.25);
		}

		&:after {
			content: "";
			position: absolute;
			top: 100%;
			right: 0;
			width: 0;
			height: 0;
			border-top: 5px solid var(--bg-color);
			border-right: 5px solid transparent;
			border-left: 0px solid transparent;
			border-bottom: 5px solid transparent;
			filter: brightness(62%);
			transition-property: border-right filter;
			transition-duration: 0.2s;
			transition-timing-function: cubic-bezier(1, 1, 0.5, 1.3333);
		}

		&:hover:after {
			border-right: 12px solid transparent;
		}
	}

	input:checked + label,
	input:focus + label {
		transform: translate(0, 0) scaleX(1.25);
		filter: brightness(100%);

		&:after {
			border-right: 12px solid transparent;
			filter: brightness(50%);
		}
	}

	label:nth-of-type(1) {
		--bg-color: #f3b2af;
	}

	label:nth-of-type(2) {
		--bg-color: #b1f4fd;
	}

	label:nth-of-type(3) {
		--bg-color: #d5fec5;
	}

	label:nth-of-type(4) {
		--bg-color: #feffbe;
	}

	label:nth-of-type(5) {
		--bg-color: #f9d7ac;
	}
}

.card {
	position: relative;
	max-width: 240px;
	width: 100%;
	height: 360px;
	background: repeating-linear-gradient(
		transparent 0 calc(1.2rem - 1px),
		#eecfd7 0 1.2rem
	);
	background-color: #e4e4e4;
	border-radius: 10px;
	box-shadow: 0 0 0 6px rgba(255 255 255 / 0.1) inset,
		2px 4px 10px 0 rgba(0 0 0 / 0.025);
	font-family: "Caveat", serif;
}

.card__content {
	padding: 1.3rem 3rem 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;

	p {
		margin: 0 0 1rem 0;
	}
}

.heart {
	position: absolute;
	width: 24px;
	height: 24px;
	clip-path: path(
		"M12 20a1 1 0 0 1-.437-.1C11.214 19.73 3 15.671 3 9a5 5 0 0 1 8.535-3.536l.465.465.465-.465A5 5 0 0 1 21 9c0 6.646-8.212 10.728-8.562 10.9A1 1 0 0 1 12 20z"
	);
	background: #a00;
	transform: scale(0);
	animation: 30s pop 0.5s linear forwards;

	&:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: var(--bg-color);
		transition-property: background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(1, 1, 0.5, 1.3333);
	}
}

.heart--with-dots:after {
	transform: translate(-50%, -50%) rotate(36deg);
	background-image: radial-gradient(#efefef 20%, transparent 25%);
	background-position: 0 0, 2px 2px;
	background-size: 4px 4px;
}

.heart--with-lines:after {
	background-image: repeating-linear-gradient(
		35deg,
		rgba(255 255 255 / 0.25),
		rgba(255 255 255 / 0.25) 2px,
		transparent 2px,
		transparent 4px
	);
	background-position: center;
	background-size: auto;
}

.heart--is-yellow:after {
	--bg-color: #e7b843;
}

.heart--is-green:after {
	--bg-color: #229587;
}

.heart--is-red:after {
	--bg-color: #d44835;
}

.heart--is-pink:after {
	--bg-color: #ce546d;
}

.heart--is-blue:after {
	--bg-color: #58b7ce;
}

.heart--is-orange:after {
	--bg-color: #e8874e;
}

.heart--top-left {
	left: -25%;
	top: -2%;
	rotate: -7deg;
	z-index: 2;
	--scale: 4.6;
	animation-delay: 0.1s;
}

.heart--top-center {
	left: 64%;
	top: -5%;
	rotate: -42deg;
	z-index: -1;
	--scale: 4.6;
	animation-delay: 0.2s;
}

.heart--top-right {
	left: 118%;
	top: 8%;
	rotate: 10deg;
	z-index: -1;
	--scale: 3.6;
	animation-delay: 0.3s;
}

.heart--left-center {
	left: -20%;
	top: 64%;
	rotate: -23deg;
	z-index: 2;
	--scale: 6.2;
	animation-delay: 0.2s;
}

.heart--bottom-center {
	--scale: 4.2;
	left: 38%;
	top: 101%;
	rotate: 40deg;
	animation-delay: 0.3s;
}

.heart--bottom-right {
	left: 102%;
	top: 78%;
	rotate: 12deg;
	z-index: -1;
	--scale: 5.4;
	animation-delay: 0.4s;
}

body:has(#red:checked) .heart:after {
	--bg-color: #d44835;
}

body:has(#blue:checked) .heart:after {
	--bg-color: #58b7ce;
}

body:has(#green:checked) .heart:after {
	--bg-color: #229587;
}

body:has(#yellow:checked) .heart:after {
	--bg-color: #e7b843;
}

body:has(#orange:checked) .heart:after {
	--bg-color: #e8874e;
}

@keyframes pop {
	0 {
		transform: scale(0);
	}
	1% {
		transform: scale(var(--scale));
	}
	2%,
	34%,
	64%,
	100% {
		transform: scale(var(--scale)) translate(0, 0);
	}
	10%,
	42%,
	72% {
		transform: scale(var(--scale)) translate(-1px, -1px);
	}
	18%,
	50%,
	80% {
		transform: scale(var(--scale)) translate(-1px, 2px);
	}
	26%,
	58%,
	88% {
		transform: scale(var(--scale)) translate(1px, 1px);
	}
}