/*
 * Scene — البحث (components/concept-portal/scenes/research.php).
 * The glass sweeps the field from the reading start; each dot lights up as
 * the glass reaches it (--d, computed in the PHP from its x). The glass stops;
 * four facts there join the found point (the seed), which hops. ~3.4 s, once.
 */

.gb-scene--research .gb-scene__dot {
	fill: var(--gb-color-turquoise-a60);
}

.gb-scene--research .gb-scene__fact {
	fill: var(--gb-scene-text);
}

.gb-scene--research .gb-scene__glass {
	fill: var(--gb-color-turquoise-a10);
	stroke: var(--gb-scene-text);
	stroke-width: 3;
}

.gb-scene--research .gb-scene__handle {
	stroke: var(--gb-scene-text);
	stroke-width: 7;
}

/* The glass's trip, as offsets from where it rests (the end frame is its resting place). */
@keyframes gb-research-sweep {
	0% {
		opacity: 0;
		translate: 290px -40px;
	}

	8% {
		opacity: 1;
	}

	35% {
		translate: 190px 22px;
	}

	68% {
		translate: 90px -28px;
	}
}

/* A dot flares white as the glass passes, then settles to its resting turquoise. */
@keyframes gb-research-lit {
	0% {
		fill: rgb(255 255 255 / 0.22);
		scale: 1;
	}

	35% {
		fill: var(--gb-scene-text);
		scale: 1.8;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.gb-scene--research[data-gb-play] .gb-scene__lens {
		animation: gb-research-sweep 1.8s var(--gb-ease-in-out) 0.3s both;
	}

	.gb-scene--research[data-gb-play] .gb-scene__dot {
		animation: gb-research-lit 0.7s var(--gb-ease-out) var(--d) both;
	}

	.gb-scene--research[data-gb-play] .gb-scene__fact {
		animation: gb-scene-pop 0.3s var(--gb-ease-out) calc(2s + var(--i) * 0.08s) both;
	}

	.gb-scene--research[data-gb-play] .gb-scene__spoke {
		animation: gb-scene-draw 0.4s var(--gb-ease-out) calc(2.15s + var(--i) * 0.08s) both;
	}

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

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