/* ==========================================================================
   Two-in-one marquee (shared by the homepage and the Links page)

   One sticky bar with two faces. It shows the titles until the page is
   scrolled past the header, then flips to a "back to the top" face that can
   be tapped or clicked. Only the visible face is ever moving, and the text
   travels as several short pieces instead of one very long strip.

   The bar keeps the site's existing .marquee-container and .top-marquee
   classes (styles.css) for its colours, borders and sticky position.
   Behaviour: /js/marquee.js
   ========================================================================== */

.tm {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

.tm-face {
	grid-area: 1 / 1;
	min-width: 0;
	overflow: hidden;
	padding: 10px 0;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.45s;
}

.tm-row {
	display: flex;
	width: max-content;
}

.tm-group {
	display: flex;
	flex-shrink: 0;
	white-space: nowrap;
}

.tm-group span {
	display: block;
	padding: 0 20px;
	font-size: 0.9rem;
	line-height: 20px;
	text-transform: uppercase;
}

.tm.is-ready .tm-group {
	animation: tm-scroll var(--tm-duration, 30s) linear infinite;
}

@keyframes tm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Titles face is showing; the "back to the top" face waits below, hidden and paused */
.tm-face--top {
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.tm:not(.is-top) .tm-face--titles {
	transition-delay: 0s;
}

/* Scrolled: titles slide up and out, "back to the top" slides in */
.tm.is-top .tm-face--titles {
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
}

.tm.is-top .tm-face--top {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.tm:not(.is-top) .tm-face--top .tm-group,
.tm.is-top .tm-face--titles .tm-group {
	animation-play-state: paused;
}

.tm-face--top:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.tm-face {
		transition: none;
	}
}