/* ===========================================================================
   IMAGE CAROUSEL

   Slide track, prev/next nav, indicator dots and play-pause control.
   Loaded by: the-empty-halls.html
   =========================================================================== */

/* Image carousel stuff. Sizing and placement come from whatever column it is
   dropped into (see CSS/teh-layout.css) — it no longer floats itself.

   The container is a panel matching the store/Discord cards it sits above:
   same surface, same 16px radius, same shadow. The screenshots are inset
   inside it and the dots sit on the panel rather than floating loose on the
   page background. */
.carousel-container {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	background: var(--color-primary-a20);
	border: 1px solid var(--color-card-border);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	padding: 10px;
}

.carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
	/* Concentric with the panel: 16px outer radius minus the 10px inset. */
	border-radius: 8px;
}

.carousel-track {
	display: flex;
	/* Travelling, so --ease-soft, and shorter than the 0.6s it was: the arrows
	   are meant to be clicked several times in a row, and at 0.6s the second
	   click lands before the first slide has settled. */
	transition: transform 0.45s var(--ease-soft);
	height: 100%;
}

.carousel-slide {
	min-width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
	cursor: zoom-in;
}

@media (hover: hover) {
	.carousel-slide:hover img {
		transform: scale(1.05);
	}
}

.carousel-nav {
	font-family: "Circular Spotify", sans-serif;
	font-weight: 1000;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	backdrop-filter: blur(0px);
	color: white;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	transition:
		opacity var(--dur-hover) var(--ease-out),
		transform var(--dur-hover) var(--ease-out),
		background-color var(--dur-hover) var(--ease-soft),
		box-shadow var(--dur-hover) var(--ease-out);
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* The arrows slide in from the edge they belong to rather than fading in on
   the spot, so where they came from says which way they go. --nav-rest is
   their settled offset; each arrow sets its own sign below. */
.carousel-nav {
	--nav-rest: 0px;
	transform: translate(var(--nav-rest), -50%);
}

.carousel:hover .carousel-nav,
.carousel:focus-within .carousel-nav {
	opacity: 1;
	pointer-events: auto;
	--nav-rest: 0px;
}

.carousel-nav.prev {
	left: 20px;
	--nav-rest: -8px;
}

.carousel-nav.next {
	right: 20px;
	--nav-rest: 8px;
}

@media (hover: hover) {
	.carousel-nav:hover {
		backdrop-filter: blur(4px);
		background: rgba(255, 255, 255, 0.15);
		transform: translate(0, -50%) scale(1.12);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	}
}

.carousel-nav:active {
	transform: translate(0, -50%) scale(0.92);
	transition-duration: var(--dur-press);
}

.carousel-indicators {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	margin-bottom: 2px;
}

/* The dots sit on the page background, not on an image, so they need theme
   colours — plain white was invisible in light mode.

   Each one is a 10px target inside a 22px hit area: the dots themselves have
   to stay small to read as dots, but 10px is well under the size a finger can
   reliably land on, and the gap between them was dead space. */
.indicator {
	/* These became real <button>s so they can be tabbed to, which quietly
	   brought the browser's own button styling with them: 1px 6px of padding, a
	   2px outset border and appearance: auto. With box-sizing: border-box the
	   declared 10px width cannot go below that padding and border, so every dot
	   came out 16x10 — a bevelled oval rather than a flat circle. None of the
	   UA styling is wanted here; the dot is drawn entirely by the rules below. */
	appearance: none;
	-webkit-appearance: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	flex: 0 0 auto;

	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-carousel-dot);
	cursor: pointer;
	transition:
		background-color var(--dur-hover) var(--ease-soft),
		transform var(--dur-hover) var(--ease-pop),
		box-shadow var(--dur-hover) var(--ease-out),
		width var(--dur-panel) var(--ease-out);
	position: relative;
}

.indicator::before {
	content: "";
	position: absolute;
	inset: -6px;
}

/* The current slide's dot stretches into a lozenge rather than just changing
   colour. Shape survives being glanced at; a brightness step between two greys
   on a row of ten does not. */
.indicator.active {
	background: var(--color-carousel-dot-active);
	box-shadow: 0 0 10px var(--color-carousel-dot-glow);
	width: 22px;
	border-radius: 5px;
}

@media (hover: hover) {
	.indicator:hover {
		background: var(--color-carousel-dot-hover);
		transform: scale(1.25);
	}
}

.indicator:active {
	transform: scale(0.85);
	transition-duration: var(--dur-press);
}

.carousel-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.play-pause-btn {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 10px 20px;
	border-radius: 25px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.play-pause-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

/* Touch devices never get the hover state, so the arrows would never appear.
   Keep them visible and at their settled offset there instead. */
@media (hover: none) {
	.carousel-nav.prev,
	.carousel-nav.next {
		opacity: 1;
		pointer-events: auto;
		--nav-rest: 0px;
	}
}

@media (max-width: 600px) {
	.carousel-nav {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.carousel-indicators {
		gap: 10px;
	}
}