/* Home scene 02: services as four sheets that slide over each other (S01, COMPONENTS 12). */

.svc {
	position: relative;
}

.svs {
	position: relative;
	overflow: hidden;
	background: var(--bg);
	color: var(--fg);
	border-block-start: var(--hairline) solid var(--ln);
}

.svs::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

/* The next sheet darkens the one it covers (--p is set by home-services.js). */
.svs::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink-950);
	opacity: calc(var(--p, 0) * 0.62);
	pointer-events: none;
	z-index: 5;
}

.svs-1 {
	--bg: var(--ink-900);
}

.svs-2 {
	--bg: var(--blue-900);
	background:
		radial-gradient(60% 70% at 90% 20%, color-mix(in srgb, var(--blue-500) 70%, transparent), transparent 70%),
		linear-gradient(160deg, var(--blue-900), var(--ink-950) 75%);
}

.svs-3 {
	--bg: var(--gray-50);
}

.svs-4 {
	--bg: var(--ink-950);
	background:
		radial-gradient(45% 55% at 20% 100%, color-mix(in srgb, var(--gold-300) 22%, transparent), transparent 70%),
		var(--ink-950);
}

.svs-grid {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, var(--ln) 0 var(--hairline), transparent var(--hairline) 64px),
		repeating-linear-gradient(90deg, var(--ln) 0 var(--hairline), transparent var(--hairline) 64px);
	-webkit-mask: radial-gradient(70% 70% at 70% 50%, var(--ink-950), transparent);
	mask: radial-gradient(70% 70% at 70% 50%, var(--ink-950), transparent);
	opacity: 0.8;
}

html[dir="rtl"] .svs-grid {
	-webkit-mask: radial-gradient(70% 70% at 30% 50%, var(--ink-950), transparent);
	mask: radial-gradient(70% 70% at 30% 50%, var(--ink-950), transparent);
}

.svs-wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--margin);
	align-items: center;
	padding-block: calc(var(--hdr-h, 72px) + 28px) clamp(40px, 8vw, 72px);
	padding-inline: var(--rail);
}

.svs-tabs {
	position: absolute;
	inset-block-start: calc(var(--hdr-h, 72px) + 12px);
	inset-inline: var(--rail);
	padding-inline: 20px;
	display: flex;
	justify-content: space-between;
	color: var(--fg2);
	z-index: 2;
}

.svs-tabs b {
	color: var(--hi);
	font-weight: 500;
}

.svs h3 {
	margin-block: 18px 22px;
	font-size: clamp(40px, 12vw, 64px);
	font-weight: 300;
	letter-spacing: -0.045em;
	line-height: 0.92;
}

.svs h3 strong {
	font-weight: 800;
}

.svs .lead {
	margin-block-end: 22px;
	font-size: 15px;
}

.specs {
	display: none;
	margin-block-end: 28px;
	max-width: 420px;
}

.specs div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-block: 10px;
	border-block-start: var(--hairline) solid var(--ln-s);
	color: var(--fg2);
}

.specs div:last-child {
	border-block-end: var(--hairline) solid var(--ln-s);
}

.specs dd {
	margin: 0;
	color: var(--fg);
	font-weight: 500;
}

.svs .go {
	color: var(--fg);
}

.svs-draw {
	position: relative;
	display: grid;
	place-items: center;
	height: clamp(260px, 40svh, 360px);
}

.svs-draw svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.svs-ttl {
	display: none;
	position: absolute;
	inset-inline-end: var(--rail);
	inset-block-end: 0;
	margin-inline-end: 20px;
	border: var(--hairline) solid var(--ln-s);
	border-block-end: 0;
	color: var(--fg2);
	font-size: 11px;
	z-index: 2;
}

.svs-ttl span {
	padding: 8px 14px;
	border-inline-start: var(--hairline) solid var(--ln-s);
}

.svs-ttl span:first-child {
	border: 0;
}

/* Line drawings: strokes draw in when core.js adds .in to the sheet; fades and packets follow. */
.dr path,
.dr rect,
.dr circle,
.dr line {
	fill: none;
	stroke: var(--fg);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

.dr .gold {
	stroke: var(--hi);
}

.dr .blue {
	stroke: var(--acc-t);
}

.dr .soft {
	stroke: var(--ln-s);
}

.dr .solid {
	fill: var(--bg);
}

.dr .fillg {
	fill: var(--hi);
	stroke: none;
}

.dr .fillb {
	fill: var(--acc);
	stroke: none;
}

.dr text {
	fill: var(--fg2);
	font: 500 11px var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

:lang(ar) .dr text {
	letter-spacing: 0;
}

.dr .d {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s var(--ease-io);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.js:not(.rm) [data-svs]:not(.in) .dr .d {
	stroke-dashoffset: 1;
}

.dr .fade {
	transition: opacity 0.8s 1.1s;
}

.js:not(.rm) [data-svs]:not(.in) .dr .fade {
	opacity: 0;
}

.node rect {
	transition:
		stroke 0.3s,
		fill 0.3s;
}

.node:hover rect,
.node:focus-visible rect {
	stroke: var(--hi);
	fill: var(--hi-wash);
}

/* Websites: a page frame that narrows from desktop to phone. */
.rz {
	display: grid;
	gap: 14px;
	justify-items: center;
	width: 100%;
}

.rz-dim {
	display: flex;
	align-items: center;
	gap: 10px;
	width: var(--fw, 100%);
	color: var(--hi);
	font-size: 11px;
	letter-spacing: 0.14em;
}

.rz-dim::before,
.rz-dim::after {
	content: "";
	flex: 1;
	height: var(--hairline);
	background: currentColor;
	opacity: 0.6;
}

.rz-box {
	display: grid;
	place-items: center;
	width: 100%;
	height: min(34svh, 300px);
}

.rz-frame {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: var(--hairline) solid var(--ln-s);
	border-radius: 3px;
	background: color-mix(in srgb, var(--ink-950) 55%, transparent);
	animation: svs-rz 11s var(--ease-io) infinite;
}

@keyframes svs-rz {
	0%,
	12% {
		width: 100%;
	}

	34%,
	50% {
		width: 58%;
	}

	72%,
	88% {
		width: 30%;
	}

	100% {
		width: 100%;
	}
}

.rz-bar {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	border-block-end: var(--hairline) solid var(--ln);
}

.rz-bar i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ln-s);
}

.rz-bar i:first-child {
	background: var(--gold-300);
}

.rz-hero {
	display: grid;
	gap: 8px;
	margin: 12px;
	padding: 16px;
	min-height: 34%;
	border-radius: 2px;
	background: linear-gradient(120deg, var(--blue-500), var(--blue-900));
}

.rz-hero b {
	height: 12px;
	width: 62%;
	background: var(--white);
	opacity: 0.92;
}

.rz-hero em {
	height: 6px;
	width: 40%;
	background: var(--white);
	opacity: 0.5;
}

.rz-hero u {
	height: 18px;
	width: 56px;
	margin-block-start: 6px;
	background: var(--gold-300);
}

.rz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
	gap: 10px;
	padding: 0 12px 12px;
}

.rz-grid i {
	height: 62px;
	border: var(--hairline) solid var(--ln-s);
	background:
		linear-gradient(var(--ln-s), var(--ln-s)) 8px 8px / 40% 6px no-repeat,
		linear-gradient(var(--ln), var(--ln)) 8px 22px / 70% 4px no-repeat;
}

.rz-tag {
	color: var(--fg2);
}

/* Apps: the three screens fan out on hover. */
.pg {
	transform-origin: center;
	transition: transform 1s var(--ease);
}

.svs-draw:hover .pg.a {
	transform: translate(calc(var(--dir) * -96px), -10px) rotate(-8deg);
}

.svs-draw:hover .pg.c {
	transform: translate(calc(var(--dir) * 96px), -10px) rotate(8deg);
}

.pg.b {
	animation: svs-bob 4s ease-in-out infinite;
}

@keyframes svs-bob {
	50% {
		transform: translateY(-10px);
	}
}

.tap {
	transform-box: fill-box;
	transform-origin: center;
	animation: svs-tap 3s var(--ease) infinite;
}

@keyframes svs-tap {
	0% {
		transform: scale(0.2);
		opacity: 0.9;
	}

	70%,
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

/* Security: radar sweep and blips. */
.sweep {
	transform-box: view-box;
	transform-origin: 300px 220px;
	animation: svs-spin 5s linear infinite;
}

@keyframes svs-spin {
	to {
		transform: rotate(360deg);
	}
}

.blip {
	opacity: 0;
	animation: svs-blip 5s linear infinite;
}

@keyframes svs-blip {
	0% {
		opacity: 0;
	}

	4% {
		opacity: 1;
	}

	30% {
		opacity: 0.9;
	}

	60%,
	100% {
		opacity: 0;
	}
}

.svs-draw:hover .sweep {
	animation-duration: 1.8s;
}

/* Animations wait until the sheet is on screen. */
.js:not(.rm) [data-svs]:not(.in) :is(.rz-frame, .pg.b, .tap, .sweep, .blip) {
	animation-play-state: paused;
}

/* Wide and tall screens: the sheets stick and the next one slides over. Below that they stack in the flow. */
@media (min-width: 1000px) and (min-height: 600px) {
	.svs {
		position: sticky;
		inset-block-start: 0;
		height: 100svh;
		min-height: 600px;
		transform-origin: 50% 100%;
		will-change: transform;
		box-shadow: 0 -30px 60px color-mix(in srgb, var(--ink-950) 50%, transparent);
	}

	.svs-wrap {
		height: 100%;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		padding-block: 90px 60px;
	}

	.svs h3 {
		font-size: clamp(44px, 6.4vw, 112px);
	}

	.svs .lead {
		margin-block-end: 26px;
		font-size: var(--fs-lead);
	}

	.specs {
		display: grid;
	}

	.svs-draw {
		height: min(64svh, 560px);
	}

	.rz-box {
		height: min(50svh, 430px);
	}

	.svs-ttl {
		display: flex;
	}
}

.rm .svs {
	transform: none;
}

.rm .pk,
.rm .tap {
	display: none;
}

.rm .rz-frame,
.rm .pg.b,
.rm .sweep {
	animation: none;
}

.rm .blip {
	opacity: 0.9;
}

.rm .pg {
	transition: none;
}