/* Vinyl Album Stack - estilos front-end
 *
 * Arquitectura clave (aprendida de Vinyl Album Test, que sí funcionó):
 * cada tarjeta tiene su PROPIA perspectiva 3D aislada (.vas-scene +
 * .vas-album con preserve-3d propio), en vez de compartir una sola
 * perspectiva/preserve-3d entre todas las tarjetas apiladas. Cuando
 * varias tarjetas comparten un mismo contexto preserve-3d, el
 * navegador ordena por profundidad real ENTRE TODAS a la vez (no solo
 * adentro de cada una), y ahí piezas finas como el lomo (rotado a
 * exactamente 90°, de canto) pierden ese sorteo contra piezas de
 * tarjetas vecinas y se vuelven invisibles.
 *
 * El apilado del carrusel (tarjeta activa + 3 detrás + resto oculto)
 * usa transform 2D puro (translate + scale, sin translateZ) sobre
 * .vas-slot, así el "afuera" del stack nunca entra en un contexto 3D
 * compartido: cada .vas-scene adentro es una cajita 3D completamente
 * aislada, igual que la prueba de una sola tarjeta. */

.vas-widget {
	--vas-stage-w: min(var(--vas-stage-w-set, 360px), calc(100vw - 80px));
	--vas-stage-h: var(--vas-stage-h-set, 360px);
	--vas-size-ratio: calc(var(--vas-stage-w) / 360px);
	--vas-perspective: calc(var(--vas-stage-w) * 3.8889);
	--vas-rotate-x: 2deg;
	--vas-rotate-y: -28deg;
	--vas-rotate-z: 0deg;
	--vas-offset-x: 65px;
	--vas-offset-y: -28px;
	--vas-side-w-ref: 14px;
	--vas-side-w: calc(var(--vas-size-ratio) * var(--vas-side-w-ref));
	--vas-vinyl-ratio: 0.69;
	--vas-vinyl-length: calc(min(var(--vas-stage-w), var(--vas-stage-h)) * var(--vas-vinyl-ratio));
	--vas-vinyl-right-ref: -78px;
	--vas-vinyl-right: calc(var(--vas-size-ratio) * var(--vas-vinyl-right-ref));
	--vas-vinyl-top-ref: 55px;
	--vas-vinyl-top: calc(var(--vas-size-ratio) * var(--vas-vinyl-top-ref));
	--vas-label-size: 12%;
	--vas-num-size: calc(var(--vas-stage-w) * 0.2);
	--vas-num-top: calc(var(--vas-stage-w) * 0.0278);
	--vas-num-right: calc(var(--vas-stage-w) * 0.05);
	--vas-txt-size: calc(var(--vas-stage-w) * 0.05);
	--vas-txt-left: calc(var(--vas-stage-w) * 0.05);
	--vas-txt-bottom: calc(var(--vas-stage-w) * 0.0556);

	/* Espacio real que ocupa el stack más allá de la tarjeta activa: las
	   tarjetas de atrás se desplazan hasta 3 veces el offset (derecha y
	   arriba). El "frame" reserva ese espacio para que el efecto quepa
	   dentro del propio div en vez de pintarse fuera de él. --vas-buffer
	   es un margen chico en los 4 lados para la sombra de .vas-cover y el
	   ligero tilt de rotateX, que si no se reserva también se recorta. */
	--vas-buffer: 30px;
	--vas-extra-right: calc(var(--vas-size-ratio) * max(0px, var(--vas-offset-x)) * 3 + var(--vas-buffer));
	--vas-extra-top: calc(var(--vas-size-ratio) * max(0px, var(--vas-offset-y) * -1) * 3 + var(--vas-buffer));
	--vas-extra-left: var(--vas-buffer);
	--vas-extra-bottom: var(--vas-buffer);
	--vas-frame-w: min(calc(var(--vas-stage-w) + var(--vas-extra-left) + var(--vas-extra-right)), calc(100vw - 40px));
	--vas-frame-h: calc(var(--vas-stage-h) + var(--vas-extra-top) + var(--vas-extra-bottom));

	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	box-sizing: border-box;
}

/* Frame: mide justo lo que necesita el stack completo (tarjeta activa +
   desfase de las tarjetas de atrás) y es quien recorta el sobrante, no
   la tarjeta individual. Como el tamaño ya incluye ese desfase, en el
   caso normal no debería recortar nada visible; sólo actúa como red de
   seguridad para que jamás se desborde hacia la página. */
.vas-stage-frame {
	position: relative;
	width: var(--vas-frame-w);
	height: var(--vas-frame-h);
	max-width: 100%;
	margin-bottom: 50px;
	overflow: hidden;
}

.vas-stage {
	position: absolute;
	left: var(--vas-extra-left);
	bottom: var(--vas-extra-bottom);
	width: var(--vas-stage-w);
	height: var(--vas-stage-h);
}

/* Slot: puramente 2D. Sólo mueve/escala/atenúa la tarjeta como un
   bloque rígido; el 3D "de verdad" vive adentro, en .vas-scene, y no
   se entera de qué hacen los demás slots. */
.vas-slot {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, filter 0.6s ease;
}

.vas-slot.active {
	transform: translate(0, 0) scale(1);
	z-index: 40;
	opacity: 1;
	filter: brightness(1);
}

.vas-slot.vas-d1 {
	transform: translate(calc(var(--vas-size-ratio) * var(--vas-offset-x) * 1), calc(var(--vas-size-ratio) * var(--vas-offset-y) * 1)) scale(0.95);
	z-index: 30;
	opacity: 1;
	filter: brightness(0.86);
}

.vas-slot.vas-d2 {
	transform: translate(calc(var(--vas-size-ratio) * var(--vas-offset-x) * 2), calc(var(--vas-size-ratio) * var(--vas-offset-y) * 2)) scale(0.9);
	z-index: 20;
	opacity: 1;
	filter: brightness(0.72);
}

.vas-slot.vas-d3 {
	transform: translate(calc(var(--vas-size-ratio) * var(--vas-offset-x) * 3), calc(var(--vas-size-ratio) * var(--vas-offset-y) * 3)) scale(0.85);
	z-index: 10;
	opacity: 1;
	filter: brightness(0.58);
}

.vas-slot.vas-hidden {
	transform: translate(calc(var(--vas-size-ratio) * var(--vas-offset-x) * 4), calc(var(--vas-size-ratio) * var(--vas-offset-y) * 4)) scale(0.8);
	z-index: 0;
	opacity: 0;
}

/* Caja 3D aislada de esta tarjeta: su propia perspectiva, que no
   comparte con la de ningún otro slot. */
.vas-scene {
	width: 100%;
	height: 100%;
	perspective: var(--vas-perspective);
}

.vas-album {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateY(var(--vas-rotate-y)) rotateX(var(--vas-rotate-x)) rotateZ(var(--vas-rotate-z));
}

/* El disco sólo se dibuja en la tarjeta activa (evita amontonar varios
   discos superpuestos en el stack). */
.vas-slot:not(.active) .vas-vinyl {
	display: none;
}

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

/* "Scratch" de tornamesa: al cambiar de tarjeta el disco activo acelera
   de golpe, hace un pequeño tirón hacia atrás y se asienta — como un DJ
   frenando el vinilo con la mano. Termina en 720deg (dos vueltas
   completas) para que, al volver al giro continuo normal, no se note
   ningún salto visual. JS agrega/quita la clase .vas-scratch en el
   disco de la tarjeta que se vuelve activa. */
@keyframes vas-vinyl-scratch {
	0% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(460deg);
	}
	55% {
		transform: rotate(330deg);
	}
	78% {
		transform: rotate(500deg);
	}
	100% {
		transform: rotate(720deg);
	}
}

.vas-widget .vas-vinyl.vas-scratch {
	animation: vas-vinyl-scratch 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}

.vas-widget .vas-vinyl {
	position: absolute;
	width: var(--vas-vinyl-length);
	height: var(--vas-vinyl-length);
	right: var(--vas-vinyl-right);
	top: var(--vas-vinyl-top);
	border-radius: 50%;
	background: repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px, #111 4px 6px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: vas-vinyl-spin var(--vas-vinyl-spin-duration, 6s) linear infinite;
}

.vas-widget .vas-vinyl.has-custom-image {
	background: transparent;
	box-shadow: none;
}

.vas-widget .vas-vinyl-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	z-index: 0;
}

.vas-widget .vas-vinyl-label {
	position: relative;
	width: var(--vas-label-size);
	height: var(--vas-label-size);
	border-radius: 50%;
	background-color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.vas-widget .vas-vinyl-label-text {
	font-size: 6px;
	color: #ffffff;
	text-align: center;
	padding: 0 2px;
	line-height: 1.1;
}

.vas-widget .vas-side {
	position: absolute;
	right: calc(var(--vas-side-w) * -1);
	top: 0;
	width: var(--vas-side-w);
	height: 100%;
	background: linear-gradient(#f0f0f0, #d6d6d6);
	transform: rotateY(90deg);
	transform-origin: left;
	z-index: 2;
}

.vas-widget .vas-cover {
	position: absolute;
	inset: 0;
	background: #ffffff;
	border: 2px solid #eeeeee;
	overflow: hidden;
	z-index: 3;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.vas-widget .vas-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vas-widget .vas-cover::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.25), transparent 35%, transparent 65%, rgba(255, 255, 255, 0.1));
	z-index: 1;
	pointer-events: none;
}

.vas-widget .vas-cover-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0) 70%);
	z-index: 1;
}

.vas-widget .vas-num {
	position: absolute;
	top: var(--vas-num-top);
	right: var(--vas-num-right);
	font-size: var(--vas-num-size);
	font-weight: 300;
	color: #ffffff;
	line-height: 1;
	z-index: 4;
	pointer-events: none;
}

.vas-widget .vas-txt {
	position: absolute;
	left: var(--vas-txt-left);
	bottom: var(--vas-txt-bottom);
	font-size: var(--vas-txt-size);
	font-weight: 700;
	font-style: italic;
	color: #ffffff;
	line-height: 1.15;
	text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
	z-index: 4;
	pointer-events: none;
}

/* Controles */
.vas-controls {
	display: flex;
	align-items: center;
	gap: 20px;
}

.vas-widget .vas-nav-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.vas-widget .vas-nav-btn:hover {
	background: #ffffff;
	color: #000000;
	transform: scale(1.08);
}

.vas-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vas-widget .vas-dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.vas-widget .vas-dot.active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.3);
}

.vas-widget .vas-dot.active::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: conic-gradient(#ffffff calc(var(--vas-dot-progress, 0) * 1%), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

.vas-widget .vas-dot.active::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #ffffff;
}

.vas-no-arrows .vas-nav-btn {
	display: none;
}

.vas-no-dots .vas-dots {
	display: none;
}

.vas-no-spin .vas-vinyl {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.vas-slot,
	.vas-widget .vas-dot {
		transition-duration: 0.01ms !important;
	}

	.vas-widget .vas-vinyl {
		animation: none;
	}
}