/*
 * rekos/hero-split: solution, sector and Apie mus heroes.
 * Figma desktop (1440 × 800 with the 92 px header): solution 542:4628, sector 215:4823,
 * Apie mus 339:2013. Mobile (375): 1006:2719 (865 tall), 1018:19793 (900), 1027:4291 (870).
 * Tokens only. The literal px values are the Figma geometry of this one layout (column,
 * list, button and photo widths, photo ratios, outline offsets); they are declared once as
 * --rk-hs-* properties at the top.
 *
 * Desktop (≥1200): row = copy column 585 | photo, vertically centred, justify-between.
 *   Solution (no arc): photo 646 × 548, radius 30 (token 32), row 56 below the header, 104
 *   below the row. Sector / Apie mus (arc on): photo 629 × 510, row 64 below the header,
 *   134 below (136 here: 80 + 56). Heading 36/1.4 mono 800 uppercase; 24 to the checklist
 *   (498 wide, rows 8 apart, 20 px gradient check + 16 + 16/24 regular) or 16 to the text
 *   (16/24, 498 wide); 24 to the ring button (200 × 44, ring 1 + 4).
 *   Outline (Figma vector 542:4631 / 872:2163): 1 px Edrana gradient line at 30 % opacity,
 *   top lines from the screen edges curving down 26.6 px inside the content edges (24 here,
 *   as link-cards-split), U-shape below. "full": from 6.5 above the row to 34.5 below it;
 *   "low": 377 tall, bottom 43 below the row. Not drawn below 1200 (no mobile vector).
 *   Motion: drawn once from left to right on page load (§ Line draw at the end).
 * Mobile (<768): header 64; content 10 below it (12 here); heading 30/1.4; checklist and
 *   text 14/20; full-width ring button (343 × 50 with the ring); 48 to the photo (343 wide,
 *   same ratios, radius 20); 72 below.
 * Tablet (derived, not in Figma): 768–1023 stacked like mobile with desktop type, inline
 *   button and the photo at most 646 wide; 1024–1199 two equal columns.
 *
 * As the first block of the page the section moves up under the transparent header
 * (--rk-header-height from base.css), so the gradient runs behind it as in Figma.
 */

.rk-hero-split {
	--rk-hs-copy-width: 585px;
	--rk-hs-list-width: 498px;
	--rk-hs-cta-width: 200px;
	--rk-hs-media-width: 646px;
	--rk-hs-media-ratio: 646 / 548;
	--rk-hs-outline-above: 6px;
	--rk-hs-outline-below: 35px;
	--rk-hs-outline-low-below: 43px;
	--rk-hs-outline-low-height: 377px;
	--rk-hs-ring: calc(var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width));
	--rk-hs-offset: 0px;
	--rk-hs-pad-top: var(--wp--preset--spacing--30);
	--rk-hs-pad-bottom: var(--wp--preset--spacing--80);

	position: relative;
	isolation: isolate;
	overflow-x: clip;
	padding-block: var(--rk-hs-pad-top) var(--rk-hs-pad-bottom);
	background: var(--wp--preset--gradient--hero-edrana);
	color: var(--wp--preset--color--contrast);
}

/* Arc variant: the sector / Apie mus photo frame (629 × 510). */
.rk-hero-split--arc {
	--rk-hs-media-width: 629px;
	--rk-hs-media-ratio: 629 / 510;
}

/*
 * First block of the post content: the section starts at the top of the page, behind the
 * header (no background, higher z-index). 0-3-0 beats base.css's 0-1-1 "margin-block: 0"
 * for sections. Not in the editor canvas (no .wp-block-post-content parent there).
 */
.wp-block-post-content > .rk-hero-split:first-child {
	--rk-hs-offset: var(--rk-header-height);
	margin-block-start: calc(-1 * var(--rk-header-height));
	padding-block-start: calc(var(--rk-header-height) + var(--rk-hs-pad-top));
}

.rk-hero-split__inner {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--40));
}

/* ---------- Copy ---------- */

.rk-hero-split__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	overflow-wrap: break-word;
}

/* .rk-hero-split prefix: beats the 0-0-1 theme.json h1 element styles. */
.rk-hero-split .rk-hero-split__heading {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
	text-wrap: balance; /* below 1200: even lines (pretty did not fix lone words in Chrome); 1400+: Figma breaks, see end */
}

.rk-hero-split__text {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

.rk-hero-split__checklist {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-self: stretch;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.rk-hero-split__check {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.43;
}

/* 20 px gradient check (Figma "check", 542:4692). */
.rk-hero-split__check .rk-icon {
	inline-size: 20px;
	block-size: 20px;
}

.rk-hero-split__check-text {
	min-width: 0;
}

/*
 * Buttons. The ring of .rk-btn--ring (base.css) sits in the button's 5 px margin, so the
 * Figma gap (24) is the container's margin. The outline button gets the same margin, so
 * both line up. Mobile: full width, stacked.
 */
.rk-hero-split__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
}

.rk-hero-split .rk-hero-split__cta2 {
	margin: var(--rk-hs-ring);
}

.rk-hero-split__content > :first-child {
	margin-block-start: 0;
}

/* ---------- Photo, arc, UI card ---------- */

.rk-hero-split__media {
	position: relative;
	flex: none;
	width: 100%;
	min-width: 0;
	margin: 0;
	aspect-ratio: var(--rk-hs-media-ratio);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--media);
	background: var(--wp--preset--color--surface-2);
	/* Size container: the HTML UI card group is sized in cqw of the photo frame. */
	container-type: inline-size;
}

/* The photo fills the frame; the arc overlay has the frame's own size and ratio. */
.rk-hero-split .rk-hero-split__photo,
.rk-hero-split .rk-hero-split__arc {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

.rk-hero-split .rk-hero-split__photo {
	object-fit: cover;
}

.rk-hero-split__arc {
	pointer-events: none;
}

/*
 * Own UI card image (overlay_image): width and position as % of the frame, so it scales
 * with the photo. "figma" = the design photo's card box (inline custom properties from
 * render.php); the corners are for other positions.
 */
.rk-hero-split .rk-hero-split__card {
	position: absolute;
	display: block;
	width: var(--rk-hs-card-w, 48%);
	max-width: none;
	height: auto;
	pointer-events: none;
}

.rk-hero-split__card--figma {
	top: var(--rk-hs-card-y);
	left: var(--rk-hs-card-x);
}

.rk-hero-split__card--bottom-right,
.rk-hero-split__ui--bottom-right {
	right: 7%;
	bottom: 9%;
}

.rk-hero-split__card--bottom-left,
.rk-hero-split__ui--bottom-left {
	bottom: 9%;
	left: 7%;
}

.rk-hero-split__card--top-right,
.rk-hero-split__ui--top-right {
	top: 9%;
	right: 7%;
}

.rk-hero-split__card--top-left,
.rk-hero-split__ui--top-left {
	top: 9%;
	left: 7%;
}

/*
 * ---------- UI card group (HTML: ui/*.php, printed by ui/card-group.php) ----------
 * A picture built from HTML. Every number in the markup is Figma px of the desktop group,
 * multiplied here by --rk-hs-u = one Figma px of the 646 px photo frame (100cqw / 646; the
 * figure is the size container). So the group, its text and its strokes scale with the
 * photo like the former image, at every width (375: × 343 / 646). Older browsers without
 * container units: 1px (desktop size) or the mobile content width.
 * Type: Open Sans (body), line-height 1, the Figma size and weight per element.
 * Colours: tokens. The two mock-UI blues are one accent/primary mix at 38 % (bars, Figma
 * #A2D0F6) and 23 % (#C7E3FA); hairlines are surface-2 (Figma #E9F4FC), lighter in the
 * floating card; secondary text is navy at 60 % (Figma #6B7C94 on white).
 * The floating card's 1.25 px gradient stroke is a masked box (the .rk-btn--ring technique).
 */
.rk-hero-split__ui {
	--rk-hs-u: 1px;
	--rk-hs-ui-blue: color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--primary));
	position: absolute;
	width: calc(var(--ui-w) * var(--rk-hs-u));
	height: calc(var(--ui-h) * var(--rk-hs-u));
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-align: left;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 767px) {
	.rk-hero-split__ui {
		--rk-hs-u: calc((100vw - 2 * var(--wp--style--root--padding-left)) / 646);
	}
}

@supports (width: 1cqw) {
	.rk-hero-split__ui {
		--rk-hs-u: calc(100cqw / 646);
	}
}

.rk-hero-split__ui--figma {
	top: calc(var(--ui-y) * var(--rk-hs-u));
	left: calc(var(--ui-x) * var(--rk-hs-u));
}

.rk-hero-split__ui-card,
.rk-hero-split__ui-step > * {
	position: absolute;
	top: calc(var(--y) * var(--rk-hs-u));
	left: calc(var(--x) * var(--rk-hs-u));
	margin: 0;
}

.rk-hero-split__ui-card {
	width: calc(var(--w) * var(--rk-hs-u));
	height: calc(var(--h) * var(--rk-hs-u));
	border-radius: calc(var(--r) * var(--rk-hs-u));
	background: var(--wp--preset--color--base);
	transform-origin: 50% 100%;
}

.rk-hero-split__ui-step {
	position: absolute;
	inset: 0;
}

/*
 * Text: --y is the Figma baseline. Two browser roundings would move tiny text by up to
 * 1 px: the font's ascent and descent are rounded to whole px (so the baseline is set by
 * a flex row whose empty ::before, 2 font sizes tall, has its baseline at its bottom), and
 * a box's layout position is rounded to whole px when its text is painted (so the vertical
 * position is a translate, which keeps device-pixel precision).
 */
.rk-hero-split .rk-hero-split__ui-text {
	top: 0;
	display: flex;
	align-items: baseline;
	font-size: calc(var(--fs) * var(--rk-hs-u));
	font-weight: var(--fw);
	white-space: nowrap;
	translate: var(--rk-hs-tx, 0) calc((var(--y) - 2 * var(--fs)) * var(--rk-hs-u));
}

.rk-hero-split__ui-text::before {
	content: "";
	height: calc(2 * var(--fs) * var(--rk-hs-u));
}

/* x = the right edge or the centre. */
.rk-hero-split__ui-text--end {
	--rk-hs-tx: -100%;
}

.rk-hero-split__ui-text--center {
	--rk-hs-tx: -50%;
}

.rk-hero-split__ui-text--soft {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}

.rk-hero-split__ui-text--faint {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

.rk-hero-split .rk-hero-split__ui-box,
.rk-hero-split .rk-hero-split__ui-svg {
	display: block;
	width: calc(var(--w) * var(--rk-hs-u));
	max-width: none;
	height: calc(var(--h) * var(--rk-hs-u));
}

.rk-hero-split__ui-box {
	border-radius: calc(var(--r) * var(--rk-hs-u));
}

.rk-hero-split__ui-box--bar {
	background: color-mix(in srgb, var(--rk-hs-ui-blue) 38%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-box--tint {
	background: color-mix(in srgb, var(--rk-hs-ui-blue) 23%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-box--soft {
	background: var(--wp--preset--color--surface-2);
}

.rk-hero-split__ui-box--pale {
	background: var(--wp--preset--color--surface);
}

/* Days off and other months in a calendar (Figma #F8FCFE). */
.rk-hero-split__ui-box--off {
	background: color-mix(in srgb, var(--wp--preset--color--surface-2) 35%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-box--line {
	background: color-mix(in srgb, var(--wp--preset--color--surface-2) 75%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-box--navy {
	background: var(--wp--preset--color--contrast);
}

/* Round photo (avatar), a @2x crop of the Figma render. */
.rk-hero-split .rk-hero-split__ui-img {
	display: block;
	width: calc(var(--s) * var(--rk-hs-u));
	max-width: none;
	height: calc(var(--s) * var(--rk-hs-u));
	border-radius: 50%;
	object-fit: cover;
}

/* Material Symbols icon (rekos_icon()), filling a box of the Figma icon size. */
.rk-hero-split__ui-icon {
	display: block;
	width: calc(var(--s) * var(--rk-hs-u));
	height: calc(var(--s) * var(--rk-hs-u));
}

.rk-hero-split__ui-icon .rk-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.rk-hero-split__ui-icon--navy {
	color: var(--wp--preset--color--contrast);
}

/* Inline SVG drawings (ring chart, line chart): Figma px as the viewBox. */
.rk-hero-split__ui-svg {
	overflow: visible;
	fill: none;
}

.rk-hero-split__ui-arc {
	stroke-linecap: round;
}

.rk-hero-split__ui-arc--bar {
	stroke: color-mix(in srgb, var(--rk-hs-ui-blue) 38%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-arc--tint {
	stroke: color-mix(in srgb, var(--rk-hs-ui-blue) 23%, var(--wp--preset--color--base));
}

.rk-hero-split__ui-arc--soft {
	stroke: var(--wp--preset--color--surface-2);
}

/* Line chart: 1.5 px line with round dots, navy at 30 % (Figma #B5BECA). */
.rk-hero-split__ui-line {
	stroke: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, var(--wp--preset--color--base));
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rk-hero-split__ui-point {
	fill: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, var(--wp--preset--color--base));
}

/* Gradient stroke of the floating card. */
.rk-hero-split__ui-ring {
	position: absolute;
	inset: 0;
	padding: calc(1.25 * var(--rk-hs-u));
	border-radius: inherit;
	background: var(--wp--preset--gradient--edrana);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* The light that travels once around the stroke (motion only, see below). */
.rk-hero-split .rk-hero-split__ui-trace {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	max-width: none;
	height: 100%;
	overflow: visible;
	fill: none;
}

/* Its gradient: the brand gradient's ends (accent, primary). */
.rk-hero-split__ui-trace stop {
	stop-color: var(--wp--preset--color--accent);
}

.rk-hero-split__ui-trace stop:last-child {
	stop-color: var(--wp--preset--color--primary);
}

/*
 * ---------- UI card group motion (view.js) ----------
 * Only with html.has-motion (head.js: no prefers-reduced-motion) on screen. Without JS,
 * with reduced motion or in the editor the group is static in its final state.
 * - Before view.js runs, the cards and steps hold opacity 0 for 2 s and then show anyway
 *   (the base.css failsafe pattern), so a failed script never hides the picture.
 * - view.js sets .is-ready (start state: hidden), --d on every card, step, stroke and trace
 *   (the timeline), then .is-playing when the hero is in view, and .is-done at the end.
 * - Only opacity and transform change (the trace: its stroke dash): no layout shift.
 * Timeline (~3.2 s, delays in view.js): the main card rises in (900 ms), its steps (rows,
 * chips, avatars, numbers) follow at most 70 ms apart (560 ms each); the floating card rises
 * in and its steps follow at most 60 ms apart; then a light runs once around the floating
 * card (1200 ms) while its gradient stroke brightens from 20 % to full.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	html.has-motion .rk-hero-split__ui:not(.is-ready) :is(.rk-hero-split__ui-card, .rk-hero-split__ui-step) {
		animation: rk-hs-ui-failsafe 2600ms var(--wp--custom--motion--ease);
	}

	html.has-motion .rk-hero-split__ui.is-ready:not(.is-playing) :is(.rk-hero-split__ui-card, .rk-hero-split__ui-step) {
		opacity: 0;
	}

	html.has-motion .rk-hero-split__ui.is-playing:not(.is-done) .rk-hero-split__ui-card {
		animation: rk-hs-ui-card 900ms var(--wp--custom--motion--ease) var(--d, 0ms) backwards;
	}

	html.has-motion .rk-hero-split__ui.is-playing:not(.is-done) .rk-hero-split__ui-step {
		animation: rk-hs-ui-step 560ms var(--wp--custom--motion--ease) var(--d, 0ms) backwards;
	}

	html.has-motion .rk-hero-split__ui.is-playing:not(.is-done) .rk-hero-split__ui-ring {
		animation: rk-hs-ui-ring 1200ms ease-in-out var(--d, 0ms) backwards;
	}

	html.has-motion .rk-hero-split__ui.is-playing:not(.is-done) .rk-hero-split__ui-trace {
		display: block;
		filter: drop-shadow(0 0 calc(2.5 * var(--rk-hs-u)) color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent));
		animation: rk-hs-ui-trace-fade 1200ms linear var(--d, 0ms) both;
	}

	html.has-motion .rk-hero-split__ui.is-playing:not(.is-done) .rk-hero-split__ui-trace rect {
		stroke-dasharray: 12 88;
		stroke-linecap: round;
		stroke-width: 2;
		animation: rk-hs-ui-trace 1200ms cubic-bezier(0.45, 0, 0.25, 1) var(--d, 0ms) both;
	}
}

@keyframes rk-hs-ui-failsafe {
	0%,
	77% {
		opacity: 0;
	}
}

/* No "to" keyframes (except the trace): each animation ends on the element's own values. */
@keyframes rk-hs-ui-card {
	from {
		opacity: 0;
		transform: translateY(calc(10 * var(--rk-hs-u))) scale(0.96);
	}
}

@keyframes rk-hs-ui-step {
	from {
		opacity: 0;
		transform: translateY(calc(4 * var(--rk-hs-u)));
	}
}

@keyframes rk-hs-ui-ring {
	from {
		opacity: 0.2;
	}
}

@keyframes rk-hs-ui-trace {
	from {
		stroke-dashoffset: 0;
	}

	to {
		stroke-dashoffset: -100;
	}
}

@keyframes rk-hs-ui-trace-fade {
	0% {
		opacity: 0;
	}

	12%,
	82% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* ---------- Decorative outline (desktop only) ---------- */

.rk-hero-split__outline {
	display: none;
}

/* Editor placeholder when every field is empty. */
.rk-hero-split__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- Tablet stacked (768–1023, derived) ---------- */

@media (min-width: 768px) {
	.rk-hero-split {
		--rk-hs-pad-top: var(--wp--preset--spacing--60);
	}

	.rk-hero-split__inner {
		gap: var(--wp--preset--spacing--70);
	}

	.rk-hero-split .rk-hero-split__heading {
		max-width: var(--rk-hs-copy-width);
	}

	.rk-hero-split__text,
	.rk-hero-split__checklist {
		max-width: var(--rk-hs-list-width);
	}

	.rk-hero-split__text,
	.rk-hero-split__check {
		line-height: 1.5;
	}

	.rk-hero-split__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-self: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	/* 200 × 44, label 14/20, 24 px side padding (Figma 542:4707). */
	.rk-hero-split .rk-hero-split__cta {
		min-width: var(--rk-hs-cta-width);
		padding-inline: var(--wp--preset--spacing--50);
	}

	.rk-hero-split .rk-hero-split__cta2 {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.rk-hero-split__media {
		max-width: var(--rk-hs-media-width);
	}
}

/* ---------- Tablet two columns (1024–1199, derived) ---------- */

@media (min-width: 1024px) {
	.rk-hero-split__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--50);
	}

	.rk-hero-split__content,
	.rk-hero-split__media {
		flex: 1 1 0;
	}

	.rk-hero-split__media {
		max-width: none;
		border-radius: var(--wp--custom--radius--card);
	}
}

/* ---------- Desktop (1200 and wider, Figma 1440 frames) ---------- */

@media (min-width: 1200px) {
	/* Solution: 56 below the header, 104 below the row (92 + 56 + 548 + 104 = 800). */
	.rk-hero-split {
		--rk-hs-pad-top: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--50));
		--rk-hs-pad-bottom: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--50));
	}

	/* Sector / Apie mus: 64 below the header, 136 below the row (Figma 134). */
	.rk-hero-split--arc {
		--rk-hs-pad-top: calc(2 * var(--wp--preset--spacing--60));
		--rk-hs-pad-bottom: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--70));
	}

	/* 585 | 646 (or 629) at 1440; narrower windows shrink both in proportion. */
	.rk-hero-split__content {
		flex: 0 1 var(--rk-hs-copy-width);
	}

	.rk-hero-split__media {
		flex: 0 1 var(--rk-hs-media-width);
	}

	.rk-hero-split__outline {
		/* Vertical lines 24 px inside the content edges (Figma 98.6 / 1341.4 at 1440). */
		--rk-hs-side: calc((100% - min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--style--root--padding-left))) / 2 + var(--wp--preset--spacing--50));
		--rk-hs-radius: var(--wp--custom--radius--card);
		position: absolute;
		right: 0;
		left: 0;
		z-index: -1;
		display: block;
		opacity: 0.3;
		pointer-events: none;
	}

	.rk-hero-split--outline-full .rk-hero-split__outline {
		top: calc(var(--rk-hs-offset) + var(--rk-hs-pad-top) - var(--rk-hs-outline-above));
		bottom: calc(var(--rk-hs-pad-bottom) - var(--rk-hs-outline-below));
	}

	.rk-hero-split--outline-low .rk-hero-split__outline {
		bottom: calc(var(--rk-hs-pad-bottom) - var(--rk-hs-outline-low-below));
		height: var(--rk-hs-outline-low-height);
	}

	/* 1 px strokes drawn as the border area of a masked box (the .rk-btn--ring technique). */
	.rk-hero-split__outline > span {
		position: absolute;
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
	}

	/* Top line from the left screen edge, curving down into the left vertical line. */
	.rk-hero-split__outline-start {
		top: 0;
		left: 0;
		width: calc(var(--rk-hs-side) + 1px);
		height: var(--rk-hs-radius);
		padding: 1px 1px 0 0;
		border-top-right-radius: var(--rk-hs-radius);
		background: var(--wp--preset--color--accent);
	}

	/* The U: both vertical lines and the bottom line, rounded at the bottom. */
	.rk-hero-split__outline-mid {
		top: var(--rk-hs-radius);
		right: var(--rk-hs-side);
		bottom: 0;
		left: var(--rk-hs-side);
		padding: 0 1px 1px;
		border-radius: 0 0 var(--rk-hs-radius) var(--rk-hs-radius);
		background: var(--wp--preset--gradient--edrana);
	}

	/* Right vertical line curving up into the top line to the right screen edge. */
	.rk-hero-split__outline-end {
		top: 0;
		right: 0;
		width: calc(var(--rk-hs-side) + 1px);
		height: var(--rk-hs-radius);
		padding: 1px 0 0 1px;
		border-top-left-radius: var(--rk-hs-radius);
		background: var(--wp--preset--color--primary);
	}
}

/*
 * ---------- Line draw (view.js, second part) ----------
 * The decorative outline draws itself once from left to right as the page loads (the hero is
 * on screen): a clip-path inset() wipe over the whole outline (top lines, U and corners) from
 * the section's left edge to its right edge, 2400 ms, ease-in-out; the vertical lines appear as
 * the wipe passes them. The outline is as wide as the section (left 0, right 0), so its own box
 * is the section: inset(… 100% … 0) → inset(… 0 … 0). Same technique and timing as every
 * background line of the theme (problem-solution-cards § Motion).
 * Same contract as base.css § Motion: everything needs html.has-motion (head.js: JS and no
 * prefers-reduced-motion) on screen. view.js sets .is-armed when it takes over, .is-drawn when
 * the wipe starts and .is-done at the end; it never removes a class. Before .is-armed a hold
 * keeps the outline hidden 2 s and then shows it (script missing, late or failed). The wipe
 * ends on the whole section, then the outline's own value (no clip): the static design. Only
 * clip-path and visibility change: no layout shift. Below 1200 px there is no outline.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	html.has-motion .rk-hero-split__outline:not(.is-armed) {
		animation: rk-hs-line-hold 2600ms;
	}

	html.has-motion .rk-hero-split__outline.is-armed:not(.is-drawn):not(.is-done) {
		clip-path: inset(-1px 100% -1px 0);
	}

	html.has-motion .rk-hero-split__outline.is-drawn:not(.is-done) {
		animation: rk-hs-draw 2400ms cubic-bezier(0.45, 0, 0.55, 1) backwards; /* Otilija 2026-10-08: slower, even draw (was 2400 ms, ease-in-out) */
	}
}

/* No 100 % keyframe: it ends on the outline's own value (visible), at 2 s. */
@keyframes rk-hs-line-hold {
	0%,
	77% {
		visibility: hidden;
	}
}

/* From the section's left edge to its right edge; then the outline's own value (no clip). */
@keyframes rk-hs-draw {
	from {
		clip-path: inset(-1px 100% -1px 0);
	}

	to {
		clip-path: inset(-1px 0 -1px 0);
	}
}

/* Headings (Otilija 2026-10-08): stacked layouts (768–1199) use the full column instead of the 585 px desktop cap
   and balanced lines; from 1400 (near the 1440 design width) the Figma line breaks (greedy wrap); 1200–1399 stays balanced. */
@media (min-width: 768px) and (max-width: 1199px) {
	.rk-hero-split .rk-hero-split__heading {
		max-width: none;
	}
}

@media (min-width: 1400px) {
	.rk-hero-split .rk-hero-split__heading {
		text-wrap: wrap;
	}
}