/* ==========================================================================
   [wayvo_wave_text] — see shortcodes/wayvoWaveText.php for the overview.

   The section is TALL (--wv-wave-pin) and the stage inside it is sticky, so
   the stage holds still while the visitor scrolls through the section; the
   JS turns that scroll into the text's travel along the path. A taller pin
   means slower travel and a gentler wave for the same flick of the wheel.

   Full-bleed since the intro (2026-10-20), as the design: --wv-wave-u is
   rendered px per laptop px (100cqw / 1440, 0.5 -> 1.333) and the side
   padding runs 40 -> 80 from 1440 to 1920, as the other new sections. The
   wave's start inset is that padding: the JS reads the panel's
   padding-left. Sticky caveat as in wayvo-frogger-grid.css: an ancestor
   with overflow hidden cancels it silently.

   Vendor fights: h2 / p rules at (0,2,1), over Elementor's and the kit's
   (0,1,1).
   ========================================================================== */

.wv-wave-wrap {
	container-type: inline-size;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.wv-wave {
	/* Scroll distance the stage stays pinned for. 320 -> 420 -> 560 -> 430 (Paul,
	   2026-10-23, twice): more scrolling for the same travel, so the text
	   moves slower and reads more easily. */
	--wv-wave-pin: 430svh;

	/* --wv-cw, not 100cqw (2026-10-21): the text and the dark panel stop at
	   the content width (tokens.css). The light wave still runs to the screen
	   edges, but starts and ends at the column's inset, which is what the JS
	   reads off the panel's padding-left. */
	--wv-wave-u: clamp(0.5px, calc(var(--wv-cw, 100cqw) / 1440), 1.3334px);
	--wv-wave-pad: min(80px, max(calc(40 * var(--wv-wave-u)), calc(var(--wv-cw, 100cqw) / 12 - 80px)));
	--wv-wave-side: calc(var(--wv-wave-pad) + var(--wv-content-gutter, 0px));

	/* Text size: the design's 78 at 1440, by u (so 104 at most). Was
	   clamp(39px, 9.1cqw, 118px) of the content width before the section
	   went full-bleed. The JS reads the computed size off the text element,
	   so this is the one place to tune it. */
	--wv-wave-size: max(39px, calc(78 * var(--wv-wave-u)));

	/* Panel height relative to the text: room for the wave's full swing
	   (the JS caps the bend at ~0.63 of the size either side). */
	--wv-wave-panel-h: calc(var(--wv-wave-size) * 3);

	position: relative;
	height: var(--wv-wave-pin);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

.wv-wave__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
}

.wv-wave__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: var(--wv-wave-panel-h);
	max-height: 100%;
	/* Not visual (the SVG is absolute): the JS reads it as the wave's start
	   and end inset, so the first letter lines up with the intro. */
	padding: 0 var(--wv-wave-side);
	overflow: hidden;
}

/* Dark keeps its rounded ink panel, inset by the side padding. */
.wv-wave--dark .wv-wave__panel {
	width: calc(100% - 2 * var(--wv-wave-side));
	margin-inline: auto;
	border-radius: 24px;
	background-color: var(--wv-ink, #101011);
	color: var(--wv-white, #ffffff);
}

/* ── The intro: "Why it matters" ─────────────────────────────────────────────
   At the top of the sticky stage, the wave centred in the room left under
   it. The design's 180 above the heading is capped at 20% of the screen so
   heading, paragraph and the wave's full swing fit a pinned laptop screen,
   with a floor that clears the floating header. */
.wv-wave--has-intro .wv-wave__stage {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	box-sizing: border-box;
	padding-top: max(110px, min(calc(180 * var(--wv-wave-u)), 20svh));
}

.wv-wave--has-intro .wv-wave__panel {
	flex: none;
	margin-block: auto;
}

.wv-wave__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(20 * var(--wv-wave-u));
	padding: 0 var(--wv-wave-side);
	color: var(--wv-ink, #101011);
}

.wv-wave h2.wv-wave__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(32px, calc(56 * var(--wv-wave-u)));
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Four lines at ~695 wide, breaking after "more" / "brand" / "stops". */
.wv-wave p.wv-wave__lede {
	max-width: 29em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wv-wave-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.wv-wave--light .wv-wave__panel {
	color: var(--wv-ink, #101011);
}

.wv-wave__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.wv-wave__path {
	fill: none;
	stroke: none;
}

/* The JS sizes the viewBox to the panel in CSS px, so this px font size is
   rendered 1:1. */
.wv-wave__text {
	fill: currentColor;
	font-size: var(--wv-wave-size);
	font-weight: 500;
	letter-spacing: -0.03em;
	/* Centre the glyphs on the line rather than sitting them on it, so the
	   swing is symmetrical about the panel's middle. */
	dominant-baseline: central;
	white-space: pre;
}

/* ── The real copy ──────────────────────────────────────────────────────────
   Visible until the JS says the wave is running; visually hidden after, so
   screen readers still get it once. */
.wv-wave__copy {
	margin: 0;
	font-size: clamp(28px, 6cqw, 56px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.wv-wave.is-wave-ready .wv-wave__copy {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Without the JS (or with reduced motion) there is no wave: no pin, no SVG,
   just the paragraph — under the intro when there is one. */
.wv-wave:not(.is-wave-ready) {
	display: flex;
	flex-direction: column;
	gap: 40px;
	height: auto;
}

.wv-wave:not(.is-wave-ready) .wv-wave__copy {
	padding: 0 var(--wv-wave-pad);
}

.wv-wave:not(.is-wave-ready) .wv-wave__stage {
	display: none;
}

.wv-wave--has-intro:not(.is-wave-ready) .wv-wave__stage {
	order: -1;
	display: block;
	position: static;
	height: auto;
}

.wv-wave:not(.is-wave-ready) .wv-wave__panel {
	display: none;
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.wv-wave {
		/* 260 -> 340 -> 455 -> 350, in step with the desktop pin (2026-10-23). */
		--wv-wave-pin: 350svh;
		--wv-wave-pad: 20px;
		--wv-wave-size: clamp(34px, 11.9cqw, 62px);
	}

	.wv-wave--dark .wv-wave__panel {
		border-radius: 16px;
	}

	/* No mobile frame: the intro at the phone type tier, under a header
	   clearance; the wave as before. */
	.wv-wave--has-intro .wv-wave__stage {
		padding-top: 96px;
	}

	.wv-wave__intro {
		gap: 12px;
	}

	.wv-wave h2.wv-wave__title {
		font-size: 32px;
	}

	.wv-wave p.wv-wave__lede {
		font-size: 16px;
		letter-spacing: -0.01em;
	}
}