/* Vinyl */

.vinyl {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.08), transparent 30%),
		repeating-radial-gradient(circle, #0c0a08 0 1.6px, #1c1814 1.6px 2.2px, #0c0a08 2.2px 3.8px),
		radial-gradient(circle, #15100c, #0a0806);
	box-shadow: 0 26px 50px rgba(20, 12, 6, 0.55), inset 0 0 0 1px rgba(196, 150, 86, 0.25);
}

.vinyl--spin { animation: vinyl-spin 36s linear infinite; }

@keyframes vinyl-spin { to { transform: rotate(360deg); } }

.vinyl__label {
	position: absolute;
	inset: 31%;
	border-radius: 50%;
	background: radial-gradient(circle, #3a2616, #241712 70%);
	box-shadow: 0 0 0 2px rgba(196, 150, 86, 0.95), 0 0 0 15px #050402;
	overflow: hidden;
}

.vinyl__veil {
	position: absolute;
	inset: 0;
	background-image: url("../img/damask-tile.png");
	background-size: 58px 58px;
	opacity: 0.42;
}

.vinyl__emblem { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); z-index: 2; width: 30%; height: auto; }
.vinyl__wordmark { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); z-index: 2; width: 60%; height: auto; }

.vinyl__hole {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, #1a120a, #050402);
	box-shadow: inset 0 0 0 2px rgba(196, 150, 86, 0.7);
	z-index: 3;
}