/*
 * Scene — البيانات (components/concept-portal/scenes/data.php).
 * The grid fades in, seven bars rise one after the other, the trend line
 * joins their tops point by point, and the seed lands on its end and hops.
 * ~3.2 s, once.
 */

/* A chart reads left → right in Arabic too: never mirrored (scene.css mirrors the others in English). */
[dir] .gb-scene--data {
	scale: none;
}

.gb-scene--data .gb-scene__base {
	stroke: rgb(255 255 255 / 0.35);
	stroke-width: 1.5;
}

.gb-scene--data .gb-scene__dash {
	stroke: rgb(255 255 255 / 0.14);
}

.gb-scene--data .gb-scene__bar {
	fill: var(--gb-color-turquoise-a20);
	/* Bars grow from the baseline. */
	transform-origin: 50% 100%;
}

.gb-scene--data .gb-scene__bar--now {
	fill: var(--gb-color-turquoise-a35);
	stroke: var(--gb-primary);
	stroke-width: 1.5;
}

.gb-scene--data .gb-scene__point {
	fill: var(--gb-scene-text);
}

@keyframes gb-data-grow {
	from {
		scale: 1 0;
	}
}

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

	.gb-scene--data[data-gb-play] .gb-scene__bar {
		animation: gb-data-grow 0.55s var(--gb-ease-out) calc(0.2s + var(--i) * 0.12s) both;
	}

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

	.gb-scene--data[data-gb-play] .gb-scene__point {
		animation: gb-scene-pop 0.25s var(--gb-ease-out) calc(1.1s + var(--i) * 0.14s) both;
	}

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

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