/*
 * Scene — الرؤى (components/concept-portal/scenes/insight.php).
 * Stars appear, a few send lines inward, four corners light up and the
 * constellation draws the brand's diamond; in its centre the idea sparks:
 * a glow, the seed, short rays — then the seed hops. ~3.4 s, once.
 */

.gb-scene--insight .gb-scene__star {
	fill: rgb(255 255 255 / 0.5);
}

.gb-scene--insight .gb-scene__corner {
	fill: var(--gb-scene-text);
}

.gb-scene--insight .gb-scene__mid {
	fill: var(--gb-color-turquoise-a60);
}

.gb-scene--insight .gb-scene__glow {
	fill: var(--gb-color-turquoise-a10);
}

.gb-scene--insight .gb-scene__ray {
	stroke: var(--gb-seed);
	stroke-width: 2.5;
}

@keyframes gb-insight-twinkle {
	from {
		opacity: 0;
		scale: 0.3;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gb-scene--insight[data-gb-play] .gb-scene__star {
		animation: gb-insight-twinkle 0.5s var(--gb-ease-out) calc(var(--i) * 0.03s) both;
	}

	.gb-scene--insight[data-gb-play] .gb-scene__feed {
		animation: gb-scene-draw 0.5s var(--gb-ease-out) calc(0.6s + var(--i) * 0.07s) both;
	}

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

	.gb-scene--insight[data-gb-play] .gb-scene__shape {
		animation: gb-scene-draw 1s var(--gb-ease-in-out) 1.1s both;
	}

	.gb-scene--insight[data-gb-play] .gb-scene__mid {
		animation: gb-scene-pop 0.25s var(--gb-ease-out) calc(1.3s + var(--i) * 0.2s) both;
	}

	.gb-scene--insight[data-gb-play] .gb-scene__glow {
		animation: gb-scene-pop 0.6s var(--gb-ease-out) 1.95s both;
	}

	.gb-scene--insight[data-gb-play] .gb-scene__seed {
		animation:
			gb-scene-pop 0.35s var(--gb-ease-out) 2.05s both,
			gb-scene-hop 0.8s ease-in-out 2.7s;
	}

	.gb-scene--insight[data-gb-play] .gb-scene__ray {
		animation: gb-scene-draw 0.35s var(--gb-ease-out) 2.2s both;
	}

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