/**
 * BIGBAT58 — Premium announcement / news ticker
 */

:root {
	--bb58-ticker-duration: 72s;
	--bb58-ticker-ease: linear;
}

.bb58-announcement-ticker {
	--bb58-ticker-gold: color-mix(in srgb, var(--color-primary, #c9a84c) 88%, #fff 12%);
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	min-height: 44px;
	height: var(--bb58-announcement-height, 44px);
	overflow: hidden;
	line-height: normal; /* Reset body.bb58-has-fixed-header { line-height: 0 } */
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, #121212 88%, var(--color-primary, #c9a84c) 12%) 0%,
			color-mix(in srgb, #1a1814 82%, var(--color-primary, #c9a84c) 18%) 22%,
			color-mix(in srgb, #16140f 86%, var(--color-primary, #c9a84c) 14%) 50%,
			color-mix(in srgb, #1a1814 82%, var(--color-primary, #c9a84c) 18%) 78%,
			color-mix(in srgb, #121212 88%, var(--color-primary, #c9a84c) 12%) 100%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, #161616 90%, #000 10%) 0%,
			#121212 50%,
			color-mix(in srgb, #0e0e0e 92%, #000 8%) 100%
		);
	border-top: 1px solid color-mix(in srgb, var(--color-primary, #c9a84c) 42%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #c9a84c) 34%, transparent);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--color-primary, #c9a84c) 16%, transparent),
		inset 0 -1px 0 color-mix(in srgb, #000 35%, transparent);
}

/* Seamless handoff into premium hero — one continuous chrome band */
body.bb58-layout-premium-hero .bb58-announcement-ticker {
	border-bottom-color: color-mix(in srgb, var(--color-primary, #c9a84c) 28%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-primary, #c9a84c) 16%, transparent);
	background:
		linear-gradient(
			90deg,
			color-mix(in srgb, #121212 88%, var(--color-primary, #c9a84c) 12%) 0%,
			color-mix(in srgb, #1a1814 82%, var(--color-primary, #c9a84c) 18%) 22%,
			color-mix(in srgb, #16140f 86%, var(--color-primary, #c9a84c) 14%) 50%,
			color-mix(in srgb, #1a1814 82%, var(--color-primary, #c9a84c) 18%) 78%,
			color-mix(in srgb, #121212 88%, var(--color-primary, #c9a84c) 12%) 100%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, #161616 90%, #000 10%) 0%,
			#121212 50%,
			var(--bb58-hero-chrome-top, color-mix(in srgb, #121212 86%, var(--color-primary, #c9a84c) 14%)) 100%
		);
}

body.bb58-layout-premium-hero .bb58-announcement-ticker::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--color-primary, #c9a84c) 45%, transparent),
		transparent
	);
	opacity: 0.65;
	pointer-events: none;
}

.bb58-announcement-ticker__inner {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	height: 100%;
	min-height: 44px;
	max-width: 100%;
	padding-inline: clamp(0.75rem, 2vw, 1.5rem);
	line-height: normal;
}

.bb58-announcement-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	min-width: 0;
	color: var(--bb58-ticker-gold);
	padding: 0.2rem 0.55rem 0.2rem 0.2rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-primary, #c9a84c) 7%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--color-primary, #c9a84c) 22%, transparent),
		0 0 22px color-mix(in srgb, var(--color-primary, #c9a84c) 16%, transparent);
}

.bb58-announcement-ticker__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-primary, #c9a84c) 18%, transparent);
	box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary, #c9a84c) 24%, transparent);
}

.bb58-announcement-ticker__icon-svg {
	display: block;
	color: var(--bb58-ticker-gold);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary, #c9a84c) 45%, transparent));
}

.bb58-announcement-ticker__label-text {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 0 16px color-mix(in srgb, var(--color-primary, #c9a84c) 32%, transparent);
}

.bb58-announcement-ticker__divider {
	flex-shrink: 0;
	width: 1px;
	height: 1.25rem;
	background: linear-gradient(
		180deg,
		transparent,
		color-mix(in srgb, var(--color-primary, #c9a84c) 55%, transparent),
		transparent
	);
	opacity: 0.85;
}

.bb58-announcement-ticker__marquee {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	line-height: normal;
}

.bb58-announcement-ticker__viewport {
	display: flex;
	align-items: center;
	height: 100%;
	overflow: hidden;
	line-height: normal;
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.bb58-announcement-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
	will-change: transform;
	line-height: normal;
	animation: bb58-ticker-scroll var(--bb58-ticker-duration) var(--bb58-ticker-ease) infinite;
}

.bb58-announcement-ticker:hover .bb58-announcement-ticker__track,
.bb58-announcement-ticker:focus-within .bb58-announcement-ticker__track {
	animation-play-state: paused;
}

.bb58-announcement-ticker__group {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	padding-inline-end: 1.25rem;
	white-space: nowrap;
	line-height: normal;
}

.bb58-announcement-ticker__item {
	display: inline-flex;
	align-items: center;
	color: color-mix(in srgb, var(--color-text, #f5f0e8) 88%, transparent);
	transition: color 0.25s var(--bb58-header-ease, ease);
}

/* English ticker copy — tuned separately from Chinese (typography-zh.css) */
body.bb58-lang-en .bb58-announcement-ticker__item,
body:not(.bb58-lang-zh) .bb58-announcement-ticker__item {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

@media (min-width: 768px) {
	body.bb58-lang-en .bb58-announcement-ticker__item,
	body:not(.bb58-lang-zh) .bb58-announcement-ticker__item {
		font-size: 1rem;
		line-height: 1.25;
	}
}

.bb58-announcement-ticker__item--link {
	text-decoration: none;
}

.bb58-announcement-ticker__item--link:hover,
.bb58-announcement-ticker__item--link:focus {
	color: var(--bb58-ticker-gold);
}

.bb58-announcement-ticker__sep {
	flex-shrink: 0;
	font-size: 0.5rem;
	line-height: 1;
	color: color-mix(in srgb, var(--color-primary, #c9a84c) 72%, transparent);
	opacity: 0.9;
}

.bb58-announcement-ticker__sep--dot {
	font-size: 0.625rem;
}

.bb58-announcement-ticker__sep--star {
	font-size: 0.5rem;
}

.bb58-announcement-ticker__sep--diamond {
	font-size: 0.45rem;
}

@keyframes bb58-ticker-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* Premium layout spacing: see assets/css/main.css (body.bb58-layout-premium-hero) */

@media (max-width: 767px) {
	.bb58-announcement-ticker {
		min-height: 48px;
		height: 48px;
		overflow: hidden;
	}

	.bb58-announcement-ticker__inner {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		min-height: 48px;
		height: 100%;
		padding-inline: 0.75rem;
		overflow: hidden;
	}

	.bb58-announcement-ticker__label,
	.bb58-announcement-ticker__marquee,
	.bb58-announcement-ticker__viewport,
	.bb58-announcement-ticker__track,
	.bb58-announcement-ticker__group {
		display: flex;
		align-items: center;
		min-height: 0;
		height: 100%;
	}

	.bb58-announcement-ticker__label-text {
		font-size: 0.625rem;
		letter-spacing: 0.1em;
		line-height: 1.2;
	}

	body.bb58-lang-en .bb58-announcement-ticker__item,
	body:not(.bb58-lang-zh) .bb58-announcement-ticker__item {
		display: inline-flex;
		align-items: center;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.25;
		max-height: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bb58-announcement-ticker__group {
		gap: 1rem;
	}
}

@media (max-width: 420px) {
	.bb58-announcement-ticker__label-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.bb58-announcement-ticker__divider {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb58-announcement-ticker__track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		width: 100%;
		max-width: 100%;
	}

	.bb58-announcement-ticker__group:last-child {
		display: none;
	}

	.bb58-announcement-ticker__viewport {
		mask-image: none;
		-webkit-mask-image: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bb58-announcement-ticker__viewport::-webkit-scrollbar {
		display: none;
	}
}