/* China Social Operations: follows the consulting page's section grammar. */
.wtc-social-section {
	--wtc-slate-deep: #46586a;
	--wtc-slate-soft: #8b99a8;
	padding: clamp(2.75rem, 6vh, 4.5rem) 0;
}

.wtc-social-section__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.wtc-social-section h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.125rem, 4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.wtc-social-section__lede {
	margin: 0;
	max-width: 36ch;
	color: var(--wp--preset--color--accent-4);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	line-height: 1.55;
}

.wtc-social-section__lede strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wtc-social-section--text .wtc-social-section__inner { align-items: start; }
.wtc-social-section--text h2 { margin-bottom: 0; }

/* Influence strategy: approved portrait mosaic (photo proposal 03). */
.wtc-creator-mosaic__visual {
	width: 100%;
	max-width: 640px;
	min-width: 0;
	justify-self: center;
	aspect-ratio: 1;
	position: relative;
	container-type: inline-size;
}

.wtc-creator-mosaic__grid {
	position: absolute;
	inset: 5%;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: repeat(7, minmax(0, 1fr));
	gap: clamp(5px, 1.3cqw, 8px);
}

.wtc-creator-mosaic__photo { overflow: hidden; position: relative; z-index: 1; }
.wtc-creator-mosaic__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.55);
	transition: filter .6s ease;
}

.wtc-creator-mosaic__dots {
	background-image: radial-gradient(circle, var(--wtc-slate-soft) 1px, transparent 1.5px);
	background-size: 9px 9px;
	opacity: .48;
}

.wtc-creator-mosaic__count {
	grid-column: 3 / 6;
	grid-row: 3 / 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--wtc-slate-deep);
}

.wtc-creator-mosaic__count strong {
	font-size: 8cqw;
	font-weight: 500;
	letter-spacing: -.05em;
	line-height: 1.1;
}

.wtc-creator-mosaic__count span {
	font-family: "Geist Mono", monospace;
	font-size: 1.6cqw;
	letter-spacing: .13em;
	margin-top: 9px;
}

/* A single color wave accompanies the reveal, then settles within five seconds. */
.wtc-creator-mosaic.is-live .wtc-creator-mosaic__photo img {
	animation: wtc-creator-color 3s ease-in-out 1;
	animation-delay: calc(var(--wtc-creator-delay) / 6);
}

@keyframes wtc-creator-color {
	0%, 100% { filter: saturate(.55); }
	40% { filter: saturate(.9); }
}

@media (hover: hover) {
	.wtc-creator-mosaic__photo:hover img { filter: saturate(1); }
}

.wtc-creator-mosaic__field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	fill: var(--wtc-slate-soft);
	opacity: .48;
	overflow: visible;
}

.wtc-creator-mosaic__visual.is-interactive .wtc-creator-mosaic__dots { background: none; }
.wtc-creator-mosaic__visual.is-interactive .wtc-creator-mosaic__photo {
	scale: calc(1 + .065 * var(--wtc-creator-lit, 0));
}
.wtc-creator-mosaic .wtc-creator-mosaic__visual.is-interactive .wtc-creator-mosaic__photo img {
	animation: none;
	transition: none;
	filter: saturate(calc(.55 + .45 * var(--wtc-creator-lit, 0)))
		brightness(calc(1 + .06 * var(--wtc-creator-lit, 0)));
}

.wtc-js .wtc-creator-mosaic__visual { opacity: 0; translate: 0 14px; }
.wtc-creator-mosaic.is-live .wtc-creator-mosaic__visual {
	opacity: 1;
	translate: none;
	transition: opacity .75s ease .12s, translate .75s cubic-bezier(.22, 1, .36, 1) .12s;
}

@media (min-width: 900px) {
	.wtc-creator-mosaic .wtc-social-section__inner {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: clamp(2rem, 3vw, 3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtc-js .wtc-creator-mosaic .wtc-creator-mosaic__visual {
		opacity: 1;
		translate: none;
		transition: none;
	}
	.wtc-creator-mosaic.is-live .wtc-creator-mosaic__photo img { animation: none; transition: none; }
}

.wtc-influence__visual {
	position: relative;
	width: 100%;
	max-width: 640px;
	justify-self: center;
	/* Like the hero canvas, contain scattered dots within the illustration. */
	overflow: clip;
}

.wtc-influence__visual .network {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.wtc-influence__visual .track,
.wtc-influence__visual .connection {
	stroke: var(--wtc-slate-soft);
	stroke-width: .8;
	fill: none;
	opacity: .26;
}

.wtc-influence__visual .node,
.wtc-influence__visual .influencer,
.wtc-influence__visual .traveler { fill: var(--wtc-slate-deep); }

.wtc-influence__visual .ring,
.wtc-influence__visual .brand-ring {
	fill: var(--wp--preset--color--base);
	stroke: var(--wtc-slate-deep);
	stroke-width: .8;
}

.wtc-influence__visual .brand-ring { stroke-width: 1.1; }
.wtc-influence__visual .brand-logos { pointer-events: none; }
.wtc-influence__visual .relay-halo,
.wtc-influence__visual .brand-halo {
	fill: none;
	stroke: var(--wtc-slate-deep);
	stroke-width: .7;
	pointer-events: none;
}

/* The central brand remains clickable; no caption or controls below the graph. */
.wtc-influence__replay {
	display: none;
	position: absolute;
	left: 43%;
	top: 43%;
	width: 14%;
	height: 14%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.wtc-influence__visual.is-interactive .wtc-influence__replay { display: block; }
.wtc-influence__replay:hover { box-shadow: 0 0 0 6px #46586a0a; }
.wtc-influence__replay:focus-visible { outline: 2px solid var(--wtc-slate-deep); outline-offset: 5px; }

/* Programmatic advertising: the approved three-lane content amplifier. */
.wtc-amplifier__visual {
	width: 100%;
	max-width: 640px;
	min-width: 0;
	justify-self: center;
}

.wtc-amplifier__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 440;
	overflow: hidden;
}

.wtc-amplifier__line,
.wtc-amplifier__fine {
	fill: none;
	stroke: var(--wtc-slate-deep);
	stroke-width: 1;
	opacity: .3;
}

.wtc-amplifier__fine {
	stroke: var(--wtc-slate-soft);
	stroke-width: .7;
	opacity: .32;
}

.wtc-amplifier__paper {
	fill: var(--wp--preset--color--base);
	stroke: var(--wtc-slate-deep);
	stroke-width: 1;
}

.wtc-amplifier__dot { fill: var(--wtc-slate-deep); }
.wtc-amplifier__flow { stroke-dasharray: 3 17; }

/* The shared reveal engine starts the motion when this section enters view. */
.wtc-amplifier.is-live .wtc-amplifier__flow {
	animation: wtc-amplifier-flow 4s linear infinite;
	animation-delay: var(--wtc-amplifier-delay, 0s);
}

.wtc-amplifier.is-live .wtc-amplifier__pulse {
	animation: wtc-amplifier-pulse 5s ease-in-out infinite;
	animation-delay: var(--wtc-amplifier-delay, 0s);
}

/* The stream engine owns opacity so larger dots also fade at the loop edges. */
.wtc-amplifier__visual.is-flowing .wtc-amplifier__pulse { animation: none; }

@keyframes wtc-amplifier-flow { to { stroke-dashoffset: -100; } }
@keyframes wtc-amplifier-pulse {
	0%, 100% { opacity: .2; }
	40%, 65% { opacity: 1; }
}

@media (min-width: 900px) {
	.wtc-social-section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.wtc-influence .wtc-social-section__inner {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: clamp(2rem, 3vw, 3rem);
	}
	.wtc-amplifier .wtc-social-section__copy { grid-column: 2; grid-row: 1; }
	.wtc-amplifier__visual { grid-column: 1; grid-row: 1; }
}

.wtc-js .wtc-social-section__copy,
.wtc-js .wtc-social-section--text .wtc-social-section__inner > h2,
.wtc-js .wtc-influence__visual,
.wtc-js .wtc-amplifier__visual { opacity: 0; translate: 0 14px; }

.wtc-social-section.is-live .wtc-social-section__copy,
.wtc-social-section.is-live .wtc-social-section__inner > h2,
.wtc-social-section.is-live .wtc-influence__visual,
.wtc-social-section.is-live .wtc-amplifier__visual {
	opacity: 1;
	translate: none;
	transition: opacity .75s ease, translate .75s cubic-bezier(.22, 1, .36, 1);
}

.wtc-social-section.is-live .wtc-influence__visual,
.wtc-social-section.is-live .wtc-amplifier__visual { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
	.wtc-js .wtc-social-section .wtc-social-section__copy,
	.wtc-js .wtc-social-section--text .wtc-social-section__inner > h2,
	.wtc-js .wtc-influence .wtc-influence__visual,
	.wtc-js .wtc-amplifier .wtc-amplifier__visual { opacity: 1; translate: none; transition: none; }
	.wtc-influence__visual.is-interactive .wtc-influence__replay { display: none; }
	.wtc-amplifier.is-live .wtc-amplifier__flow,
	.wtc-amplifier.is-live .wtc-amplifier__pulse { animation: none; }
}