/* Wayvo top banner
   Sits above the floating header, full-bleed, and scrolls away with the page.

   Same convention as customHeader.css: --wayvo-banner-scale is a length meaning
   "rendered px per design px", multiplied by unitless design numbers.

   Unlike the header, the numbers below are NOT the raw export values. The banner's
   font-size came through as 8.53333px - decimals, so a scaled instance reading, where
   the header's 12px was a clean style definition. Dividing the whole export back by
   the sheet's 0.7111 gives round numbers throughout (32 height, 8/16 padding, 12
   font), and that 12 matches the header's nav style exactly - the two were always the
   same type size. Those 1x values are what's used here, so x1.25 puts the banner text
   at 15px alongside the nav's 15px.

   The export's `gap: 355.56px` is a Figma auto-layout artifact from how the mock
   centres its single text node - there's nothing to space here, so it's not carried
   over. */

.wayvo-banner {
	--wayvo-banner-scale: 1.25px;

	--wayvo-banner-height: calc(32 * var(--wayvo-banner-scale));
	--wayvo-banner-padding-y: calc(8 * var(--wayvo-banner-scale));
	--wayvo-banner-padding-x: calc(16 * var(--wayvo-banner-scale));
	--wayvo-banner-font-size: calc(12 * var(--wayvo-banner-scale));

	display: flex;
	justify-content: center;
	align-items: center;
	/* min-height rather than height: a long message wrapping on a narrow screen has to
	   be able to make the bar taller instead of spilling out of it. */
	min-height: var(--wayvo-banner-height);
	padding: var(--wayvo-banner-padding-y) var(--wayvo-banner-padding-x);
	background: #101011;
	box-sizing: border-box;
}

/* All messages occupy the same grid cell so they can cross-fade over one another,
   and the cell takes the height of the tallest - which is what keeps the bar stable
   when only some of the messages wrap. */
.wayvo-banner__viewport {
	display: grid;
	width: 100%;
}

.wayvo-banner__message {
	grid-area: 1 / 1;
	margin: 0;
	/* nowrap + hidden is what creates the overflow the scroll reacts to. It also means
	   a long message can no longer wrap to two lines and change the bar's height, so
	   the header's clearance stays put. */
	white-space: nowrap;
	overflow: hidden;
	font-family: "Geist", "Geist Sans", sans-serif;
	font-size: var(--wayvo-banner-font-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	/* Figma: font-feature-settings 'tnum' on, 'lnum' on. */
	font-variant-numeric: lining-nums tabular-nums;
	color: #ffffff;
	text-align: center;
	opacity: 0;
	/* visibility keeps the inactive messages' links out of the tab order; the delay
	   holds it until the fade has finished rather than cutting it short. */
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.wayvo-banner__message.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}

.wayvo-banner__chunk {
	display: inline-block;
	white-space: nowrap;
}

/* --- Overflow scrolling -----------------------------------------------------------
   Applied by js/topBanner.js only to messages that are actually wider than the bar,
   so short messages stay centred and still. The track holds the original chunk plus a
   clone, and slides left by exactly one chunk-plus-gap - at which point the clone sits
   where the original started, so the loop has no visible seam or empty gap. */

.wayvo-banner__message.is-scrolling {
	text-align: left;
}

.wayvo-banner__message.is-scrolling .wayvo-banner__text {
	display: inline-flex;
	align-items: center;
	gap: var(--wayvo-banner-scroll-gap, 3em);
	will-change: transform;
}

/* Restricted to the visible message: an animation on a hidden one would still burn
   frames for no reason. */
.wayvo-banner__message.is-scrolling.is-active .wayvo-banner__text {
	animation: wayvo-banner-scroll var(--wayvo-banner-scroll-duration, 12s) linear infinite;
}

@keyframes wayvo-banner-scroll {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-1 * var(--wayvo-banner-scroll-shift, 0px)));
	}

}

/* Freezes the scroll for anyone reading it or tabbing into a link, matching the way
   the rotation itself pauses. */
.wayvo-banner:hover .wayvo-banner__text,
.wayvo-banner:focus-within .wayvo-banner__text {
	animation-play-state: paused;
}

/* Sized in em so the stars track the banner's type rather than needing their own
   breakpoint - 1.2em against a 1.4 line-height sits inside the line box without
   stretching the bar. Width follows from the file's 5:1 ratio. */
.wayvo-banner__stars {
	height: 1.2em;
	width: auto;
	margin-left: 0.4em;
	vertical-align: middle;
}

.wayvo-banner__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wayvo-banner__link:hover,
.wayvo-banner__link:focus {
	color: inherit;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {

	.wayvo-banner__message {
		transition: none;
		/* Nothing scrolls under reduced motion, so long messages have to be allowed to
		   wrap instead - otherwise the overflow would simply be unreadable. The script
		   skips cloning in this mode, so there's no duplicate to appear on line two. */
		white-space: normal;
	}

	.wayvo-banner__text {
		animation: none;
	}

}

/* Matches the header's mobile breakpoint and its fluid scale, so the banner and the
   bar grow together rather than one of them stranding at desktop size on a phone. */
@media (max-width: 768px) {

	.wayvo-banner {
		--wayvo-banner-scale: clamp(1px, 0.25vw, 1.35px);
	}

}