/*
 * Scene — الاستراتيجية (components/concept-portal/scenes/strategy.php).
 * Today (ring) → the long ways appear → the destination (diamond) → the
 * shortest route draws, its three steps light up → the seed's light runs
 * along it → the seed lands in the diamond and hops. ~3.4 s, once.
 */

.gb-scene--strategy .gb-scene__step,
.gb-scene--strategy .gb-scene__core {
	fill: var(--gb-scene-text);
}

.gb-scene--strategy .gb-scene__ring {
	stroke: var(--gb-primary);
	stroke-width: 2.5;
}

.gb-scene--strategy .gb-scene__ping--today {
	stroke: var(--gb-primary);
}

.gb-scene--strategy .gb-scene__goal .gb-scene__line {
	fill: var(--gb-color-turquoise-a10);
}

/* The seed's light: a short dash on the route, invisible at rest (like the portal's energy). */
.gb-scene--strategy .gb-scene__run {
	stroke: var(--gb-seed);
	stroke-width: 5;
	stroke-dasharray: 0.1 1.2;
	stroke-dashoffset: 0.1;
	opacity: 0;
}

@keyframes gb-strategy-run {
	0% {
		opacity: 1;
		stroke-dashoffset: 0.1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		stroke-dashoffset: -1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gb-scene--strategy[data-gb-play] .gb-scene__terrain {
		animation: gb-scene-fade 0.6s linear both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__today {
		animation: gb-scene-pop 0.4s var(--gb-ease-out) 0.1s both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__ping--today {
		animation: gb-scene-ping 1s var(--gb-ease-out) 0.35s;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__detour {
		animation: gb-scene-fade 0.6s linear 0.3s both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__detour + .gb-scene__detour {
		animation-delay: 0.5s;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__goal {
		animation: gb-scene-pop 0.45s var(--gb-ease-out) 0.6s both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__route {
		animation: gb-scene-draw 0.9s var(--gb-ease-in-out) 0.9s both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__step {
		animation: gb-scene-pop 0.3s var(--gb-ease-out) calc(1.1s + var(--i) * 0.22s) both;
	}

	.gb-scene--strategy[data-gb-play] .gb-scene__run {
		animation: gb-strategy-run 0.65s var(--gb-ease-in-out) 1.8s;
	}

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

	.gb-scene--strategy[data-gb-play] .gb-scene__ping:not(.gb-scene__ping--today) {
		animation: gb-scene-ping 0.9s var(--gb-ease-out) 2.45s;
	}
}