/*
 * Offer stage — "lens" (تصوير): a camera viewfinder
 * (components/offer-stage/skins/lens.php).
 * The offers are the shots: each one a real photo of the company's work,
 * under the camera's furniture — corner marks, a rule-of-thirds grid, the
 * focus square, the shot counter, the exposure read-out and a «تصوير بداية
 * نمو» watermark. Choosing a shot fires the flash, closes the shutter for an
 * instant and the photo develops (bright and soft → sharp); the caption
 * pulls focus (owner, 2026-10-05: «زي لقطة تصوير بفلاش»).
 * The navigation is a contact sheet of frames.
 *
 * Layers inside the viewfinder (bottom → top): photo 0, its shade + grid 1,
 * corners / focus / watermark 1, the caption 2, the HUD 3, shutter 4, flash 6.
 */

.gb-offer-stage--lens {
	--gb-lens-ink: rgb(255 255 255 / 0.78);
	--gb-offer-enter: gb-lens-focus;
	--gb-offer-enter-time: 0.6s;
}

/* ---------- Contact sheet (tabs) ---------- */

.gb-offer-stage--lens .gb-offer-tab {
	padding: var(--gb-space-xs);
	border: 1px solid var(--gb-border);
	border-radius: 0.75rem;
	background-color: var(--gb-bg);
	color: var(--gb-color-navy);
}

/* A tiny viewfinder: corner ticks and the focus dot. */
.gb-offer-stage--lens .gb-offer-tab__mark {
	--gb-tick: rgb(255 255 255 / 0.6);

	position: relative;
	inline-size: 2.6rem;
	aspect-ratio: 3 / 2;
	border-radius: 0.3rem;
	background:
		linear-gradient(var(--gb-tick), var(--gb-tick)) 4px 4px / 7px 1.5px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) 4px 4px / 1.5px 6px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) right 4px top 4px / 7px 1.5px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) right 4px top 4px / 1.5px 6px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) left 4px bottom 4px / 7px 1.5px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) left 4px bottom 4px / 1.5px 6px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) right 4px bottom 4px / 7px 1.5px,
		linear-gradient(var(--gb-tick), var(--gb-tick)) right 4px bottom 4px / 1.5px 6px,
		var(--gb-color-navy);
	background-repeat: no-repeat;
}

/* The shot number in the middle of the little frame. */
.gb-os-shot {
	font-size: 0.7rem;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-neutral-0);
	font-variant-numeric: tabular-nums;
}

.gb-offer-stage--lens .gb-offer-tab:hover {
	border-color: var(--gb-primary);
}

.gb-offer-stage--lens .gb-offer-tab[aria-selected="true"] {
	border-color: var(--gb-primary);
	box-shadow: 0 0 0 1px var(--gb-primary), 0 0.75rem 1.5rem -1rem rgb(12 35 66 / 0.4);
	font-weight: var(--gb-weight-bold);
}

.gb-offer-stage--lens .gb-offer-tab[aria-selected="true"] .gb-offer-tab__mark {
	--gb-tick: var(--gb-primary);
}

/* ---------- The viewfinder ---------- */

.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer-stage__screen {
	display: grid;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: clamp(1rem, 3%, 1.75rem);
	border-radius: 1.25rem;
	background:
		radial-gradient(120% 90% at 50% 45%, rgb(255 255 255 / 0.07), transparent 60%),
		radial-gradient(140% 120% at 50% 50%, var(--gb-color-navy) 40%, #050d18 100%);
	color: var(--gb-color-neutral-0);
	box-shadow: 0 2rem 4rem -2rem rgb(12 35 66 / 0.55);
}

/*
 * The view is not positioned, so the frame's furniture (photos, corners,
 * focus, shutter, flash) measures from the whole viewfinder; the caption
 * sits at the bottom, above the read-out.
 */
.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer-stage__view {
	position: static;
	align-items: end;
	justify-items: center;
}

/* No stacking box of its own: the furniture interleaves with the caption (layers above). */
.gb-offer-stage--lens .gb-offer-stage__overlay {
	z-index: auto;
}

/* ---------- The shots (photos) ---------- */

.gb-os-photos {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

/* Only the current shot shows ([data-gb-offer-current], offer-stage.js). */
.gb-os-photo {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.gb-offer-stage--lens:not([data-gb-offer-current]) .gb-os-photo:first-child,
.gb-offer-stage--lens[data-gb-offer-current="1"] .gb-os-photo:nth-child(1),
.gb-offer-stage--lens[data-gb-offer-current="2"] .gb-os-photo:nth-child(2),
.gb-offer-stage--lens[data-gb-offer-current="3"] .gb-os-photo:nth-child(3),
.gb-offer-stage--lens[data-gb-offer-current="4"] .gb-os-photo:nth-child(4),
.gb-offer-stage--lens[data-gb-offer-current="5"] .gb-os-photo:nth-child(5),
.gb-offer-stage--lens[data-gb-offer-current="6"] .gb-os-photo:nth-child(6),
.gb-offer-stage--lens[data-gb-offer-current="7"] .gb-os-photo:nth-child(7),
.gb-offer-stage--lens[data-gb-offer-current="8"] .gb-os-photo:nth-child(8) {
	opacity: 1;
}

/* The same picture twice: blurred and darker to fill the frame, then sharp and whole on top. */
.gb-os-photo__fill,
.gb-os-photo__shot {
	position: absolute;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
}

.gb-os-photo__fill {
	inset: 0;
	object-fit: cover;
	filter: blur(22px) brightness(0.5) saturate(1.2);
	scale: 1.15;
}

.gb-os-photo__shot {
	inset: 0;
	object-fit: contain;
}

/* Shade for the caption (from the bottom) + a soft vignette, then the rule-of-thirds grid. */
.gb-os-photos::before,
.gb-os-photos::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.gb-os-photos::before {
	background:
		linear-gradient(to top, rgb(2 7 14 / 0.85) 0%, rgb(2 7 14 / 0.4) 34%, transparent 58%),
		radial-gradient(ellipse at center, transparent 55%, rgb(2 7 14 / 0.45) 100%);
}

.gb-os-photos::after {
	background-image:
		linear-gradient(to right, transparent calc(33.33% - 0.5px), rgb(255 255 255 / 0.16) calc(33.33% - 0.5px), rgb(255 255 255 / 0.16) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgb(255 255 255 / 0.16) calc(66.66% - 0.5px), rgb(255 255 255 / 0.16) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
		linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgb(255 255 255 / 0.16) calc(33.33% - 0.5px), rgb(255 255 255 / 0.16) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgb(255 255 255 / 0.16) calc(66.66% - 0.5px), rgb(255 255 255 / 0.16) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}

/* «تصوير بداية نمو»: the watermark, top centre between the read-outs. */
.gb-os-lens__watermark {
	position: absolute;
	inset-block-start: clamp(0.75rem, 2.6%, 1.25rem);
	left: 50%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	translate: -50% 0;
	font-size: 0.72rem;
	font-weight: var(--gb-weight-bold);
	color: rgb(255 255 255 / 0.85);
	white-space: nowrap;
	text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

.gb-os-lens__watermark-mark {
	inline-size: 1.2rem;
	block-size: 1.2rem;
	--gb-mark-sheen: transparent;
}

/* The flash: the whole frame goes white for an instant (invisible at rest). */
.gb-os-lens__flash {
	position: absolute;
	inset: 0;
	z-index: 6;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / 0.94) 45%, rgb(255 255 255 / 0.8) 100%);
	opacity: 0;
}

/* HUD read-outs (Latin, as the camera prints them). */
.gb-offer-stage--lens .gb-offer-stage__chrome {
	position: absolute;
	inset-inline: clamp(1.25rem, 4%, 2rem);
	inset-block-start: clamp(0.9rem, 3%, 1.4rem);
	z-index: 3;
}

.gb-offer-stage--lens .gb-offer-stage__chrome--end {
	inset-block: auto clamp(0.9rem, 3%, 1.4rem);
}

.gb-os-hud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	font-size: 0.72rem;
	font-weight: var(--gb-weight-medium);
	letter-spacing: 0.12em;
	color: var(--gb-lens-ink);
	font-variant-numeric: tabular-nums;
}

.gb-os-hud--bottom {
	justify-content: center;
}

.gb-os-hud__battery {
	position: relative;
	inline-size: 1.5rem;
	block-size: 0.75rem;
	border: 1.5px solid var(--gb-lens-ink);
	border-radius: 0.2rem;
	background: linear-gradient(to right, var(--gb-primary) 0 70%, transparent 70%) content-box;
	padding: 1.5px;
}

.gb-os-hud__battery::after {
	content: "";
	position: absolute;
	inset-block: 0.15rem;
	inset-inline-end: -0.3rem;
	inline-size: 0.15rem;
	border-radius: 0 0.1rem 0.1rem 0;
	background-color: var(--gb-lens-ink);
}

/* Exposure scale: ticks, with the meter at 0. */
.gb-os-lens__scale {
	position: relative;
	inline-size: clamp(5rem, 22%, 9rem);
	block-size: 0.6rem;
	background: repeating-linear-gradient(to right, var(--gb-lens-ink) 0 1px, transparent 1px 12.5%);
	mask-image: linear-gradient(to bottom, #000 0 55%, transparent 55%);
}

.gb-os-lens__scale i {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	inline-size: 2px;
	block-size: 100%;
	background-color: var(--gb-accent);
}

/* The shot counter, above the shot's title. */
.gb-os-lens__count {
	display: block;
	margin-block-end: var(--gb-space-xs);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--gb-lens-ink);
	font-variant-numeric: tabular-nums;
}

/* Corner marks of the frame (the viewfinder is symmetric: physical sides are fine). */
.gb-os-lens__corners i {
	position: absolute;
	z-index: 1;
	inline-size: clamp(1.25rem, 5%, 2rem);
	aspect-ratio: 1;
	border: 0 solid rgb(255 255 255 / 0.85);
}

.gb-os-lens__corners i:nth-child(1) {
	top: 9%;
	left: 6%;
	border-top-width: 2px;
	border-left-width: 2px;
}

.gb-os-lens__corners i:nth-child(2) {
	top: 9%;
	right: 6%;
	border-top-width: 2px;
	border-right-width: 2px;
}

.gb-os-lens__corners i:nth-child(3) {
	bottom: 9%;
	left: 6%;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.gb-os-lens__corners i:nth-child(4) {
	bottom: 9%;
	right: 6%;
	border-bottom-width: 2px;
	border-right-width: 2px;
}

/* The focus square (turquoise brackets), behind the words. */
.gb-os-lens__focus {
	position: absolute;
	z-index: 1;
	inset: 50% auto auto 50%;
	inline-size: clamp(6rem, 30%, 11rem);
	aspect-ratio: 1;
	translate: -50% -50%;
	background:
		linear-gradient(var(--gb-primary), var(--gb-primary)) top left / 1.1rem 2px,
		linear-gradient(var(--gb-primary), var(--gb-primary)) top left / 2px 1.1rem,
		linear-gradient(var(--gb-primary), var(--gb-primary)) top right / 1.1rem 2px,
		linear-gradient(var(--gb-primary), var(--gb-primary)) top right / 2px 1.1rem,
		linear-gradient(var(--gb-primary), var(--gb-primary)) bottom left / 1.1rem 2px,
		linear-gradient(var(--gb-primary), var(--gb-primary)) bottom left / 2px 1.1rem,
		linear-gradient(var(--gb-primary), var(--gb-primary)) bottom right / 1.1rem 2px,
		linear-gradient(var(--gb-primary), var(--gb-primary)) bottom right / 2px 1.1rem;
	background-repeat: no-repeat;
	opacity: 0.55;
}

/* The shutter: two blades meet for an instant when a shot is chosen. */
.gb-os-lens__shutter::before,
.gb-os-lens__shutter::after {
	content: "";
	position: absolute;
	z-index: 4;
	inset-inline: 0;
	block-size: 50%;
	background-color: #02070e;
	scale: 1 0;
}

.gb-os-lens__shutter::before {
	inset-block-start: 0;
	transform-origin: top;
}

.gb-os-lens__shutter::after {
	inset-block-end: 0;
	transform-origin: bottom;
}

/* ---------- The shot (panel) ---------- */

/* The caption, above the shade, clear of the bottom read-out. */
.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer {
	position: relative;
	z-index: 2;
	max-inline-size: 34ch;
	margin-block-end: clamp(1.6rem, 6%, 2.4rem);
	text-align: center;
	text-shadow: 0 1px 10px rgb(0 0 0 / 0.45);
}

.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer__number {
	display: none;
}

.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer__title {
	font-size: var(--gb-step-4);
	color: var(--gb-color-neutral-0);
	text-wrap: balance;
}

.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer__text {
	font-size: var(--gb-step-0);
	color: rgb(255 255 255 / 0.82);
	text-wrap: balance;
}

/* ---------- Motion ---------- */

@keyframes gb-lens-focus {
	0% {
		opacity: 0;
		filter: blur(12px);
		scale: 1.06;
	}

	45% {
		opacity: 1;
		filter: blur(5px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		scale: 1;
	}
}

@keyframes gb-lens-blade {
	0%,
	100% {
		scale: 1 0;
	}

	40% {
		scale: 1 1;
	}
}

@keyframes gb-lens-flash {
	0% {
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* The photo develops: bright and soft right after the flash, then sharp. */
@keyframes gb-lens-develop {
	from {
		opacity: 0;
		filter: blur(12px) brightness(1.9);
		scale: 1.05;
	}
}

@keyframes gb-lens-hunt {
	0% {
		scale: 1.35;
		opacity: 0.9;
	}

	55% {
		scale: 0.9;
	}

	80% {
		scale: 1.04;
	}

	100% {
		scale: 1;
		opacity: 0.55;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--lens[data-gb-switch] .gb-os-lens__shutter::before,
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--lens[data-gb-switch] .gb-os-lens__shutter::after {
		animation: gb-lens-blade 0.28s ease-in-out both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--lens[data-gb-switch] .gb-os-lens__focus {
		animation: gb-lens-hunt 0.7s var(--gb-ease-out) 0.15s both;
	}

	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--lens[data-gb-switch] .gb-os-lens__flash {
		animation: gb-lens-flash 0.55s ease-out;
	}

	/* Every shot runs it; only the current one is visible at rest, so only it is seen developing. */
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]) .gb-offer-stage--lens[data-gb-switch] .gb-os-photo {
		animation: gb-lens-develop 0.75s var(--gb-ease-out) 0.1s both;
	}
}

/* ---------- Video mode (revision 14: «تصوير الفيديو» — the viewfinder records) ---------- */

/* The take's clip covers the frame, over its poster (lens.js loads and plays it). */
.gb-os-photo__clip {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	background-color: transparent;
}

/* A video frame is filled edge to edge (the poster too). */
.gb-offer-stage--lens-video .gb-os-photo__shot {
	object-fit: cover;
}

/* No flash and no shutter while recording: a cut. */
.gb-offer-stage--lens-video .gb-os-lens__flash,
.gb-offer-stage--lens-video .gb-os-lens__shutter {
	display: none;
}

/* The red recording light. */
.gb-os-rec {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #ff5a4f;
}

.gb-os-rec i {
	inline-size: 0.6em;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #ff3b30;
	box-shadow: 0 0 0.6em rgb(255 59 48 / 0.8);
}

.gb-os-tc {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* The tab of a take: a red dot instead of the frame's tick when it is chosen. */
.gb-offer-stage--lens-video .gb-offer-tab[aria-selected="true"] .gb-offer-tab__mark {
	--gb-tick: #ff3b30;
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-gb-experience="STATIC_ACCESSIBLE"]):not([data-gb-motion="off"]) .gb-os-rec i {
		animation: gb-lens-rec 1.2s steps(1, end) infinite;
	}
}

@keyframes gb-lens-rec {
	50% {
		opacity: 0.15;
	}
}

/* ---------- Phones ---------- */

@media (max-width: 47.99rem) {
	.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer-stage__screen {
		aspect-ratio: 4 / 5;
	}

	.gb-offer-stage--lens .gb-offer-tab {
		padding: 0.4rem 0.7rem 0.4rem 0.5rem;
	}

	.gb-offer-stage--lens[data-gb-offer-ready] .gb-offer__title {
		font-size: var(--gb-step-3);
	}

	/* A tall frame: the photo fills it (a wide shot is cropped to its centre). */
	.gb-os-photo__shot {
		object-fit: cover;
	}

	.gb-os-lens__watermark {
		font-size: 0.62rem;
	}

	.gb-os-hud {
		font-size: 0.62rem;
		gap: 0.6rem;
	}
}