/* Bayside Live Feed — frontend ticker
   All colors/sizes come from CSS custom properties set inline per the admin settings. */

.blf-feed {
	--blf-bg: #0a1f44;
	--blf-name: #ffffff;
	--blf-course: #37c2c4;
	--blf-meta: #8aa0c4;
	--blf-pill: #ff5a5f;
	--blf-reported: #34d399;
	--blf-fs: 14px;

	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	background: var(--blf-bg);
	font-size: var(--blf-fs);
	line-height: 1.2;
	font-family: inherit;
	overflow: hidden;
}

/* LIVE pill pinned at the start, with a soft fade so items slide under it. */
.blf-live {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .85em 1.1em;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blf-name);
	background: var(--blf-bg);
	box-shadow: 18px 0 22px -6px var(--blf-bg);
	white-space: nowrap;
}

.blf-dot {
	width: .55em;
	height: .55em;
	border-radius: 50%;
	background: var(--blf-pill);
	box-shadow: 0 0 0 0 var(--blf-pill);
	animation: blf-pulse 1.8s ease-out infinite;
}
@keyframes blf-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blf-pill) 70%, transparent); }
	70%  { box-shadow: 0 0 0 .6em transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.blf-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.blf-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: blf-scroll var(--blf-duration, 40s) linear infinite;
}
.blf-feed[data-direction="right"] .blf-track { animation-direction: reverse; }

@keyframes blf-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* track is two identical halves → seamless */
}

.blf-feed[data-pause-hover="1"]:hover .blf-track { animation-play-state: paused; }

.blf-item {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .85em 0;
	margin: 0 1.75em;
	white-space: nowrap;
	color: var(--blf-meta);
}

.blf-icon {
	display: inline-flex;
	color: var(--blf-course);
	margin-right: .15em;
}

.blf-name   { color: var(--blf-name); font-weight: 700; }
.blf-verb   { color: var(--blf-meta); }
.blf-course { color: var(--blf-course); font-weight: 600; }
.blf-time   { color: var(--blf-meta); opacity: .85; margin-left: .25em; }

.blf-reported {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-left: .6em;
	padding: .15em .5em;
	border-radius: 999px;
	font-size: .82em;
	font-weight: 600;
	color: var(--blf-reported);
	background: color-mix(in srgb, var(--blf-reported) 16%, transparent);
}
.blf-reported svg { width: .9em; height: .9em; }

/* Accessibility: no auto-scroll for users who ask for reduced motion —
   the strip becomes a quiet, horizontally scrollable row instead. */
@media (prefers-reduced-motion: reduce) {
	.blf-track { animation: none; }
	.blf-viewport { overflow-x: auto; }
}

@media (max-width: 600px) {
	.blf-feed { --blf-fs: 13px; }
	.blf-live { padding: .75em .8em; letter-spacing: .08em; }
	.blf-item { margin: 0 1.15em; }
}