/* La sélection — carrousel façon story « Red Alert » (template-parts/sections/selection.php) */

.selection {
	--item-w: 46vw;
	--interval: 2800ms;
	overflow: hidden;
	padding-block: clamp(5rem, 10vw, 8rem);
	background: var(--c-night);
	color: var(--c-cream);
}

@media (min-width: 40rem) {
	.selection {
		--item-w: 28vw;
	}
}

@media (min-width: 64rem) {
	.selection {
		--item-w: 15rem;
	}
}

/* Barres de progression façon story */
.selection__progress {
	display: flex;
	gap: 0.375rem;
	margin-bottom: 3rem;
}

.selection__bar {
	position: relative;
	flex: 1;
	height: 1.25rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.selection__bar span {
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	overflow: hidden;
	background: rgb(243 238 228 / 0.14);
	transform: translateY(-50%);
}

.selection__bar span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-amber);
	transform: scaleX(0);
	transform-origin: left;
}

.selection__bar.is-done span::after {
	transform: scaleX(1);
}

.selection__bar.is-current span::after {
	transform: scaleX(1);
}

.selection.is-playing .selection__bar.is-current span::after {
	animation: wn-story-fill var(--interval) linear forwards;
}

@keyframes wn-story-fill {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Piste horizontale */
.selection__track {
	display: flex;
	margin-top: 2.5rem;
	padding-inline: calc(50% - var(--item-w) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	transition: opacity 0.35s var(--ease-soft);
	/* halo ambré discret derrière la bouteille active (lisibilité sur fond sombre) */
	background: radial-gradient(ellipse 22rem 70% at center, rgb(212 168 112 / 0.16), transparent 70%);
}

.selection__track::-webkit-scrollbar {
	display: none;
}

.selection__track.is-rewinding {
	opacity: 0;
}

.selection__item {
	flex-shrink: 0;
	width: var(--item-w);
	scroll-snap-align: center;
	transform-origin: bottom center;
	will-change: transform, opacity;
}

.selection__bottle {
	position: relative;
	display: block;
	width: 100%;
	height: min(56vh, 30rem);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.selection__bottle img,
.selection__bottle .bottle-svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

.selection__shadow {
	display: block;
	width: 50%;
	height: 1rem;
	margin: -0.75rem auto 0;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.55);
	filter: blur(10px);
}

/* Légende + commandes */
.selection__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
}

.selection__caption {
	flex: 1;
	min-height: 6.5rem;
	text-align: center;
}

.selection__caption.is-changing > * {
	animation: wn-caption-in 0.45s var(--ease-soft) both;
}

@keyframes wn-caption-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.selection__vintage {
	margin: 0;
	min-height: 1.4em;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	color: var(--c-amber-light);
}

.selection__name {
	margin: 0.4rem 0 0;
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.25;
}

.selection__producer {
	margin: 0.3rem 0 0;
	min-height: 1.5em;
	font-family: var(--f-serif);
	font-size: 1.15rem;
	font-style: italic;
	color: rgb(243 238 228 / 0.65);
}

.selection__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.5rem;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(243 238 228 / 0.7);
}

.selection__pause {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.selection__pause .i-play,
.selection.is-paused .selection__pause .i-pause {
	display: none;
}

.selection.is-paused .selection__pause .i-play {
	display: inline;
}

@media (prefers-reduced-motion: reduce) {
	.selection__pause {
		display: none;
	}
}