/**
 * The conditions ticker.
 *
 * Deliberately quiet: it sits on the club's own photographs, so it is a dark
 * translucent band with white numerals and nothing else — no borders, no
 * shadows, no accent colour competing with the picture. The numbers are
 * tabular so a changing wind speed does not shuffle the line sideways.
 */

.sscw-ticker {
	--sscw-ticker-duration: 45s;

	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	/* Not clipped here: the scrolling lane clips itself (.sscw-ticker__viewport),
	   and the lamp's tooltip has to be able to stand above the band — over a
	   slideshow the band is at the very bottom of the screen, so a tooltip
	   below it would be off the page. */
	background: linear-gradient(to top, rgba(4, 12, 26, 0.78), rgba(4, 12, 26, 0.5));
	color: #fff;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 0.8125rem;
	line-height: 1;
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	backdrop-filter: blur(6px) saturate(120%);
}

/* Over a slide: pinned to the foot of whatever positioned box contains it. */
.sscw-ticker--overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
}

/*
 * The ident: the name of the band and the age of what is on it, held still at
 * the left. Quiet — it is a caption, not a headline — but never scrolling,
 * because "how old is this?" must be answerable at any moment.
 */
.sscw-ticker__ident {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0 0.9rem 0 1rem;
	white-space: nowrap;
}

.sscw-ticker__ident-name {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	align-self: center;
	color: inherit;
}

/* A link only looks like one on approach: the band is a readout first. */
a.sscw-ticker__ident-name {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

a.sscw-ticker__ident-name:hover,
a.sscw-ticker__ident-name:focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}

a.sscw-ticker__ident-name:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * The reading's age, as a lamp.
 *
 * Six words of "updated 12s ago" was the widest thing on a band whose point
 * is the readings, and nobody reads the number anyway — they want to know
 * whether to believe the wind. Three states answer that:
 *
 *   green, pulsing  the station is reporting
 *   amber, still    the reading is getting on
 *   red, still      nothing has arrived for longer than the stale window
 *
 * Only the fresh state moves. A pulse says "live"; a pulsing red lamp would
 * say the fault is live, which is not the same thing and not true.
 *
 * The sentence survives as the dot's title and accessible label, which is
 * where somebody who does want the number will look.
 */
/* The lamp and its tooltip travel together. */
.sscw-ticker__age {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
}

.sscw-ticker__ident-age {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	color: #34d399;
	cursor: help;
	transition: color 0.4s ease;
}

.sscw-ticker__ident-age:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * The lamp says whether to believe the band; the tooltip says why. It stands
 * *above* the dot because over a slideshow the band sits on the bottom edge of
 * the screen, and it is not hit-testable, so hovering it cannot make it flee.
 */
.sscw-ticker__tip {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 50%;
	z-index: 3;
	transform: translate(-50%, 4px);
	padding: 0.35rem 0.6rem;
	border-radius: 6px;
	background: #0b1b34;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* The little nib, so it reads as belonging to the dot. */
.sscw-ticker__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -4px;
	border: 4px solid transparent;
	border-top-color: #0b1b34;
}

.sscw-ticker__ident-age:hover + .sscw-ticker__tip,
.sscw-ticker__ident-age:focus-visible + .sscw-ticker__tip,
.sscw-ticker__age:hover .sscw-ticker__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.sscw-ticker__tip {
		transition: none;
		transform: translate(-50%, 0);
	}
}

.sscw-ticker__ident-age[data-freshness="fresh"] {
	color: #34d399;
}

.sscw-ticker__ident-age[data-freshness="ageing"] {
	color: #fbbf24;
}

.sscw-ticker__ident-age[data-freshness="stale"] {
	color: #fb7185;
}

@media (prefers-reduced-motion: no-preference) {
	.sscw-ticker__ident-age[data-freshness="fresh"] {
		animation: sscw-ticker-pulse 2.4s ease-in-out infinite;
	}
}

@keyframes sscw-ticker-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
	}

	70% {
		box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);
	}
}

/*
 * Simulated data, as a watermark over the middle of the band: small, dim, and
 * impossible either to switch off or to scroll out of sight.
 *
 * The plate behind it is opaque, with a soft halo instead of a hard edge. A
 * translucent one left the mark and the reading passing behind it illegible
 * as either; a value is briefly hidden here instead, and comes round again.
 */
.sscw-ticker__demo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: #08111f;
	box-shadow: 0 0 0 7px rgba(8, 17, 31, 0.72), 0 0 14px 10px rgba(8, 17, 31, 0.45);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.sscw-ticker__viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	/* Faded on the right only, where readings arrive: a value should appear
	   rather than pop. The left edge is a hard clip against the ident, as on a
	   television ticker — fading it too dimmed the first reading on the screen
	   before it had ever scrolled. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.sscw-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: sscw-ticker-scroll var(--sscw-ticker-duration) linear infinite;
}

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

.sscw-ticker__run {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.sscw-ticker__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.75rem 0;
	margin-right: 2.25rem;
	white-space: nowrap;
}

/* The separator is a mark between readings, not a bullet list. */
.sscw-ticker__item::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-left: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transform: translateY(-0.2em);
}

.sscw-ticker__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.sscw-ticker__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.005em;
}

/* A reading nobody has refreshed is dimmed rather than hidden: the member can
   see there is a number and that it is old. */
.sscw-ticker--stale .sscw-ticker__value {
	color: rgba(255, 255, 255, 0.55);
}

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

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

/*
 * Motion off: the bar stops being a ticker and becomes a strip you can push
 * sideways. The duplicate run would be dead weight, so it goes.
 */
@media (prefers-reduced-motion: reduce) {
	.sscw-ticker__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: none;
	}

	.sscw-ticker__viewport::-webkit-scrollbar {
		display: none;
	}

	.sscw-ticker__track {
		animation: none;
	}

	.sscw-ticker__run[aria-hidden="true"] {
		display: none;
	}
}