/* Satelliet — Graviteit credit */

.sat-gc {
	display: flex;
	justify-content: var( --sat-gc-justify, center );
}

.sat-gc__link {
	display: inline-flex;
	align-items: center;
	gap: var( --sat-gc-gap, .5em );
	color: inherit;
	text-decoration: none;
	transition: color .2s, opacity .2s;
}

/* Logomark is inlined with fill="currentColor", so it follows the text colour. */
.sat-gc__mark {
	display: inline-flex;
	flex: none;
	width: var( --sat-gc-size, 1em );
}

.sat-gc__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* "Graviteit" as wordmark, sitting on the text baseline at cap height.
   The SVG is wrapped in an inline-block with a fixed height: an inline-block
   without line boxes puts its bottom edge on the baseline in every engine,
   whereas an inline <svg>'s own baseline differs between browsers (Safari).
   Width comes from an explicit ratio rather than each engine's SVG sizing. */
.sat-gc__brand--logo {
	display: inline-block;
	height: var( --sat-gc-logo-h, .72em );
	aspect-ratio: 441.8 / 65.68;
	vertical-align: baseline;
	line-height: 0;
}

.sat-gc__brand--logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Animated logomark: same box as the static mark (its viewBox ratio), with the
   2160x2160 Lottie canvas scaled and shifted so the drawn mark (final frame:
   x 9.81-86.29 %, y 12.04-92.41 % of the canvas) fills that box, centred. */
.sat-gc__mark--animated {
	position: relative;
	aspect-ratio: 573.59 / 595.28;
}

.sat-gc__lottie {
	position: absolute;
	width: 130.75%;
	aspect-ratio: 1;
	left: -12.83%;
	top: -15.80%;
	pointer-events: none;
}

/* Colour comes from CSS, not the JSON, so the logomark colour controls apply. */
.sat-gc__lottie path[fill]:not([fill="none"]) {
	fill: currentColor;
}

.sat-gc__lottie path[stroke]:not([stroke="none"]) {
	stroke: currentColor;
}