/* ===================================
   Circle content box: two overlapping circles whose messages crossfade with scroll. Script:
   script.mjs.
=================================== */

.section_circle_content_box .circle_box {
	display: flex;
	gap: 30px;
	position: relative;
	flex-direction: column;
	margin-left: 24.8%;
}
.section_circle_content_box .circle_box .circle_item {
	display: flex;
	gap: 45px;
	align-items: center;
	border: 1px solid #d1d3d4;
	border-left-color: transparent;
	border-right: 0;
	border-radius: 170px 0 0 170px;
	background-color: #fff;
	transition: 0.3s var(--ease-out);
	transition-property: transform, opacity, background-color, filter;
}
@media only screen and (min-width: 769px) {
	.section_circle_content_box .circle_box .circle_item:nth-child(2) {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateX(113%);
		opacity: 0;
	}
	.section_circle_content_box .circle_box.active .circle_item:nth-child(2) {
		transform: translateX(0);
		opacity: 1;
	}
}
.section_circle_content_box .circle_box .circle_item .circle_title {
	width: 318px;
	height: 318px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	border-radius: 50%;
	letter-spacing: -1.08px;
}
.section_circle_content_box .circle_box .circle_item .circle_title span {
	max-width: 182px;
}

.section_circle_content_box .circle_box .circle_item .circle_sub_title {
	margin-bottom: 20px;
	letter-spacing: -0.72px;
}

.section_circle_content_box .circle_box .circle_item .circle_content {
	flex: 1;
	max-width: 496px;
}
@media only screen and (max-width: 1350px) {
	.section_circle_content_box .circle_box .circle_item .circle_title {
		width: 250px;
		height: 250px;
	}
}
@media only screen and (max-width: 1200px) {
	.section_circle_content_box .circle_box {
		margin-left: 23.8%;
	}
}
@media only screen and (max-width: 1024px) {
	.section_circle_content_box .circle_box {
		margin-left: 0%;
	}
}

@media only screen and (max-width: 880px) {
	.section_circle_content_box .circle_box .circle_item {
		gap: 28px;
	}
}
@media only screen and (max-width: 768px) {
	.section_circle_content_box .circle_box {
		width: auto;
		flex-direction: column;
		border: 0;
		gap: 30px;
	}
	.section_circle_content_box .circle_box .circle_item {
		gap: 28px;
		width: auto;
		border: 0;
	}
	.section_circle_content_box .circle_box .circle_item:nth-child(2n) {
		flex-direction: row-reverse;
	}
	.section_circle_content_box .circle_box .circle_item .circle_title {
		width: 200px;
		height: 200px;
		text-align: center;
	}
}
@media only screen and (max-width: 600px) {
	.section_circle_content_box .circle_box .circle_item {
		flex-direction: column;
		align-items: flex-start;
	}
	.section_circle_content_box .circle_box .circle_item:nth-child(2n) {
		flex-direction: column;
	}
}

/* ===================================
   Scroll-linked, sequential crossfade (blocks/circle-content-box/script.mjs)
   --out1/--out2 (old message leaving) and --in1/--in2 (new message arriving) go 0 -> 1 with
   scroll. The old message fully clears before the new one starts, so text never overlaps.
   Circles keep their size; only the words move.
=================================== */
@media only screen and (min-width: 769px) {
	.section_circle_content_box .circle_box.is-scrubbed .circle_item,
	.section_circle_content_box .circle_box.is-scrubbed .circle_item * {
		transition: none; /* the scroll position drives everything */
	}
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(2) {
		transform: none;
		opacity: 1;
		background-color: transparent;
		pointer-events: none;
	}
	.section_circle_content_box .circle_box.is-scrubbed.is-second .circle_item:nth-child(2) {
		pointer-events: auto;
	}
	/* second disc: same green as the first, so it simply sits on top (no visible change) */
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(2) .circle_title {
		background-color: transparent;
	}
	/* leaving: drift up, soften, fade */
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(1) .circle_title > * {
		opacity: calc(1 - var(--out1, 0));
		transform: translate3d(0, calc(var(--out1, 0) * -10px), 0);
		filter: blur(calc(var(--out1, 0) * 4px));
	}
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(1) .circle_content {
		opacity: calc(1 - var(--out2, 0));
		transform: translate3d(0, calc(var(--out2, 0) * -10px), 0);
		filter: blur(calc(var(--out2, 0) * 4px));
	}
	/* arriving: rise into place, come into focus */
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(2) .circle_title > * {
		opacity: var(--in1, 0);
		transform: translate3d(0, calc((1 - var(--in1, 0)) * 10px), 0);
		filter: blur(calc((1 - var(--in1, 0)) * 4px));
	}
	.section_circle_content_box .circle_box.is-scrubbed .circle_item:nth-child(2) .circle_content {
		opacity: var(--in2, 0);
		transform: translate3d(0, calc((1 - var(--in2, 0)) * 10px), 0);
		filter: blur(calc((1 - var(--in2, 0)) * 4px));
	}
}
@media (prefers-reduced-motion: reduce) {
	.section_circle_content_box .circle_box.is-scrubbed .circle_item .circle_title > *,
	.section_circle_content_box .circle_box.is-scrubbed .circle_item .circle_content {
		transform: none !important;
		filter: none !important;
	}
}

/* Message pager (blocks/circle-content-box/script.mjs): two slim bars, the current one fills
   over the hold time (--cb-hold) while auto-playing. Same language as the highlights pager. */
.section_circle_content_box .cb-pager {
	display: none;
}
@media only screen and (min-width: 769px) {
	.section_circle_content_box .circle_box.is-scrubbed .cb-pager {
		position: absolute;
		left: 50%; /* set by the script to the text column's start */
		bottom: -36px;
		z-index: 2;
		display: flex;
		gap: 10px;
	}
	.section_circle_content_box .cb-dot {
		all: unset;
		position: relative;
		display: block;
		width: 28px;
		height: 3px;
		border-radius: 3px;
		background: var(--wp--preset--color--lightgrey, #d5dde3);
		overflow: hidden;
		cursor: pointer;
		transition: width var(--dur-medium) var(--ease-out);
	}
	.section_circle_content_box .cb-dot::before,
	.section_circle_content_box .cb-dot::after {
		content: none;
	}
	.section_circle_content_box .cb-dot.is-current {
		width: 48px;
	}
	/* bigger hit area than the 3px bar */
	.section_circle_content_box .cb-dot > .cb-dot-fill::after {
		content: "";
		position: absolute;
		inset: -10px -4px;
	}
	.section_circle_content_box .cb-dot-fill {
		position: absolute;
		inset: 0;
		background: var(--wp--preset--color--darkgreen);
		transform: scaleX(0);
		transform-origin: 0 50%;
	}
	.section_circle_content_box .cb-dot.is-current .cb-dot-fill {
		transform: scaleX(1);
	}
	.section_circle_content_box .circle_box.is-playing .cb-dot.is-current .cb-dot-fill {
		transform: scaleX(0);
	}
	.section_circle_content_box .circle_box.is-playing .cb-dot.is-filling .cb-dot-fill {
		animation: cb-fill var(--cb-hold, 6000ms) linear forwards;
	}
	.section_circle_content_box .cb-dot:focus-visible {
		outline: 2px solid var(--wp--preset--color--darkgreen);
		outline-offset: 6px;
	}
}
@keyframes cb-fill {
	to {
		transform: scaleX(1);
	}
}
/* paused (hover, focus, out of view): the fill holds exactly where it is */
.section_circle_content_box .circle_box.is-paused .cb-dot.is-filling .cb-dot-fill {
	animation-play-state: paused;
}