/* Request band: the closing section above the footer. Speed streaks cross the dark field, the "Our work" tile
   carries a live strip of real project names, and the section fires a gold beam when the form is ready to send. */

.rb {
	--dir: 1;
	--ang: 90deg;
	position: relative;
	padding-block: clamp(72px, 9vw, 140px);
	background:
		radial-gradient(60% 70% at 85% 0%, rgb(var(--blue-500-rgb) / 0.16), transparent 70%),
		var(--ink-950);
	color: var(--fg);
	border-block-start: var(--hairline) solid var(--ln);
	overflow: clip;
}

html[dir="rtl"] .rb {
	--dir: -1;
	--ang: 270deg;
}

/* speed streaks */
.rb-streaks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rb-streaks i {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(var(--n) * 10% - 4%);
	inline-size: clamp(90px, 18vw, 280px);
	block-size: 1px;
	background: linear-gradient(var(--ang), transparent, rgb(var(--blue-300-rgb) / 0.5));
	animation: rb-run calc(5s + var(--n) * 0.8s) linear infinite;
	animation-delay: calc(var(--n) * -1.7s);
}

.rb-streaks i:nth-child(3n) {
	background: linear-gradient(var(--ang), transparent, rgb(var(--gold-300-rgb) / 0.55));
}

@keyframes rb-run {
	from {
		transform: translateX(calc(var(--dir) * -40vw));
	}

	to {
		transform: translateX(calc(var(--dir) * 140vw));
	}
}

/* the beam that fires when the form is complete */
.rb-beam {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 2px;
	background: linear-gradient(var(--ang), transparent, var(--hi) 40%, var(--hi) 60%, transparent);
	opacity: 0;
	transform: translateX(calc(var(--dir) * -100%));
	pointer-events: none;
}

.rb[data-fire] .rb-beam {
	animation: rb-fire 1.2s var(--ease) both;
}

@keyframes rb-fire {
	0% {
		opacity: 1;
		transform: translateX(calc(var(--dir) * -100%));
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateX(calc(var(--dir) * 100%));
	}
}

.rb-in {
	position: relative;
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.rb-side {
	display: grid;
	gap: var(--sp-24);
	justify-items: start;
	min-inline-size: 0;
}

.rb-side .d2 {
	font-size: clamp(40px, 5.4vw, 84px);
}

/* the "Our work" tile */
.rb-work {
	position: relative;
	display: grid;
	gap: var(--sp-8);
	inline-size: 100%;
	padding: var(--sp-24);
	border: var(--hairline) solid var(--ln-s);
	overflow: hidden;
	isolation: isolate;
	color: var(--fg);
	transition: border-color var(--d-fast);
}

.rb-work::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hi-wash);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--d-base) var(--ease);
}

html[dir="rtl"] .rb-work::before {
	transform-origin: right;
}

.rb-work:hover,
.rb-work:focus-visible {
	border-color: var(--hi);
}

.rb-work:hover::before,
.rb-work:focus-visible::before {
	transform: scaleX(1);
}

.rb-work-k {
	color: var(--hi);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

:lang(ar) .rb-work-k {
	letter-spacing: 0;
	text-transform: none;
}

.rb-work-t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-16);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.rb-work .arr {
	flex: none;
	inline-size: 0.6em;
	block-size: 0.6em;
	color: var(--hi);
	transition: transform var(--d-base) var(--ease);
}

html[dir="rtl"] .rb-work .arr {
	transform: scaleX(-1);
}

.rb-work:hover .arr,
.rb-work:focus-visible .arr {
	transform: translateX(calc(var(--dir) * 10px));
}

html[dir="rtl"] .rb-work:hover .arr,
html[dir="rtl"] .rb-work:focus-visible .arr {
	transform: scaleX(-1) translateX(calc(var(--dir) * -10px));
}

/* the strip of real project names; the list is printed twice so the loop has no seam */
.rb-strip {
	display: block;
	margin-block-start: var(--sp-8);
	padding-block-start: var(--sp-12);
	border-block-start: var(--hairline) solid var(--ln);
	overflow: hidden;
	color: var(--fg2);
	font-size: var(--fs-s);
	mask-image: linear-gradient(90deg, transparent, var(--ink-950) 12%, var(--ink-950) 88%, transparent);
}

.rb-strip > span {
	display: flex;
	inline-size: max-content;
	gap: var(--sp-16);
	padding-inline-end: var(--sp-16);
	white-space: nowrap;
	animation: rb-marquee 38s linear infinite;
}

.rb-strip b {
	font-weight: 500;
}

.rb-strip i {
	align-self: center;
	inline-size: 6px;
	block-size: 6px;
	background: var(--hi);
	transform: rotate(45deg);
}

@keyframes rb-marquee {
	to {
		transform: translateX(calc(var(--dir) * -50%));
	}
}

.rb-work:hover .rb-strip > span,
.rb-work:focus-visible .rb-strip > span {
	animation-duration: 14s;
}

/* the compact form */
.rb .rq {
	position: relative;
}

.rb .rq-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}

.rb .rq-body {
	gap: var(--sp-16);
}

/* ready: the send button pulses until it is pressed */
.rb[data-ready] .rq-act button[type="submit"]:not(:disabled) {
	animation: rb-pulse 1.8s var(--ease) infinite;
}

@keyframes rb-pulse {
	0% {
		box-shadow: 0 0 0 0 rgb(var(--gold-300-rgb) / 0.55);
	}

	70%,
	100% {
		box-shadow: 0 0 0 16px rgb(var(--gold-300-rgb) / 0);
	}
}

@media (min-width: 1000px) {
	.rb-in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.rb-side {
		position: sticky;
		inset-block-start: calc(var(--hdr-h) + var(--sp-24));
	}
}

/* the OS reduced-motion setting is ignored (owner rule); only the site's own pause button stops the motion */
html.rm .rb-streaks i,
html.rm .rb-strip > span,
html.rm .rb[data-ready] .rq-act button[type="submit"] {
	animation: none;
}

html.rm .rb[data-fire] .rb-beam {
	animation: none;
}

/* denser option cards so the whole form stays short */
.rb .ck-card {
	min-block-size: 44px;
	padding: var(--sp-8) var(--sp-12);
	font-size: var(--fs-s);
}

.rb .rq-needs {
	gap: var(--sp-8);
}