/* ==========================================================================
   Carrusel de discografia  [jys_discografia]
   Coverflow 3D: la portada del frente lleva el boton play y enlaza al disco.
   ========================================================================== */

.jys-disco {
	--jys-disco-size: 450px;
	--s: min(var(--jys-disco-size), 64vw);
	--jys-gold: #d7a34f;

	position: relative;
	width: 100%;
	padding: 10px 70px 20px;
	overflow: hidden; /* las portadas laterales no deben causar scroll horizontal */
	outline: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.jys-disco:focus-visible {
	box-shadow: 0 0 0 2px var(--jys-gold);
}

.jys-disco__stage {
	position: relative;
	height: var(--s);
	perspective: 1400px;
	/* Sin preserve-3d a proposito: asi las portadas de atras siguen recibiendo clics
	   y el orden lo define el z-index. */
}

.jys-disco__item {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--s);
	height: var(--s);
	margin-left: calc(var(--s) / -2);
	display: block;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	background: #11161c;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	transform-origin: 50% 50%;
	transition:
		transform .7s cubic-bezier(.22, .61, .36, 1),
		opacity .7s ease,
		filter .7s ease;
	will-change: transform;
	-webkit-tap-highlight-color: transparent;
}

/* Hasta que el JS posiciona, solo se ve el primero (sin saltos) */
.jys-disco:not(.is-ready) .jys-disco__item:not(:first-child) { opacity: 0; }

.jys-disco__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

.jys-disco__cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	text-align: center;
}

/* --- Boton play (solo en el del frente) ----------------------------- */
.jys-disco__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(2px);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}

.jys-disco__play svg {
	width: 46px;
	height: 46px;
	margin-left: 6px;
	fill: #fff;
}

.jys-disco__item.is-active .jys-disco__play {
	opacity: 1;
	transform: scale(1);
	transition-delay: .35s;
}

.jys-disco__item.is-active:hover .jys-disco__play,
.jys-disco__item.is-active:focus-visible .jys-disco__play {
	background: rgba(215, 163, 79, .85);
	transform: scale(1.08);
	transition-delay: 0s;
}

.jys-disco__item:focus-visible {
	outline: 2px solid var(--jys-gold);
	outline-offset: 4px;
}

/* --- Flechas ---------------------------------------------------------- */
.jys-disco__nav {
	position: absolute;
	top: calc(var(--s) / 2);
	z-index: 50;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, .55);
	cursor: pointer;
	transition: background-color .25s ease;
}

.jys-disco__nav:hover,
.jys-disco__nav:focus-visible { background: var(--jys-gold); }

.jys-disco__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jys-disco__nav--prev { left: 10px; }
.jys-disco__nav--next { right: 10px; }

/* --- Nombre del disco del frente ------------------------------------- */
.jys-disco__caption {
	min-height: 1.4em;
	margin: 26px 0 0;
	color: var(--jys-gold);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	letter-spacing: .15em;
	text-align: center;
	text-transform: uppercase;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 767px) {
	.jys-disco { padding: 0 8px; }
	.jys-disco__nav { width: 34px; height: 34px; margin-top: -17px; background: rgba(0, 0, 0, .6); }
	.jys-disco__nav--prev { left: 4px; }
	.jys-disco__nav--next { right: 4px; }
	.jys-disco__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
	.jys-disco__play svg { width: 34px; height: 34px; }
	.jys-disco__caption { margin-top: 18px; padding: 0 12px; font-size: 13px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
	.jys-disco__item,
	.jys-disco__play { transition: none; }
}