/*
 * Scene — الجمهور (components/concept-portal/scenes/audience.php).
 * Scattered people move into three circles (needs / language / where they
 * spend time), the circles' icons appear, the brand's seed appears above and
 * a line reaches each circle; the seed hops. ~3.3 s, once.
 */

.gb-scene--audience .gb-scene__zone {
	fill: var(--gb-color-turquoise-a10);
	stroke: var(--gb-color-turquoise-a20);
	stroke-width: 1;
}

.gb-scene--audience .gb-scene__person {
	fill: var(--gb-primary);
}

.gb-scene--audience .gb-scene__icon {
	stroke: var(--gb-scene-text);
	stroke-width: 1.6;
}

.gb-scene--audience .gb-scene__icon .gb-icon__fill {
	fill: var(--gb-scene-text);
	stroke: none;
}

/* From the scattered start (offset --dx/--dy, a paler dot) to its place in a circle. */
@keyframes gb-audience-gather {
	from {
		fill: rgb(255 255 255 / 0.45);
		translate: var(--dx) var(--dy);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gb-scene--audience[data-gb-play] .gb-scene__person {
		animation: gb-audience-gather 1s var(--gb-ease-organic) calc(0.2s + var(--i) * 0.025s) both;
	}

	.gb-scene--audience[data-gb-play] .gb-scene__zone {
		animation: gb-scene-pop 0.5s var(--gb-ease-out) calc(0.85s + var(--i) * 0.12s) both;
	}

	.gb-scene--audience[data-gb-play] .gb-scene__icon {
		animation: gb-scene-pop 0.4s var(--gb-ease-out) calc(1.5s + var(--i) * 0.15s) both;
	}

	.gb-scene--audience[data-gb-play] .gb-scene__seed {
		animation:
			gb-scene-pop 0.3s var(--gb-ease-out) 1.9s both,
			gb-scene-hop 0.8s ease-in-out 2.55s;
	}

	.gb-scene--audience[data-gb-play] .gb-scene__link {
		animation: gb-scene-draw 0.45s var(--gb-ease-out) calc(2s + var(--i) * 0.1s) both;
	}

	.gb-scene--audience[data-gb-play] .gb-scene__ping {
		animation: gb-scene-ping 0.9s var(--gb-ease-out) 2.5s;
	}
}