/*
 * rekos/hero-visual-stats (Figma 1198:6223 desktop 1440 × 800, 1201:6037 mobile 375 × 856).
 * Tokens only. The literal px values below are the Figma geometry of this one layout
 * (column, text, button and stat widths, illustration size); they are declared once as
 * --rk-hvs-* properties at the top.
 *
 * Desktop (≥1200): copy column 585 at the content edge, its top 80 below the illustration
 * top; heading 36/1.4, text 16/24 (407 wide), ring button 200 × 44 (+5 ring), stats 129
 * wide, 32 apart, 56 below the button. Illustration 654 × 655, top 32 below the header,
 * right edge 28 px past the content edge; 24 below it. Height 92 + 32 + 655 + 24 ≈ 800.
 * Mobile (<768): header 64, 24 to the heading (30/1.4), 16 to the text (14/20), 24 to the
 * full-width ring button (333 × 40), 24 to 3 stat columns; illustration 335 × 276,
 * 28 below, 5.5 px from the screen edge, its bottom on the section bottom. 856 in total.
 * Tablet (derived): 768–1023 stacked like mobile with the desktop text widths;
 * 1024–1199 two columns; the illustration is hero-mobile.svg below 1200 (render.php).
 *
 * 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.
 *
 * Motion (bottom of the file): the theme illustration is inline SVG (render.php); on load its
 * layers stack up, click together a little, light up and ease back to the Figma spacing,
 * only under html.has-motion.
 */

.rk-hero-visual-stats {
	--rk-hvs-copy-width: 585px;
	--rk-hvs-text-width: 407px;
	--rk-hvs-cta-width: 200px;
	--rk-hvs-stat-width: 129px;
	--rk-hvs-visual-width: 654px;
	--rk-hvs-visual-bleed: 28px;
	--rk-hvs-visual-tablet: 520px;
	--rk-hvs-ring: calc(var(--wp--custom--button--ring-gap) + var(--wp--custom--button--ring-width));
	--rk-hvs-pad-top: var(--wp--preset--spacing--50);

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

/*
 * First block of the post content: the section starts at the top of the page, behind the
 * header (which has no background and a 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), so the editor shows the block without the header space.
 */
.wp-block-post-content > .rk-hero-visual-stats:first-child {
	margin-block-start: calc(-1 * var(--rk-header-height));
	padding-block-start: calc(var(--rk-header-height) + var(--rk-hvs-pad-top));
}

.rk-hero-visual-stats__inner {
	display: flex;
	flex-direction: column;
}

.rk-hero-visual-stats__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* ---------- Heading, text, button ---------- */

/* .rk-hero-visual-stats prefix: beats the 0-0-1 theme.json h1 element styles. */
.rk-hero-visual-stats .rk-hero-visual-stats__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;
	overflow-wrap: break-word;
	text-wrap: balance; /* below 1200: even lines (pretty did not fix lone words in Chrome); 1400+: Figma breaks, see end */
}

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

.rk-hero-visual-stats__text:first-child {
	margin-block-start: 0;
}

/*
 * Ring button (.rk-btn.rk-btn--ring, base.css). The ring sits in the button's 5 px margin,
 * so the top margin is the Figma gap (24) plus the ring. Mobile: full width.
 */
.rk-hero-visual-stats .rk-hero-visual-stats__cta {
	align-self: stretch;
	margin-block-start: calc(var(--wp--preset--spacing--50) + var(--rk-hvs-ring));
}

/* ---------- Stats ---------- */

.rk-hero-visual-stats__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-self: stretch;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.rk-hero-visual-stats__stats:first-child {
	margin-block-start: 0;
}

.rk-hero-visual-stats__stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

/* Value: Open Sans 700 16/24 with the Edrana gradient (Figma 1198:6235). */
.rk-hero-visual-stats__stat-value {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.rk-hero-visual-stats__stat-value {
		background: var(--wp--preset--gradient--edrana);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* Label: Open Sans 400 12/16. */
.rk-hero-visual-stats__stat-label {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.333;
}

/* ---------- Illustration ---------- */

/* Mobile: 335 of the 343 content width, moved left so it starts 5.5 px from the edge. */
.rk-hero-visual-stats__visual {
	width: 97.67%;
	margin: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--10)) 0 0;
	transform: translateX(-3.13%);
}

.rk-hero-visual-stats__visual:first-child {
	margin-block-start: 0;
}

.rk-hero-visual-stats__picture,
.rk-hero-visual-stats__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Inline theme illustration (render.php): hero-mobile.svg below 1200 px, hero-desktop.svg
 * from 1200 px; the other one is display: none (not drawn, not read out). Overflow
 * visible: in the motion start state the layers drop in from above the top edge.
 * --rk-hvs-drop: how far above its place each layer starts, in SVG units (≈ 0.62 of the
 * layer spacing: 44 of 71 on desktop, ≈ 44 px at 1440; 19 of 30.4 on the phone SVG).
 */
.rk-hero-visual-stats__svg {
	--rk-hvs-drop: 19px;

	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.rk-hero-visual-stats__svg--desktop {
	--rk-hvs-drop: 44px;

	display: none;
}

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

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

	.rk-hero-visual-stats .rk-hero-visual-stats__heading {
		max-width: var(--rk-hvs-copy-width);
	}

	.rk-hero-visual-stats__text {
		max-width: var(--rk-hvs-text-width);
		margin-block-start: var(--wp--preset--spacing--50);
		line-height: 1.5;
	}

	/* 200 × 44, label 14/20, 24 px side padding (Figma 1198:6231). */
	.rk-hero-visual-stats .rk-hero-visual-stats__cta {
		align-self: flex-start;
		min-width: var(--rk-hvs-cta-width);
		padding-inline: var(--wp--preset--spacing--50);
	}

	/* 129 wide, 32 apart; they shrink a little rather than wrap in a narrow column. */
	.rk-hero-visual-stats__stats {
		display: flex;
		gap: var(--wp--preset--spacing--60);
		align-self: stretch;
		margin-block-start: var(--wp--preset--spacing--70);
	}

	.rk-hero-visual-stats__stat {
		flex: 0 1 var(--rk-hvs-stat-width);
	}

	.rk-hero-visual-stats__visual {
		width: min(100%, var(--rk-hvs-visual-tablet));
		margin-block-start: var(--wp--preset--spacing--60);
	}
}

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

@media (min-width: 1024px) {
	.rk-hero-visual-stats {
		padding-block-end: var(--wp--preset--spacing--70);
	}

	.rk-hero-visual-stats__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
	}

	.rk-hero-visual-stats__visual {
		width: 100%;
		margin: 0;
		transform: none;
	}
}

/* ---------- Desktop (1200 and wider, Figma 1198:6223) ---------- */

@media (min-width: 1200px) {
	.rk-hero-visual-stats {
		padding-block-end: var(--wp--preset--spacing--50);
	}

	.rk-hero-visual-stats__inner {
		grid-template-columns: minmax(0, var(--rk-hvs-copy-width)) minmax(0, 1fr);
		align-items: start;
	}

	.rk-hero-visual-stats__content {
		margin-block-start: var(--wp--preset--spacing--80);
	}

	/* 654 wide at 1440 (x 742–1396); narrower windows scale it with the column. */
	.rk-hero-visual-stats__visual {
		justify-self: end;
		width: min(var(--rk-hvs-visual-width), 100% + var(--rk-hvs-visual-bleed));
		margin-inline-end: calc(-1 * var(--rk-hvs-visual-bleed));
	}

	.rk-hero-visual-stats__svg--mobile {
		display: none;
	}

	.rk-hero-visual-stats__svg--desktop {
		display: block;
	}
}

/* ---------- Motion: stack up, click, light, ease back (inline SVG only) ---------- */

/*
 * Start states exist only under html.has-motion (head.js adds it when reduced motion is not
 * requested). Without it (no JS, reduced motion, editor canvas) nothing moves: the stack is
 * drawn exactly as exported from Figma and the edge lights have opacity="0" in the markup.
 * Pure CSS: runs once from the first paint, no JS and no per-request state (page cache safe),
 * and every animation starts and ends on the element's own style (the Figma spacing), so the
 * end of the motion is the static picture. Transform, opacity and stroke-dashoffset only:
 * no layout shift.
 * 1. Stacking (0–1.97 s): layer k (--rk-i 0 = bottom … 6 = the top "e" tile) drops
 *    --rk-hvs-drop from above and settles (650 ms, theme ease), 220 ms after the one below it.
 *    Label k (dashed line, dot, name) fades in as layer k lands; dashed joint k (between
 *    layers k and k+1) as layer k+1 lands.
 * 2. Click (1.91–2.25 s, as the top tile lands): layer k moves down k × --rk-hvs-squeeze
 *    (render.php: 10 % of the layer spacing; the bottom layer stays on its shadow) in 340 ms
 *    with the theme ease. Labels and edge lights move with their layer; each dashed joint
 *    keeps its lower end on layer k and its upper end on layer k + 1 (translate + scaleY from
 *    --rk-hvs-y2 / --rk-hvs-len), so it just shortens.
 * 3. Light (2.17–3.77 s): while squeezed, a soft light (cyan glow, white core) runs slowly
 *    along every layer's wall edge at once, left to right (1.6 s), then fades.
 * 4. Return (3.65–4.45 s): the layers ease calmly back to the Figma spacing (800 ms, theme
 *    ease, no overshoot; joints follow).
 * One keyframe list per element (2540 ms from 1.91 s: click 0–13.4 %, hold, return
 * 68.5–100 %): change --rk-hvs-stack-ms only together with those percentages.
 */
.rk-hero-visual-stats__svg {
	--rk-hvs-drop-ms: 650ms; /* Each layer's drop. */
	--rk-hvs-stagger: 220ms; /* Between layers. */
	--rk-hvs-label-at: 380ms; /* Label k: this long after layer k starts (≈ 95 % landed). */
	--rk-hvs-fade: 450ms; /* Labels and dashed joints. */
	--rk-hvs-squeeze-at: calc((var(--rk-hvs-n, 7) - 1) * var(--rk-hvs-stagger) + var(--rk-hvs-drop-ms) - 60ms);
	--rk-hvs-stack-ms: 2540ms; /* Click 340 ms, hold, return 800 ms (see the keyframes). */
	--rk-hvs-light-at: calc(var(--rk-hvs-squeeze-at) + 260ms);
	--rk-hvs-light-ms: 1600ms; /* The light's run along each wall. */
	--rk-hvs-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* In-out partner of the theme ease. */
}

html.has-motion .rk-hero-visual-stats__layer {
	animation:
		rk-hero-visual-stats-drop var(--rk-hvs-drop-ms) var(--wp--custom--motion--ease) calc(var(--rk-i, 0) * var(--rk-hvs-stagger)) backwards,
		rk-hero-visual-stats-stack var(--rk-hvs-stack-ms) linear var(--rk-hvs-squeeze-at);
}

html.has-motion .rk-hero-visual-stats__label {
	animation:
		rk-hero-visual-stats-fade var(--rk-hvs-fade) var(--wp--custom--motion--ease) calc(var(--rk-i, 0) * var(--rk-hvs-stagger) + var(--rk-hvs-label-at)) backwards,
		rk-hero-visual-stats-stack var(--rk-hvs-stack-ms) linear var(--rk-hvs-squeeze-at);
}

html.has-motion .rk-hero-visual-stats__link {
	animation:
		rk-hero-visual-stats-fade var(--rk-hvs-fade) var(--wp--custom--motion--ease) calc((var(--rk-i, 0) + 1) * var(--rk-hvs-stagger) + var(--rk-hvs-label-at)) backwards,
		rk-hero-visual-stats-stack-joint var(--rk-hvs-stack-ms) linear var(--rk-hvs-squeeze-at);
}

html.has-motion .rk-hero-visual-stats__edge {
	animation: rk-hero-visual-stats-stack var(--rk-hvs-stack-ms) linear var(--rk-hvs-squeeze-at);
}

html.has-motion .rk-hero-visual-stats__edges {
	animation: rk-hero-visual-stats-flash var(--rk-hvs-light-ms) linear var(--rk-hvs-light-at) backwards;
}

html.has-motion .rk-hero-visual-stats__edge > path {
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 0.2 2; /* Light segment: 1/5 of the edge (pathLength 1). */
	stroke-dashoffset: 0.2;
	animation: rk-hero-visual-stats-run var(--rk-hvs-light-ms) var(--rk-hvs-in-out) var(--rk-hvs-light-at) backwards;
}

.rk-hero-visual-stats__edge-glow {
	stroke: var(--wp--preset--color--accent);
}

.rk-hero-visual-stats__edge-core {
	stroke: var(--wp--preset--color--base);
}

@keyframes rk-hero-visual-stats-drop {
	from {
		opacity: 0;
		transform: translateY(calc(var(--rk-hvs-drop) * -1));
	}
}

@keyframes rk-hero-visual-stats-fade {
	from {
		opacity: 0;
	}
}

/*
 * Layer k (and its label and edge light): Figma spacing → down k × squeeze (snap), hold,
 * calm ease back (theme ease, no overshoot). Identity at 0 % and 100 % with fill mode
 * "none": the drop / fade before it and the final state after it are untouched.
 */
@keyframes rk-hero-visual-stats-stack {
	0% {
		transform: translateY(0);
		animation-timing-function: cubic-bezier(0.2, 0, 0, 1); /* = custom.motion.ease (var() is not applied inside keyframes). */
	}

	13.4%,
	68.5% {
		transform: translateY(calc(var(--rk-i, 0) * var(--rk-hvs-squeeze, 0) * 1px));
		animation-timing-function: cubic-bezier(0.2, 0, 0, 1); /* = custom.motion.ease (var() is not applied inside keyframes). */
	}

	100% {
		transform: translateY(0);
	}
}

/*
 * Joint k at the same moments: its lower end (y2) moves like layer k (k × s), its upper end
 * like layer k + 1 ((k + 1) × s): y → f·y + t with f = 1 − s / len, t = y2 · s / len + k · s.
 */
@keyframes rk-hero-visual-stats-stack-joint {
	0% {
		transform: translateY(0) scaleY(1);
		animation-timing-function: cubic-bezier(0.2, 0, 0, 1); /* = custom.motion.ease (var() is not applied inside keyframes). */
	}

	13.4%,
	68.5% {
		transform: translateY(calc((var(--rk-hvs-y2, 0) * var(--rk-hvs-squeeze, 0) / var(--rk-hvs-len, 1) + var(--rk-i, 0) * var(--rk-hvs-squeeze, 0)) * 1px)) scaleY(calc(1 - var(--rk-hvs-squeeze, 0) / var(--rk-hvs-len, 1)));
		animation-timing-function: cubic-bezier(0.2, 0, 0, 1); /* = custom.motion.ease (var() is not applied inside keyframes). */
	}

	100% {
		transform: translateY(0) scaleY(1);
	}
}

/* Light: in, hold, out (the group's own opacity is 0). */
@keyframes rk-hero-visual-stats-flash {
	0% {
		opacity: 0;
	}

	20%,
	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* pathLength 1: the segment slides from just before the left end to just past the right end. */
@keyframes rk-hero-visual-stats-run {
	from {
		stroke-dashoffset: 0.2;
	}

	to {
		stroke-dashoffset: -1;
	}
}

/* Reduced motion switched on while the page is open: drop the delays too (base.css only shortens durations). */
@media (prefers-reduced-motion: reduce) {
	html.has-motion .rk-hero-visual-stats__svg * {
		animation: none;
	}
}

/* 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-visual-stats .rk-hero-visual-stats__heading {
		max-width: none;
	}
}

@media (min-width: 1400px) {
	.rk-hero-visual-stats .rk-hero-visual-stats__heading {
		text-wrap: wrap;
	}
}