/**
 * ABOUT 経歴（.about-keireki）スクロール連動カラーリveal
 * フロント専用
 */

.about-keireki .about-reki {
	--keireki-reveal: 0;
	--keireki-main-muted: #dce0eb;
	--keireki-body-muted: #e5e5e5;
	--keireki-main: var(--color_main, #2b3863);
	--keireki-body: #777777;
}

.about-keireki .about-reki h3,
.about-keireki .about-reki p.has-swl-main-color {
	color: color-mix(
		in srgb,
		var(--keireki-main-muted) calc((1 - var(--keireki-reveal)) * 100%),
		var(--keireki-main) calc(var(--keireki-reveal) * 100%)
	) !important;
	transition: color 0.12s linear;
}

.about-keireki .about-reki p.wp-block-paragraph:not(.has-swl-main-color) {
	color: color-mix(
		in srgb,
		var(--keireki-body-muted) calc((1 - var(--keireki-reveal)) * 100%),
		var(--keireki-body) calc(var(--keireki-reveal) * 100%)
	) !important;
	transition: color 0.12s linear;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.about-keireki .about-reki:not(.is-keireki-revealed) h3,
	.about-keireki .about-reki:not(.is-keireki-revealed) p.has-swl-main-color {
		color: var(--keireki-main-muted) !important;
	}

	.about-keireki .about-reki:not(.is-keireki-revealed) p.wp-block-paragraph:not(.has-swl-main-color) {
		color: var(--keireki-body-muted) !important;
	}

	.about-keireki .about-reki.is-keireki-revealed h3,
	.about-keireki .about-reki.is-keireki-revealed p.has-swl-main-color {
		color: var(--keireki-main) !important;
		transition: color 0.8s ease;
	}

	.about-keireki .about-reki.is-keireki-revealed p.wp-block-paragraph:not(.has-swl-main-color) {
		color: var(--keireki-body) !important;
		transition: color 0.8s ease 0.15s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-keireki .about-reki {
		--keireki-reveal: 1;
	}

	.about-keireki .about-reki h3,
	.about-keireki .about-reki p.has-swl-main-color {
		color: var(--keireki-main) !important;
	}

	.about-keireki .about-reki p.wp-block-paragraph:not(.has-swl-main-color) {
		color: var(--keireki-body) !important;
	}
}