/* Meikero: home "subscription" band with statue (single image, no blending). */

#subscription {
	position: relative;
	z-index: 2;
	--sw: clamp(280px, 40vw, 540px);
}
#subscription > .container { position: relative; z-index: 3; }

.sub-statue { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; z-index: 2; }
.sub-statue img {
	position: absolute; bottom: -72px;
	right: max(0px, calc((100% - var(--container)) / 2 + var(--gutter) - 24px));
	width: var(--sw); height: auto; max-width: none;
	display: block; user-select: none; -webkit-user-drag: none;
	transform-origin: 50% 100%;
	will-change: transform;
}

/* Desktop: keep the text clear of the statue. */
@media (min-width: 900px) {
	#subscription > .container > .grid { padding-right: calc(var(--sw) * .74); }
}

/* Mobile: smaller statue centred under the text, base hanging out of the band. */
@media (max-width: 899px) {
	#subscription { --sw: min(68vw, 290px); }
	#subscription > .container { padding-bottom: max(0px, calc(var(--sw) * 1.25 - 128px)); }
	.sub-statue img { right: auto; left: calc(50% - var(--sw) / 2); bottom: -56px; }
}

/* "What Meikero connects": statue on the left of the section head, text beside it. */
#connects { --cw: clamp(230px, 23vw, 330px); }
.conn-statue { pointer-events: none; }
.conn-statue img { display: block; width: var(--cw); height: auto; max-width: none; transform-origin: 50% 100%; will-change: transform; user-select: none; -webkit-user-drag: none; }

@media (min-width: 900px) {
	/* Statue is absolutely positioned: it takes no layout space, only the text shifts sideways. */
	#connects .section__head { position: relative; max-width: none; padding-left: calc(var(--cw) * .9 + clamp(48px, 6vw, 96px)); }
	#connects .section__head > :not(.conn-statue) { max-width: 700px; }
	.conn-statue { position: absolute; left: calc(var(--cw) * -.1); bottom: -56px; z-index: 1; }
}
/* Mobile: hidden, it would not fit next to the text. */
@media (max-width: 899px) {
	.conn-statue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sub-statue img { will-change: auto; }
}