/**
 * JS Album Disc
 * Standalone spinning album/CD display.
 *
 * This version follows the original Wolf Core layout model:
 * - The cover image creates the natural height.
 * - The disc is positioned absolutely relative to the cover container.
 * - No artificial square padding box is used, which prevents mobile overlap.
 */

/**
 * Main wrapper.
 */

.js-album-disc {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin-left: 0;
	margin-right: auto;
}

.js-album-disc-align-left,
.js-album-disc-align-center {
	margin-left: 0;
	margin-right: auto;
}

.js-album-disc-align-right {
	margin-left: auto;
	margin-right: 0;
}

/**
 * Cover/disc layout.
 *
 * Important:
 * Do not use padding-bottom here.
 * The cover image creates the natural document height.
 */

.js-album-disc-cover-container {
	position: relative;
	z-index: 1;
	margin: 0 32% 10px 0;
}

/**
 * Clickable mask.
 */

.js-album-disc-link-mask {
	position: absolute;
	z-index: 14;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/**
 * Album cover.
 */

.js-album-disc-cover-inner {
	position: relative;
	z-index: 3;
	overflow: hidden;
	box-shadow: 0 10px 3px -9px rgba(0, 0, 0, 0.77);
}

.js-album-disc-cover-img {
	position: relative;
	left: 1px;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	backface-visibility: hidden;
}

/**
 * CD / vinyl disc.
 */

.js-album-disc-disc-container {
	position: absolute;
	z-index: 2;
	border-radius: 50%;
	overflow: hidden;
	transition: all 0.7s cubic-bezier(0, 0.45, 0.54, 0.99);
	transform: translate3d(40%, 0, 0) rotate(-42deg);
}

/**
 * CD sizing.
 *
 * The disc is slightly smaller than the cover and sits behind it.
 */

.js-album-disc-cd .js-album-disc-disc-container {
	top: 14px;
	left: 14px;
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	box-shadow:
		inset 0 0 4px 1px rgba(0, 0, 0, 0.66),
		0 0 0 5px rgba(0, 0, 0, 0.22),
		0 0 0 3px rgba(0, 0, 0, 0.88);
}

/**
 * Vinyl sizing.
 */

.js-album-disc-vinyl .js-album-disc-disc-container {
	top: 1%;
	left: 1%;
	width: 98%;
	height: 98%;
}

/**
 * Disc inner.
 */

.js-album-disc-disc-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform-origin: center center;
}

.js-album-disc-cd .js-album-disc-disc-inner {
	background: #111;
}

/**
 * Disc artwork.
 */

.js-album-disc-disc-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	backface-visibility: hidden;
	vertical-align: middle;
}

.js-album-disc-vinyl .js-album-disc-disc-img {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 40%;
	transform: translate3d(-50%, -50%, 0);
}

/**
 * CD printed circular text overlay.
 */

.js-album-disc-disc-text {
	position: absolute;
	z-index: 5;
	top: 5px;
	left: 5px;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
	margin: -2px;
	border-radius: 50%;
	background: transparent url("../img/album-disc/cd-disc-circular-text.png") left top no-repeat;
	background-size: cover;
	opacity: 0.88;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
}

/**
 * CD center hole.
 */

.js-album-disc-disc-hole {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	width: 32.5%;
	height: 32.5%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.99);
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0);
}

/**
 * Vinyl overlay.
 */

.js-album-disc-vinyl {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: transparent url("../img/album-disc/vinyl.png") left top no-repeat;
	background-size: cover;
	pointer-events: none;
}

/**
 * Worn cover border.
 */

.js-album-disc-cover-border {
	position: absolute;
	z-index: 4;
	top: -1px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent url("../img/album-disc/cd-cover-border.png") left top no-repeat;
	background-size: cover;
	opacity: 0.88;
	pointer-events: none;
}

.js-album-disc-worn-border-no .js-album-disc-cover-border {
	background: none;
}

/**
 * Rotation modes.
 */

.js-album-disc-rotate-always .js-album-disc-disc-inner,
.js-album-disc-rotate-hover .js-album-disc-disc-inner,
.js-album-disc-rotate-hover-stop .js-album-disc-disc-inner {
	animation: js-album-disc-spin 3.5s linear infinite;
}

.js-album-disc-rotate-hover:not(:hover) .js-album-disc-disc-inner {
	animation-play-state: paused;
}

.js-album-disc-rotate-hover-stop:hover .js-album-disc-disc-inner {
	animation-play-state: paused;
}

.js-album-disc-rotate-none .js-album-disc-disc-inner {
	animation: none;
}

@keyframes js-album-disc-spin {
	100% {
		transform: rotate(360deg);
	}
}

/**
 * Elementor/editor safety.
 */

.elementor-editor-active .js-album-disc-link-mask {
	pointer-events: none;
}

/**
 * Mobile.
 *
 * Keep the same natural-height model.
 * Only adjust scale and disc reveal amount.
 */

@media screen and (max-width: 767px) {
	.js-album-disc {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	.js-album-disc-cover-container {
		margin: 0 26% 10px 0;
	}

	.js-album-disc-disc-container {
		transform: translate3d(34%, 0, 0) rotate(-42deg);
	}

	.js-album-disc-cd .js-album-disc-disc-container {
		top: 12px;
		left: 12px;
		width: calc(100% - 24px);
		height: calc(100% - 24px);
	}
}