/* Album Disc block — port of the wolf-core (effigy) Elementor widget.
 * Class prefix renamed from `wolf-core-album-*` to `vex-album-*` and the
 * scroll-reveal trigger no longer depends on wow.js/waypoints — it uses an
 * IntersectionObserver bound in the inline JS below to add `.vex-album-*-revealed`.
 */

.vex-album-disc {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 750px;
}

.vex-album-disc-cover-img {
	width: 100%;
}

.vex-album-disc-align-left {
	margin-left: 0;
}

.vex-album-disc-align-right {
	margin-right: 0;
}

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

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

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

/* Reveal: cover slides in from the right by 20%. */
.vex-album-cover-reveal {
	transform: translate3d(20%, 0, 0);
	transition: transform 0.7s cubic-bezier(0, 0.45, 0.54, 0.99);
}

.vex-album-cover-reveal.vex-album-cover-revealed {
	transform: translate3d(0, 0, 0);
}

.vex-album-disc-disc-inner {
	width: 100%;
	height: 100%;
}

.vex-album-disc-cover-img {
	border-radius: 2px;
	position: relative;
	left: 1px;
	backface-visibility: hidden;
}

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

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

/* Disc reveal: starts hidden behind the cover, transitions out to a tilted
   peek-out on the right (this is the inverse direction of the cover reveal,
   matching the effigy widget where the disc emerges from behind the cover). */
.vex-album-disc-disc-container {
	position: absolute;
	transition: transform 0.7s cubic-bezier(0, 0.45, 0.54, 0.99);
	transform: translate3d(0, 0, 0) rotate(0);
	border-radius: 50%;
	overflow: hidden;
}

.vex-album-disc-disc-container.vex-album-disc-revealed {
	transform: translate3d(40%, 0, 0) rotate(-42deg);
}

.vex-album-disc-cd .vex-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);
}

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

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

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

.vex-album-disc-disc-img {
	backface-visibility: hidden;
	width: 100%;
	vertical-align: middle;
}

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

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

/* Spin animation modes. */
.vex-album-disc-rotate-always .vex-album-disc-disc-inner,
.vex-album-disc-rotate-hover .vex-album-disc-disc-inner,
.vex-album-disc-rotate-hover-stop .vex-album-disc-disc-inner {
	animation: vex_disc_spin 3.5s linear infinite;
}

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

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

@keyframes vex_disc_spin {
	100% {
		transform: rotate(360deg);
	}
}

/* When prefers-reduced-motion, skip the slide-in stagger but keep the disc
   peeking out (its visible state). Spin animation also disabled. */
@media (prefers-reduced-motion: reduce) {
	.vex-album-cover-reveal {
		transition: none;
		transform: translate3d(0, 0, 0);
	}
	.vex-album-disc-disc-container {
		transition: none;
		transform: translate3d(40%, 0, 0) rotate(-42deg);
	}
	.vex-album-disc-rotate-always .vex-album-disc-disc-inner,
	.vex-album-disc-rotate-hover .vex-album-disc-disc-inner,
	.vex-album-disc-rotate-hover-stop .vex-album-disc-disc-inner {
		animation: none;
	}
}