/*
 * Service page hero picture (pages/service/hero.php): the brand mark, a
 * branch growing to the service's diamond, and the logo's seed resting there.
 * The text side is the shared page hero (components/page-hero.css).
 * The trip itself (seed + branch drawing) is pages/service/hero.js; without
 * it the picture is simply the finished state.
 */

.gb-svc-hero__position {
	color: var(--gb-scene-text-muted);
	font-weight: var(--gb-weight-regular);
}

.gb-svc-hero__position::before {
	content: "·";
	margin-inline: 0.4em;
}

.gb-svc-hero__art {
	position: relative;
	justify-self: center;
	inline-size: min(100%, 30rem);
	aspect-ratio: 1;
}

.gb-svc-hero__svg {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

.gb-svc-hero__branch {
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 3px;
	stroke-linecap: round;
}

/* The logo's own seed is out at the diamond (the circle below), not on the dash. */
.gb-svc-hero__mark .gb-mark__point {
	visibility: hidden;
}

.gb-svc-hero__seed {
	fill: var(--gb-seed);
	filter: drop-shadow(0 0 6px var(--gb-seed-glow));
}

/*
 * The service's diamond (HTML, so the icon stays crisp): centre at
 * (252, 150) of the 400 box = 63% / 37.5%; size = the rotated square whose
 * half-diagonal is 96 units → 34% of the box.
 */
.gb-svc-hero__badge {
	--gb-icon-size: 40%;

	position: absolute;
	inset-block-start: 20.5%;
	left: 46%;
	display: grid;
	place-items: center;
	inline-size: 34%;
	aspect-ratio: 1;
	color: var(--gb-scene-text);
}

.gb-svc-hero__badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--gb-primary);
	border-radius: 18%;
	background-color: var(--gb-color-turquoise-a20);
	box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
	rotate: 45deg;
}

.gb-svc-hero__icon {
	position: relative;
	inline-size: var(--gb-icon-size);
	block-size: var(--gb-icon-size);
	stroke-width: 1.6;
}

/*
 * The seed's arrival (pages/service/hero.js sets data-gb-svc-reached at the
 * end of its trip): the diamond answers with one soft glow in the seed's colour.
 */
@keyframes gb-svc-arrive {
	0% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 0 var(--gb-seed-glow), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
	}

	40% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 1.4rem transparent, 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
		border-color: var(--gb-seed);
	}

	100% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 1.4rem transparent, 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
	}
}

.gb-svc-hero__svg[data-gb-svc-reached] + .gb-svc-hero__badge::before {
	animation: gb-svc-arrive 900ms var(--gb-ease-organic) both;
}

/*
 * Each heartbeat's light reaches the diamond (brand-mark.js sets
 * data-gb-pulse-hit): the same glow under its own name, so it restarts.
 */
@keyframes gb-svc-hit {
	0% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 0 var(--gb-seed-glow), 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
	}

	40% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 1.4rem transparent, 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
		border-color: var(--gb-color-neutral-0);
	}

	100% {
		box-shadow: 0 0 0 0.6rem var(--gb-color-turquoise-a10), 0 0 0 1.4rem transparent, 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gb-svc-hero__badge[data-gb-pulse-hit]::before {
		animation: gb-svc-hit 800ms var(--gb-ease-organic) both;
	}
}

/* The picture only fades in (the branch does the moving). */
.gb-svc-hero__svg[data-gb-appear] {
	--gb-appear-shift: 0px;
}

/* Narrow screens: the picture comes after the text, smaller. */
@media (max-width: 47.99rem) {
	.gb-svc-hero__art {
		inline-size: min(78%, 20rem);
	}
}