:root {
	--section-dark-background: var(--ink, #161622);
	--section-light-background: var(--white, #f0f3fd);
	--section-dark-content: var(--light, #e8e8eb);
	--section-transition-span: 75;
	--section-content-offset: 0;
}

section[data-section-tone="light"] {
	background-color: var(--section-light-background);
}

[data-section-tone] {
	--section-background-progress: 0;
	--section-content-progress: 0;
}

[data-section-tone="dark"],
[data-section-tone="hero"] {
	--section-background-progress: 1;
	--section-content-progress: 1;
}

[data-section-transition] {
	isolation: isolate;
	position: relative;
}

[data-section-transition] > [data-section-transition-layer] {
	background: var(--section-dark-background);
	inset: 0;
	opacity: var(--section-background-progress);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

[data-section-transition] > *:not([data-section-transition-layer]) {
	z-index: 1;
}

#brx-content [data-section-content-tone] {
	color: color-mix(
		in srgb,
		var(--section-content-start-color) calc((1 - var(--section-content-progress)) * 100%),
		var(--section-dark-content) calc(var(--section-content-progress) * 100%)
	);
}

@media (prefers-reduced-motion: reduce) {
	[data-section-transition] > [data-section-transition-layer] {
		display: none;
	}
}