/**
 * Beacon Ticker — black/gold normal, red/white alert.
 * Matches coast strip language (system UI, gold #c8922a / #dd8500).
 */

.bbb-ticker {
	--bbb-tk-bg: #0c0f14;
	--bbb-tk-text: rgba(247, 243, 234, 0.92);
	--bbb-tk-muted: rgba(247, 243, 234, 0.55);
	--bbb-tk-accent: #c8922a;
	--bbb-tk-accent-hot: #dd8500;
	--bbb-tk-label-bg: #080a0e;
	--bbb-tk-border: rgba(221, 133, 0, 0.32);
	--bbb-tk-sep: rgba(247, 243, 234, 0.35);
	--bbb-tk-duration: 45s;
	--bbb-tk-height: 36px;
	--bbb-tk-type: 0.84rem;
	--bbb-tk-gap: 0.95rem;
	--bbb-tk-sep-size: 7px;

	box-sizing: border-box;
	display: block !important;
	width: 100% !important;
	min-height: var(--bbb-tk-height);
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bbb-tk-bg) !important;
	border-bottom: 1px solid var(--bbb-tk-border);
	color: var(--bbb-tk-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	/* Stay in normal header flow. High z-index covered TagDiv mega / sub-menus. */
	position: relative;
	z-index: 1;
	overflow: hidden;
	clear: both;
}

/* Footer shell before JS relocates — still visible if mount fails */
.bbb-ticker--footer-fallback:not(.bbb-ticker--placed) {
	position: relative;
	z-index: 1;
}

.bbb-ticker *,
.bbb-ticker *::before,
.bbb-ticker *::after {
	box-sizing: border-box;
}

/* Alert: sneaker wave / urgent */
.bbb-ticker--alert {
	--bbb-tk-bg: #b91c1c;
	--bbb-tk-text: #ffffff;
	--bbb-tk-muted: rgba(255, 255, 255, 0.75);
	--bbb-tk-accent: #ffffff;
	--bbb-tk-accent-hot: #fff7ed;
	--bbb-tk-label-bg: #991b1b;
	--bbb-tk-border: rgba(255, 255, 255, 0.25);
	--bbb-tk-sep: rgba(255, 255, 255, 0.55);
}

.bbb-ticker--speed-slow {
	--bbb-tk-duration: 70s;
}

.bbb-ticker--speed-medium {
	--bbb-tk-duration: 45s;
}

.bbb-ticker--speed-fast {
	--bbb-tk-duration: 28s;
}

.bbb-ticker__inner {
	display: flex;
	align-items: stretch;
	min-height: var(--bbb-tk-height);
	max-width: 100%;
	margin: 0 auto;
}

.bbb-ticker__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 0.75rem 0 0.9rem;
	background: var(--bbb-tk-label-bg);
	border-right: 1px solid var(--bbb-tk-border);
	z-index: 2;
	max-width: 42%;
}

.bbb-ticker__label-text {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--bbb-tk-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bbb-ticker--alert .bbb-ticker__label-text {
	color: #ffffff;
	animation: bbb-ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes bbb-ticker-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.72;
	}
}

.bbb-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}

.bbb-ticker__track {
	/* inline-flex + max-content: track is as wide as its items (not clamped to viewport).
	   Without this, flex-shrink can make the track viewport-width and marquee looks frozen. */
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
	width: max-content;
	max-width: none;
	gap: 0;
	white-space: nowrap;
	will-change: transform;
	padding: 0 0.5rem;
}

.bbb-ticker__track--animate {
	animation-name: bbb-ticker-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--bbb-tk-duration);
	animation-play-state: running;
}

/* Explicit pause (JS touch / hover class) */
.bbb-ticker.is-paused .bbb-ticker__track--animate {
	animation-play-state: paused;
}

/* Desktop only: sticky :hover on touch devices freezes the marquee after first tap. */
@media (hover: hover) and (pointer: fine) {
	.bbb-ticker--hover-pause:hover .bbb-ticker__track--animate {
		animation-play-state: paused;
	}
}

@keyframes bbb-ticker-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.bbb-ticker__item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 0.15rem;
	font-size: var(--bbb-tk-type);
	font-weight: 600;
	line-height: 1.25;
	color: var(--bbb-tk-text);
	text-decoration: none !important;
}

a.bbb-ticker__item:hover,
a.bbb-ticker__item:focus-visible {
	color: var(--bbb-tk-accent-hot) !important;
	text-decoration: underline !important;
	outline: none;
}

.bbb-ticker__item--message {
	font-weight: 700;
}

.bbb-ticker--alert .bbb-ticker__item--message {
	text-transform: none;
	letter-spacing: 0.01em;
}

.bbb-ticker__lead {
	display: inline-block;
	flex: 0 0 auto;
	height: 1px;
	pointer-events: none;
	user-select: none;
}

.bbb-ticker__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 var(--bbb-tk-gap);
	color: var(--bbb-tk-accent);
	font-size: 0;
	line-height: 0;
	user-select: none;
	pointer-events: none;
}

.bbb-ticker__sep::before {
	content: "";
	display: block;
	width: var(--bbb-tk-sep-size);
	height: var(--bbb-tk-sep-size);
	background: var(--bbb-tk-accent);
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(200, 146, 42, 0.25);
}

.bbb-ticker--mark-diamond .bbb-ticker__sep::before {
	border-radius: 1px;
	transform: rotate(45deg);
	box-shadow: none;
}

.bbb-ticker--mark-bar .bbb-ticker__sep::before {
	width: 2px;
	height: calc(var(--bbb-tk-sep-size) + 6px);
	border-radius: 1px;
	background: var(--bbb-tk-sep);
	opacity: 1;
	box-shadow: none;
}

.bbb-ticker--mark-slash .bbb-ticker__sep::before {
	content: "/";
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font-size: calc(var(--bbb-tk-type) + 0.05rem);
	font-weight: 700;
	line-height: 1;
	color: var(--bbb-tk-accent);
	opacity: 0.85;
}

.bbb-ticker--mark-none .bbb-ticker__sep::before {
	display: none;
}

.bbb-ticker--mark-star .bbb-ticker__sep::before {
	width: calc(var(--bbb-tk-sep-size) * 1.45);
	height: calc(var(--bbb-tk-sep-size) * 1.45);
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.bbb-ticker--mark-spark .bbb-ticker__sep::before {
	width: calc(var(--bbb-tk-sep-size) * 1.55);
	height: calc(var(--bbb-tk-sep-size) * 1.55);
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(
		50% 0%,
		56% 34%,
		82% 8%,
		66% 42%,
		100% 50%,
		66% 58%,
		82% 92%,
		56% 66%,
		50% 100%,
		44% 66%,
		18% 92%,
		34% 58%,
		0% 50%,
		34% 42%,
		18% 8%,
		44% 34%
	);
}

.bbb-ticker--mark-ring .bbb-ticker__sep::before {
	background: transparent;
	border: 2px solid var(--bbb-tk-accent);
	box-shadow: none;
	box-sizing: border-box;
	opacity: 1;
}

.bbb-ticker--mark-square .bbb-ticker__sep::before {
	border-radius: 1px;
	transform: none;
	box-shadow: none;
}

.bbb-ticker--mark-triangle .bbb-ticker__sep::before {
	width: calc(var(--bbb-tk-sep-size) * 1.2);
	height: calc(var(--bbb-tk-sep-size) * 1.05);
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.bbb-ticker--mark-bolt .bbb-ticker__sep::before {
	width: calc(var(--bbb-tk-sep-size) * 1.2);
	height: calc(var(--bbb-tk-sep-size) * 1.9);
	border-radius: 0;
	box-shadow: none;
	clip-path: polygon(68% 0%, 8% 56%, 40% 56%, 26% 100%, 92% 36%, 58% 36%);
}

.bbb-ticker--mark-dash .bbb-ticker__sep::before,
.bbb-ticker--mark-bullet .bbb-ticker__sep::before,
.bbb-ticker--mark-middot .bbb-ticker__sep::before,
.bbb-ticker--mark-chevron .bbb-ticker__sep::before,
.bbb-ticker--mark-plus .bbb-ticker__sep::before,
.bbb-ticker--mark-asterisk .bbb-ticker__sep::before,
.bbb-ticker--mark-pipe .bbb-ticker__sep::before,
.bbb-ticker--mark-wave .bbb-ticker__sep::before,
.bbb-ticker--mark-dots .bbb-ticker__sep::before {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	clip-path: none;
	font-weight: 700;
	line-height: 1;
	color: var(--bbb-tk-accent);
	opacity: 0.9;
}

.bbb-ticker--mark-dash .bbb-ticker__sep::before {
	content: "—";
	font-size: max(0.72rem, calc(var(--bbb-tk-sep-size) * 1.35));
	font-weight: 600;
	letter-spacing: -0.04em;
}

.bbb-ticker--mark-bullet .bbb-ticker__sep::before {
	content: "•";
	font-size: max(0.95rem, calc(var(--bbb-tk-sep-size) * 2));
}

.bbb-ticker--mark-middot .bbb-ticker__sep::before {
	content: "·";
	font-size: max(1.05rem, calc(var(--bbb-tk-sep-size) * 2.2));
	font-weight: 800;
}

.bbb-ticker--mark-chevron .bbb-ticker__sep::before {
	content: "›";
	font-size: max(1.05rem, calc(var(--bbb-tk-sep-size) * 2.15));
	font-weight: 600;
}

.bbb-ticker--mark-plus .bbb-ticker__sep::before {
	content: "+";
	font-size: max(0.85rem, calc(var(--bbb-tk-sep-size) * 1.7));
}

.bbb-ticker--mark-asterisk .bbb-ticker__sep::before {
	content: "*";
	font-size: max(0.95rem, calc(var(--bbb-tk-sep-size) * 1.9));
	font-weight: 600;
}

.bbb-ticker--mark-pipe .bbb-ticker__sep::before {
	content: "|";
	font-size: max(0.78rem, calc(var(--bbb-tk-sep-size) * 1.55));
	font-weight: 500;
	opacity: 0.7;
	color: var(--bbb-tk-sep);
}

.bbb-ticker--mark-wave .bbb-ticker__sep::before {
	content: "~";
	font-size: max(1rem, calc(var(--bbb-tk-sep-size) * 2));
	font-weight: 700;
}

.bbb-ticker--mark-dots .bbb-ticker__sep::before {
	content: "···";
	font-size: max(0.72rem, calc(var(--bbb-tk-sep-size) * 1.45));
	letter-spacing: 0.08em;
	font-weight: 800;
}

.bbb-ticker--sep-small {
	--bbb-tk-sep-size: 4px;
}

.bbb-ticker--sep-medium {
	--bbb-tk-sep-size: 6px;
}

.bbb-ticker--sep-large {
	--bbb-tk-sep-size: 8px;
}

.bbb-ticker--sep-xlarge {
	--bbb-tk-sep-size: 11px;
}

.bbb-ticker--gap-tight {
	--bbb-tk-gap: 0.55rem;
}

.bbb-ticker--gap-normal {
	--bbb-tk-gap: 0.95rem;
}

.bbb-ticker--gap-wide {
	--bbb-tk-gap: 1.45rem;
}

.bbb-ticker--type-compact {
	--bbb-tk-type: 0.76rem;
}

.bbb-ticker--type-regular {
	--bbb-tk-type: 0.84rem;
}

.bbb-ticker--type-large {
	--bbb-tk-type: 0.95rem;
}

.bbb-ticker--bar-compact {
	--bbb-tk-height: 32px;
}

.bbb-ticker--bar-regular {
	--bbb-tk-height: 36px;
}

.bbb-ticker--bar-roomy {
	--bbb-tk-height: 44px;
}

.bbb-ticker--no-fade .bbb-ticker__viewport {
	mask-image: none;
	-webkit-mask-image: none;
}

.bbb-ticker--live .bbb-ticker__label-text {
	overflow: visible;
}

.bbb-ticker--live .bbb-ticker__label-text::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 0.28em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: var(--bbb-tk-accent-hot);
	box-shadow: 0 0 0 0 rgba(221, 133, 0, 0.55);
	animation: bbb-ticker-pip 1.8s ease-out infinite;
	vertical-align: 0.05em;
}

@keyframes bbb-ticker-pip {
	0% {
		box-shadow: 0 0 0 0 rgba(221, 133, 0, 0.55);
		opacity: 1;
	}
	70% {
		box-shadow: 0 0 0 6px rgba(221, 133, 0, 0);
		opacity: 0.85;
	}
	100% {
		box-shadow: 0 0 0 0 rgba(221, 133, 0, 0);
		opacity: 1;
	}
}

.bbb-ticker__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.2em;
	height: 1.2em;
	margin-right: 0.4em;
	padding: 0 0.22em;
	border-radius: 999px;
	font-size: 0.68em;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	background: rgba(200, 146, 42, 0.22);
	color: var(--bbb-tk-accent);
}

.bbb-ticker__item--rank-1 {
	color: #f3c14b;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.bbb-ticker__item--rank-1 .bbb-ticker__rank {
	background: var(--bbb-tk-accent-hot);
	color: #0c0f14;
}

.bbb-ticker--glow .bbb-ticker__item--rank-1 {
	text-shadow: 0 0 10px rgba(221, 133, 0, 0.45);
}

.bbb-ticker__item--rank-2 {
	color: #e0b24a;
	font-weight: 700;
}

.bbb-ticker__item--rank-2 .bbb-ticker__rank {
	background: var(--bbb-tk-accent);
	color: #0c0f14;
}

.bbb-ticker__item--rank-3 {
	color: #d7c39a;
	font-weight: 700;
}

.bbb-ticker__item--rank-3 .bbb-ticker__rank {
	background: rgba(247, 243, 234, 0.16);
	color: #f7f3ea;
}

.bbb-ticker--alert .bbb-ticker__item--rank-1 {
	color: #fff7ed;
	font-weight: 800;
}

.bbb-ticker--alert .bbb-ticker__item--rank-2,
.bbb-ticker--alert .bbb-ticker__item--rank-3 {
	color: #ffffff;
}

.bbb-ticker--alert .bbb-ticker__rank {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.bbb-ticker--alert .bbb-ticker__item--rank-1 .bbb-ticker__rank {
	background: #ffffff;
	color: #991b1b;
}

.bbb-ticker--alert.bbb-ticker--glow .bbb-ticker__item--rank-1 {
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.bbb-ticker--alert.bbb-ticker--live .bbb-ticker__label-text::before {
	background: #ffffff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
	animation-name: bbb-ticker-pip-alert;
}

@keyframes bbb-ticker-pip-alert {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
	}
	70% {
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.bbb-ticker__placeholder {
	font-size: 0.8rem;
	color: var(--bbb-tk-muted);
	padding: 0 0.5rem;
	font-weight: 500;
}

.bbb-ticker__empty {
	font-size: 0.8rem;
	color: var(--bbb-tk-muted);
	padding: 0 0.5rem;
}

/* Reduced motion: static wrap / no marquee */
.bbb-ticker--static .bbb-ticker__viewport {
	mask-image: none;
	-webkit-mask-image: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bbb-ticker--static .bbb-ticker__track {
	animation: none !important;
	transform: none !important;
	padding: 0 0.65rem;
}

.bbb-ticker--static .bbb-ticker__item {
	white-space: nowrap;
}

/* Footer fallback before JS relocates — hide until placed (sitewide only) */
.bbb-ticker--footer-fallback:not(.bbb-ticker--placed) {
	/* still visible at bottom briefly is ok; prefer not flash mid-layout */
}

.bbb-ticker--sitewide.bbb-ticker--placed {
	/* after mount under header */
}

@media (max-width: 782px) {
	.bbb-ticker {
		--bbb-tk-height: 40px;
		--bbb-tk-duration: 32s;
	}

	.bbb-ticker--bar-compact {
		--bbb-tk-height: 36px;
	}

	.bbb-ticker--bar-regular {
		--bbb-tk-height: 40px;
	}

	.bbb-ticker--bar-roomy {
		--bbb-tk-height: 46px;
	}

	.bbb-ticker--speed-slow {
		--bbb-tk-duration: 48s;
	}

	.bbb-ticker--speed-medium {
		--bbb-tk-duration: 32s;
	}

	.bbb-ticker--speed-fast {
		--bbb-tk-duration: 22s;
	}

	.bbb-ticker__label {
		padding: 0 0.55rem 0 0.65rem;
		max-width: 38%;
	}

	.bbb-ticker__label-text {
		font-size: 0.65rem;
		letter-spacing: 0.08em;
	}

	.bbb-ticker__item {
		font-size: var(--bbb-tk-type);
	}

	.bbb-ticker--type-compact {
		--bbb-tk-type: 0.74rem;
	}

	.bbb-ticker--type-regular {
		--bbb-tk-type: 0.8rem;
	}

	.bbb-ticker--type-large {
		--bbb-tk-type: 0.9rem;
	}

	.bbb-ticker__sep {
		padding: 0 var(--bbb-tk-gap);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Keep marquee (JS slows it). Only drop the alert label pulse. */
	.bbb-ticker--alert .bbb-ticker__label-text {
		animation: none;
	}
}