:root {
	--border-color: #ff6666; /* Blood red border */
	--low-circle-color: rgba(20, 0, 32, 0.7); /* Dark wine red */
	--medium-circle-color: rgba(0, 0, 128, 0.7); /* Deep blue */
	--high-circle-color: rgba(64, 0, 20, 0.7); /* Dark purple */
}

body {
	background: var(--background-color);
	background-image: url('grunge_texture.png'); /* Gothic grunge texture */
	background-blend-mode: multiply;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

* {
	box-sizing: border-box;
}

.plane-block {
	height: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

#plate {
	width: 50%;
	height: 50%;
	background: url('image.png');
	background-size: cover;
	background-position: center;
	border: 5px dashed var(--border-color); /* Dashed border for extra craziness */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: spinPlate 15s linear infinite; /* Faster spin */
	animation-play-state: paused;
	filter: grayscale(0.5); /* Slight desaturation for a gothic feel */
}

#plate::before {
	content: '';
	width: 7%;
	height: 7%;
	position: absolute;
	background: var(--background-color);
	border-radius: 50%;
	border: 2px dotted var(--border-color); /* Dotted border */
}

.circle {
	position: absolute;
	min-height: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: -1;
	transition: border-radius .5s, transform .5s; /* Added transform transition */
	border: 3px solid var(--border-color); /* Thicker border */
	transform: scale(0.95); /* Slightly scaled down for a "pulsing" effect on hover */
}

.circle:nth-child(1) {
	height: 70%;
	background-color: var(--low-circle-color);
}

.circle:nth-child(2) {
	height: 75%;
	background-color: var(--medium-circle-color);
}

.circle:nth-child(3) {
	height: 82%;
	background-color: var(--high-circle-color);
}

#plate:hover {
	cursor: pointer;
	animation-play-state: running; /* Let it spin on hover */
	/* On hover, make the plate scale up and down, for an eerie effect */
	animation: pulsate 1s ease infinite alternate; 
}

@keyframes spinPlate {
	to {
		transform: rotate(360deg);
	}
}

/* Added pulsate animation */
@keyframes pulsate {
	to {
		transform: scale(1.05);
	}
}