/*
 * growth-line.css — B4, the birch growth line.
 *
 * The overlay box mirrors .container exactly, so the line lands on the same
 * left edge as the content it runs beside. Purely decorative and never
 * intercepts pointer events.
 */

.growth-wrap {
	position: relative;
}

/* z-index 2 puts the line ABOVE the sections, and that is load-bearing.

   🐞 It used to be 0, under the sections' 1. Two of the six sections it runs
   past are `.section--band`, which paint an opaque background across the full
   width — so they covered the line and everything on it. 1395px of the 5213px
   line, 27% of the site's signature moment, simply did not render, and five of
   the fourteen leaves sat behind a band. That is the likeliest source of both
   of Felix's reports: "one lone leaf on a whole stretch" (18.8) and "there is
   no leaf here" pointing at the services area (17.8) — the leaf above it is
   inside the video-story band.

   Raising it is safe because this layer only ever occupies the outer gutter:
   the svg starts 32px left of the content edge and is 24px wide, so it ends
   8px clear of the first text, and the leaves are narrower still. It is also
   pointer-events: none, so it can never intercept a click. */
.growth-line {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	z-index: 2;
	margin-inline: auto;
	max-width: var(--container-max);
	padding-inline: var(--container-pad);
	pointer-events: none;
}

/* Sections still get their own stacking context, so their internal layering is
   unaffected — they simply no longer paint over the gutter the line lives in. */
.growth-wrap > section {
	position: relative;
	z-index: 1;
}

/* Sit in the OUTER margin, not on the text edge: the padded box above puts us
   exactly where the copy starts, so step left into the gutter. */
.growth-line__svg {
	width: 24px;
	height: 100%;
	margin-left: -32px;
	overflow: visible;
}

.growth-line__track {
	fill: none;
	stroke: var(--line);
	stroke-width: 1;
}

/* Without JS this simply sits drawn at full length; motion.js takes it over. */
.growth-line__grow {
	fill: none;
	stroke: var(--koivu);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.85;
}

.growth-line__branch {
	fill: none;
	stroke: var(--koivu);
	stroke-width: 1.5;
	stroke-linecap: round;
	opacity: 0.7;
}

/* Birch leaves along the twig. Bright brand green: a decorative mark, never
   text — the a11y rule that keeps --koivu-bright off type.

   The silhouette is a mask, not a border-radius oval. At this size an oval
   reads as a dot; the mask gives a real ovate blade with a point and a short
   stem, from ONE shared definition rather than an element per leaf.

   Geometry comes in as custom properties from growth-line.php. The horizontal
   anchor is derived, not measured: the svg is the first in-flow child inside
   this box's padding and carries margin-left: -32px, so its left edge sits at
   (--container-pad - 32px) from the padding edge that `left` resolves against.
   Adding --leaf-x then places a leaf in the svg's own coordinates — 1px is on
   the stroke, 15px is the branch tip. A hardcoded offset would drift the next
   time the container padding changes; this cannot. */
.growth-line__leaf-mark {
	--leaf-w: calc(var(--leaf-h) * 0.62);

	position: absolute;
	top: var(--at);
	left: calc(var(--container-pad) - 32px + var(--leaf-x));
	width: var(--leaf-w);
	height: var(--leaf-h);
	/* Centre the stem base on --leaf-x rather than the box's left edge. */
	margin-left: calc(var(--leaf-w) / -2);
	background: var(--koivu-bright);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 100'%3E%3Cpath d='M28 100h6V82h-6z M31 82C10 74 2 46 31 4c29 42 21 70 0 78z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 100'%3E%3Cpath d='M28 100h6V82h-6z M31 82C10 74 2 46 31 4c29 42 21 70 0 78z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* translateY(-100%) drops the box so its BOTTOM edge lands on --at, which
	   puts the stem base on the line; the rotation then turns the blade about
	   that same point, so the leaf pivots where it joins the twig. */
	transform-origin: 50% 100%;
	transform: translateY(-100%) rotate(var(--leaf-r)) scale(var(--leaf-scale, 1));
	opacity: 0.75;
	pointer-events: none;
}

/* Pre-sprout state, scoped to .js-motion exactly like the site-wide reveal:
   motion.js drops that class under reduced motion or if a library fails, and
   the leaves are then simply present. Without this the leaves would sit on the
   line before the growing tip ever reached them — the branches already sprout
   in sequence, and static leaves contradicted them. */
.js-motion .growth-line__leaf-mark {
	--leaf-scale: 0.3;

	opacity: 0;
}

/* The line is a flourish, not information. Below 1024px the gutter is too
   narrow to hold it clear of the copy, so it steps aside entirely rather than
   crowding the text. */
@media (max-width: 1023.98px) {
	.growth-line {
		display: none;
	}
}