/*
 * Home: Values (pages/home/values.php) — four tall panels, each with its own
 * line drawing (revision 2) and its stretched name, after the profile's
 * «القيم» page. The outlined numbers were removed in revision 4 (owner): the
 * drawing is now the panel's picture, larger and centred.
 */

.gb-values {
	--gb-focus: var(--gb-focus-inverse);

	padding-block: var(--gb-space-2xl);
	/*
	 * Same background as the About section (the profile's dark page, D-45):
	 * About + Values read as one continuous «profile chapter», no seam.
	 */
	background-color: var(--gb-color-profile-deep);
	background-image: var(--gb-profile-bg);
	color: var(--gb-scene-text);
}

.gb-values__title {
	margin-block-end: var(--gb-space-l);
	font-size: var(--gb-step-5);
	color: var(--gb-primary);
}

.gb-values__list {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-block-size: clamp(16rem, 30vw, 24rem);
}

.gb-values__item {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	min-inline-size: 0;
	padding: var(--gb-space-m);
	overflow: hidden;
	border-radius: var(--gb-radius-m);
	background-color: rgb(255 255 255 / 0.03);
	background-image: radial-gradient(90% 60% at 50% 0%, var(--gb-color-turquoise-a10), transparent 70%);
	transition:
		flex-grow var(--gb-duration-slow) var(--gb-ease-out),
		background-color var(--gb-duration-base) linear;
}

.gb-values__name {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-3);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-scene-text);
}

@media (hover: hover) and (min-width: 48rem) {
	.gb-values__item:hover {
		flex-grow: 1.6;
		background-color: rgb(255 255 255 / 0.06);
	}
}

/* ---------- The values' drawings (pages/home/values/{key}.php) ---------- */

/*
 * One line drawing per value, above the name (the panel's picture). The
 * markup at rest is the finished drawing; keyframes declare only their start
 * frame (plus a middle frame for transient effects). values.js hides it
 * ([data-gb-wait]) until the panel comes into view, then plays it once
 * ([data-gb-play]); hover or a tap plays it again. About 1.6 s, never looping.
 */
.gb-values__art {
	align-self: center;
	margin-block: auto;
	inline-size: clamp(7rem, 3.5rem + 7vw, 12rem);
	block-size: auto;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-values__art * {
	transform-box: fill-box;
	transform-origin: center;
}

.gb-values__art[data-gb-wait] {
	opacity: 0;
}

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

.gb-values__faint {
	stroke: var(--gb-color-turquoise-a35);
	stroke-width: 2;
}

/* pathLength="1": fully drawn at rest. */
.gb-values__draw {
	stroke-dasharray: 1;
}

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

/* الإبداع: the spark is a soft filled star. */
.gb-values__shine {
	fill: var(--gb-color-turquoise-a20);
	stroke: var(--gb-primary);
	stroke-width: 2.5;
}

.gb-values__twinkle {
	stroke-width: 2.5;
}

/* الشفافية: three panes of glass, back to front. */
.gb-values__pane {
	stroke-width: 2.5;
}

.gb-values__pane--back {
	fill: rgb(255 255 255 / 0.04);
	stroke: var(--gb-color-turquoise-a35);
}

.gb-values__pane--mid {
	fill: rgb(255 255 255 / 0.05);
	stroke: var(--gb-color-turquoise-a60);
}

.gb-values__pane--front {
	fill: var(--gb-color-turquoise-a10);
	stroke: var(--gb-primary);
}

/* The glint is invisible at rest; it only crosses the glass while playing. */
.gb-values__glint {
	stroke: rgb(255 255 255 / 0.7);
	stroke-width: 3;
	opacity: 0;
}

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

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

@keyframes gb-value-spark {
	from {
		opacity: 0;
		scale: 0.2;
		rotate: -90deg;
	}
}

@keyframes gb-value-twinkle {
	0% {
		opacity: 0;
		scale: 0;
	}

	50% {
		opacity: 1;
		scale: 1.4;
	}
}

@keyframes gb-value-hop {
	0%,
	52%,
	100% {
		translate: 0 0;
	}

	28% {
		translate: 0 -9px;
	}
}

/* The rings tighten once when they lock. */
@keyframes gb-value-lock {
	0%,
	100% {
		scale: 1;
	}

	50% {
		scale: 1.06;
	}
}

@keyframes gb-value-arrow {
	from {
		opacity: 0;
		translate: 34px -34px;
	}
}

/* The target trembles when the arrow lands. */
@keyframes gb-value-hit {
	0%,
	100% {
		translate: 0 0;
	}

	25% {
		translate: -1.5px 1.5px;
	}

	60% {
		translate: 1px -1px;
	}
}

@keyframes gb-value-pane-back {
	from {
		opacity: 0;
		translate: 16px 0;
	}
}

@keyframes gb-value-pane-front {
	from {
		opacity: 0;
		translate: -16px 0;
	}
}

@keyframes gb-value-glint {
	0% {
		opacity: 0;
		translate: 0 0;
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		translate: 44px 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* الإبداع: the line wanders, the spark turns in, sparkles, the seed hops. */
	.gb-values__art[data-gb-play] .gb-values__wander {
		animation: gb-value-draw 0.8s var(--gb-ease-in-out) both;
	}

	.gb-values__art[data-gb-play] .gb-values__spark {
		animation: gb-value-spark 0.5s var(--gb-ease-out) 0.65s both;
	}

	.gb-values__art[data-gb-play] .gb-values__twinkle {
		animation: gb-value-twinkle 0.45s var(--gb-ease-out) 0.95s both;
	}

	.gb-values__art[data-gb-play] .gb-values__twinkle--late {
		animation-delay: 1.1s;
	}

	.gb-values__art--creativity[data-gb-play] .gb-values__seed {
		animation:
			gb-value-pop 0.3s var(--gb-ease-out) 0.9s both,
			gb-value-hop 0.6s ease-in-out 1.2s;
	}

	/* الالتزام: both rings draw towards each other, lock, the seed appears. */
	.gb-values__art[data-gb-play] .gb-values__ring {
		animation: gb-value-draw 0.9s var(--gb-ease-in-out) both;
	}

	.gb-values__art[data-gb-play] .gb-values__ring--second {
		animation-delay: 0.1s;
	}

	.gb-values__art--commitment[data-gb-play] {
		animation: gb-value-lock 0.4s var(--gb-ease-out) 1s;
	}

	.gb-values__art--commitment[data-gb-play] .gb-values__seed {
		animation:
			gb-value-pop 0.3s var(--gb-ease-out) 1s both,
			gb-value-hop 0.6s ease-in-out 1.3s;
	}

	/* النتائج: the rings arrive outside-in, the arrow flies in, the target trembles. */
	.gb-values__art[data-gb-play] .gb-values__target {
		animation:
			gb-value-pop 0.35s var(--gb-ease-out) calc(var(--i, 0) * 0.12s) both,
			gb-value-hit 0.3s ease-out 1.05s;
	}

	.gb-values__art[data-gb-play] .gb-values__arrow {
		animation: gb-value-arrow 0.4s cubic-bezier(0.5, 0, 0.9, 0.6) 0.65s both;
	}

	.gb-values__art--results[data-gb-play] .gb-values__seed {
		animation:
			gb-value-pop 0.3s var(--gb-ease-out) 1.05s both,
			gb-value-hop 0.6s ease-in-out 1.35s;
	}

	/* الشفافية: the stacked panes slide apart, the seed shows through, a glint crosses. */
	.gb-values__art[data-gb-play] .gb-values__pane--back {
		animation: gb-value-pane-back 0.7s var(--gb-ease-out) 0.1s both;
	}

	.gb-values__art[data-gb-play] .gb-values__pane--mid {
		animation: gb-value-pop 0.4s var(--gb-ease-out) both;
	}

	.gb-values__art[data-gb-play] .gb-values__pane--front {
		animation: gb-value-pane-front 0.7s var(--gb-ease-out) 0.1s both;
	}

	.gb-values__art--transparency[data-gb-play] .gb-values__seed {
		animation:
			gb-value-pop 0.3s var(--gb-ease-out) 0.7s both,
			gb-value-hop 0.6s ease-in-out 1s;
	}

	.gb-values__art[data-gb-play] .gb-values__glint {
		animation: gb-value-glint 0.7s ease-in-out 0.9s;
	}
}

/* Narrow screens: a 2 × 2 grid of shorter panels. */
@media (max-width: 47.99rem) {
	.gb-values__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gb-space-2xs);
		min-block-size: 0;
	}

	.gb-values__item {
		gap: var(--gb-space-l);
		min-block-size: 10rem;
	}

	/* The drawing above the name, a little smaller. */
	.gb-values__art {
		margin-block: 0;
		inline-size: 5.5rem;
	}
}