/**
 * Ta Dhi Tom -- city ticker.
 *
 * A continuous strip of the festival's host cities, pinned to the bottom edge
 * of the first screen.
 * Pure CSS: identical copies of the list sit side by side in a track that
 * slides from 0 to -50%, so the loop is seamless with no JS and no visible
 * seam. No prev/next controls -- it is a decorative, always-moving strip, not
 * a carousel the visitor steps through.
 *
 * PINNED, NOT MOVED. The ticker is still printed just before the footer, well
 * below the first screen. position: sticky with bottom: 0 holds it to the
 * bottom of the viewport for as long as its own place in the page is further
 * down, so it is on screen when the page loads at any window height, then
 * settles into its place above the footer once the reader scrolls there.
 * That needs no height arithmetic and no JS. It stays under the header
 * (z-index 100) and under the <dialog>, which sits in the top layer.
 *
 * @package swati
 */

.city-ticker {
	position: sticky;
	bottom: 0;
	z-index: 50;
	overflow: hidden;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	background: var(--c-bg-panel);
	padding: 1.05rem 0;
}

/* On home the same strip runs directly under the Ta Dhi Tom band, in the flow
   rather than pinned: held to the bottom of the screen there it would sit over
   the book hero above the band. The modifier is added by the sandbox printer
   (wp-content/novamira-sandbox/swati-ta-dhi-tom-ticker.php). */
.city-ticker--inline {
	position: relative;
	bottom: auto;
	z-index: auto;
}

.city-ticker__track {
	display: flex;
	width: max-content;
	/* The track holds four copies of ten cities, so it travels roughly 2.5x the
	   distance the old two copies of eight did. 85s keeps the pace the old 34s
	   had (about 36px a second at a 1024px window). */
	animation: city-ticker-scroll 85s linear infinite;
}

.city-ticker__group {
	display: flex;
	align-items: center;
	flex: none;
	white-space: nowrap;
}

.city-ticker__item {
	font-family: var(--font-engraved);
	font-size: clamp(0.92rem, 1.55vw, 1.22rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-nav-active);
	padding: 0 1.6em;
}

.city-ticker__dot {
	color: var(--c-rule);
	font-size: 0.6em;
	vertical-align: middle;
}

@keyframes city-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.city-ticker__track {
		animation: none;
	}
}