/*
 * Concept scenes — the shared look and motion vocabulary
 * (components/concept-portal/scenes/{key}.php; one file per scene here:
 * scene-strategy.css, scene-research.css, …).
 *
 * Owner, 2026-10-05: «نبني جوه كل حاجه فكرة جميله بناء ع الاسم… حاجه خياليه».
 * Each concept gets a small living picture of its own line of copy.
 *
 * Rules (same as the rest of the site's motion):
 * - The markup at rest IS the finished picture. Keyframes declare only their
 *   START frame (plus a middle frame for transient effects), so a cut-short
 *   animation, reduced motion, STATIC or no JS all show the finished scene.
 * - The scene plays only with [data-gb-play], which concept-portal.js sets
 *   in the dialog when motion is allowed. It plays ONCE (about 3 s) and then
 *   rests: no endless motion (WCAG 2.2.2). A tap plays it again.
 * - Colours from tokens: turquoise lines, white details, the logo's seed
 *   colour for the seed (--gb-seed), never text inside the picture.
 * - Drawn for right-to-left reading; the English site mirrors the picture.
 */

.gb-scene {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[dir="ltr"] .gb-scene {
	scale: -1 1;
}

/* Every part scales / pops around its own centre. */
.gb-scene * {
	transform-box: fill-box;
	transform-origin: center;
}

/* ---------- Shared parts ---------- */

.gb-scene__faint {
	stroke: rgb(255 255 255 / 0.12);
	stroke-width: 1;
}

.gb-scene__dash {
	stroke: rgb(255 255 255 / 0.28);
	stroke-width: 1.5;
	stroke-dasharray: 2 7;
}

.gb-scene__line {
	stroke: var(--gb-primary);
	stroke-width: 3;
}

.gb-scene__thin {
	stroke: var(--gb-root-color);
	stroke-width: 1.5;
}

/* pathLength="1": a dash of 1 is the whole line, so at rest it is fully drawn. */
.gb-scene__draw {
	stroke-dasharray: 1;
}

.gb-scene__seed {
	fill: var(--gb-seed);
	filter: drop-shadow(0 0 5px var(--gb-seed-glow));
}

/* A ring that spreads once and disappears (invisible at rest). */
.gb-scene__ping {
	stroke: var(--gb-seed);
	stroke-width: 2;
	opacity: 0;
}

.gb-scene[data-gb-play] {
	cursor: pointer;
}

/* In the readable panels (no JS / search engines) the picture sits above the text. */
.gb-portal__panel .gb-scene {
	margin-block-end: var(--gb-space-2xs);
}

/* ---------- Shared keyframes ---------- */

@keyframes gb-scene-draw {
	from {
		stroke-dashoffset: 1;
	}
}

@keyframes gb-scene-fade {
	from {
		opacity: 0;
	}
}

@keyframes gb-scene-pop {
	from {
		opacity: 0;
		scale: 0;
	}
}

/* The seed lands with a hop (as on the logo's dash). */
@keyframes gb-scene-hop {
	0%,
	52%,
	86%,
	100% {
		translate: 0 0;
	}

	28% {
		translate: 0 -12px;
	}

	70% {
		translate: 0 -5px;
	}
}

@keyframes gb-scene-ping {
	0% {
		opacity: 0.9;
		scale: 0.6;
	}

	100% {
		opacity: 0;
		scale: 2.6;
	}
}