/* LNC Editorial - news strip (1.3.0). Markup: inc/news-strip.php. Behaviour: assets/js/news-strip.js.
   Replaces the red breaking-news scroller. Colours come from the theme tokens, so dark mode
   follows the site with no extra rules. */

.news-strip {
	--ns-h: 32px;
	--ns-dwell: 7s;
	position: relative;
	background: var(--c-paper-alt);
	border-bottom: 1px solid var(--c-rule);
	font-family: var(--ff-sans);
	font-size: 13px;
	line-height: 1;
}
.news-strip__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	height: var(--ns-h);
}
.news-strip__label {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-right: 14px;
	border-right: 1px solid var(--c-rule);
	color: var(--c-accent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
/* Blue dot with a slow halo: the one bright thing in an otherwise grey strip. */
.news-strip__label::before,
.news-strip__label::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 8px 1px var(--c-accent);
}
.news-strip__label::after {
	position: absolute;
	left: 0;
	opacity: 0;
	animation: ns-halo 2.6s ease-out infinite;
}
@keyframes ns-halo {
	0%   { opacity: .55; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(3.2); }
}

/* All headlines share one grid cell and cross-fade in place. */
.news-strip__stage {
	flex: 1;
	min-width: 0;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.news-strip__item {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(5px);
	transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1), visibility 0s .6s;
}
.news-strip__item.is-leaving { transform: translateY(-5px); }
.news-strip__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: .18s, .18s, 0s;   /* enter just after the old one starts to clear */
}
.news-strip__item a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--ns-h);
	color: var(--c-ink-soft);
	font-weight: 500;
	text-decoration: none;
}
.news-strip__cat {
	flex: none;
	color: var(--c-accent);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.news-strip__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.news-strip__item a::after {
	content: "\2192";
	flex: none;
	margin-left: -2px;
	color: var(--c-accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s, transform .2s;
}
.news-strip__item a:hover,
.news-strip__item a:focus-visible { color: var(--c-ink); }
.news-strip__item a:hover .news-strip__title,
.news-strip__item a:focus-visible .news-strip__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-strip__item a:hover::after,
.news-strip__item a:focus-visible::after { opacity: 1; transform: none; }

.news-strip__pause {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--c-muted);
	cursor: pointer;
	opacity: .6;
	transition: opacity .2s, color .2s;
}
.news-strip__pause:hover,
.news-strip__pause:focus-visible { opacity: 1; color: var(--c-ink); }
.news-strip__pause svg { fill: currentColor; }
.news-strip__pause .p-play,
.news-strip__pause[aria-pressed="true"] .p-pause { display: none; }
.news-strip__pause[aria-pressed="true"] .p-play { display: inline; }

/* The bar is the rotation timer and is never drawn: when its animation ends, the next headline
   shows. Hover, keyboard focus and the pause button all freeze it, and with it the rotation. */
.news-strip__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}
.news-strip.is-live .news-strip__bar { animation: ns-fill var(--ns-dwell) linear forwards; }
.news-strip:hover .news-strip__bar,
.news-strip:focus-within .news-strip__bar,
.news-strip.is-paused .news-strip__bar { animation-play-state: paused; }

/* The visible part: a soft blue glow resting on the bottom edge that slowly breathes. It does not
   travel, so nothing sweeps across the page. */
.news-strip::after {
	content: "";
	position: absolute;
	left: 12%; right: 12%; bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-accent) 30%, var(--c-accent) 70%, transparent);
	box-shadow: 0 0 12px 2px var(--c-accent);
	opacity: .12;
	pointer-events: none;
	animation: ns-breathe 6s ease-in-out infinite;
}
@keyframes ns-breathe {
	0%, 100% { opacity: .12; }
	50%      { opacity: .42; }
}
@keyframes ns-fill { to { transform: scaleX(1); } }

@media (max-width: 600px) {
	.news-strip { --ns-h: 34px; }
	.news-strip__label { display: none; }
	.news-strip__inner { gap: 10px; }
}
@media (max-width: 480px) { .news-strip__cat { display: none; } }   /* give the headline the room */

@media (prefers-reduced-motion: reduce) {
	.news-strip__item,
	.news-strip__item.is-active { transition: none; transform: none; }
	.news-strip::after { animation: none; opacity: .25; }
	.news-strip__label::after { animation: none; }
}

@media print { .news-strip { display: none; } }