/* Layout: statement */
.sw-statement { overflow: hidden; }

.sw-statement__inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--gap-xl);
}

.sw-statement__pattern {
	position: absolute;
	inset-block-start: 50%;
	inline-size: 22rem;
	block-size: 26rem;
	translate: 0 -50%;
	overflow: hidden;
}
.sw-statement__pattern--start { inset-inline-start: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.sw-statement__pattern--end { inset-inline-end: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }

.sw-statement__plusses { position: absolute; inset-block-start: 0; max-inline-size: none; }
.sw-statement__pattern--end .sw-statement__plusses { inset-inline-start: 0; }
/* Mirrored so column 0 is the inner edge on both sides: the reveal runs outwards from the centre */
.sw-statement__pattern--start .sw-statement__plusses { inset-inline-end: 0; scale: -1 1; }

/*
 * Reveal (StatementPattern): hidden until the section scrolls into view, then a white column
 * runs from the centre outwards and each plus settles to the normal faint colour behind it.
 */
.sw-statement--waiting .sw-statement__plusses .sw-plus-pattern__plus { opacity: 0; }
.sw-statement--revealed .sw-statement__plusses .sw-plus-pattern__plus {
	animation: sw-statement-wave 800ms ease-out both;
	animation-delay: calc(var(--plus-col) * 70ms);
}

@keyframes sw-statement-wave {
	0% { opacity: 0; stroke: var(--color-heading); }
	20% { opacity: 1; stroke: var(--color-heading); }
	100% { opacity: 1; stroke: currentColor; }
}

.sw-statement__logo { inline-size: 12.5rem; block-size: auto; } /* 200px on phones */

.sw-statement__pattern { display: none; } /* no plus pattern behind the text on phones */

@media (min-width: 48em) {
	.sw-statement__pattern { display: block; }
	.sw-statement__logo { inline-size: min(23.75rem, 100%); }
}