/* Spartan AI redesign: home hero, dark edition.
   Overrides the pale hero from sprt-20-home.css (this file loads later) and
   hosts the canvas that js/sprt-home-hero.js injects. Everything is scoped to
   the first row of the home page; the hero is complete without the script. */

/* ---------- Surface ---------- */

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) > .vc_row {
	padding-top: clamp(4.5rem, 9vw, 7.5rem);
	padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
	border-bottom: 0;
	background-color: var(--sprt-ink) !important;
	background-image:
		radial-gradient(48rem 26rem at 88% 0%, color-mix(in srgb, var(--sprt-violet) 58%, transparent), transparent 70%),
		radial-gradient(ellipse 60% 50% at 8% 112%, color-mix(in srgb, var(--sprt-signal) 30%, transparent), transparent 72%),
		linear-gradient(165deg, #0d0522 0%, var(--sprt-ink) 42%, #2a1670 100%) !important;
	background-position: 0 0 !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	color: var(--sprt-on-ink);
}

/* Dot field: the ground the network stands on (also the no-script texture) */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) > .vc_row::after {
	height: 60%;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--sprt-lilac) 70%, transparent) 1px, transparent 1.6px);
	background-size: 16px 16px;
	opacity: 0.2;
}

/* Canvas injected by the script: behind the text, never interactive */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) > .vc_row > canvas.sprt-hero-net {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s ease;
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) > .vc_row > canvas.sprt-hero-net.is-live {
	opacity: 1;
}

/* ---------- Type on ink ---------- */

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) h2.firwl-caption {
	background: none;
	color: var(--sprt-on-ink) !important;
}

/* Line 1: status chip with the steadily lit "online" lamp */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(1) h2.firwl-caption {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 1rem 0.45rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--sprt-lilac) 45%, transparent);
	background: color-mix(in srgb, var(--sprt-lilac) 12%, transparent);
	color: var(--sprt-on-ink) !important;
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(1) h2.firwl-caption::before {
	content: "";
	display: block;
	position: static;
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sprt-lilac);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sprt-lilac) 25%, transparent);
	transform: none;
}

/* Line 2: headline, a step larger than the pale version */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(2) h2.firwl-caption {
	margin-top: 1.75rem;
	font-size: clamp(2.625rem, 1.5rem + 4.1vw, 4.75rem);
	line-height: 1.02;
	text-shadow: 0 0 2.5rem color-mix(in srgb, var(--sprt-violet) 55%, transparent);
}

/* Between the two-line wrap (below 960px) and wide screens the one-line
   headline ran close to the perimeter frame: hold it a step smaller there.
   The root font size is 18px, so 5.9vw reaches the 4.75rem cap at 1449px and
   the base formula is at its cap from 1427px: no jump where the query ends. */
@media (min-width: 960px) and (max-width: 1500px) {
	body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(2) h2.firwl-caption {
		font-size: min(5.9vw, 4.75rem);
	}
}

/* Line 3: lead */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(3) h2.firwl-caption {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	color: color-mix(in srgb, var(--sprt-on-ink) 84%, transparent) !important;
}

/* Line 4: strapline. The space above it is the network's open floor. */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(4) {
	margin-top: clamp(12.5rem, 19vw, 14rem);
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(4) .aligncenter::before,
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(4) .aligncenter::after {
	background: var(--sprt-line-ink);
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(4) h2.firwl-caption {
	color: var(--sprt-on-ink) !important;
}

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

/* Same one-second fade the /working-together/ header opens with */
body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div {
	animation: sprt-hero-fade 1s ease both;
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(3) {
	animation-delay: 0.15s;
}

body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div:nth-of-type(4) {
	animation-delay: 0.3s;
}

@keyframes sprt-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) .vc_inner .wpb_wrapper > div {
		animation: none !important;
	}

	body.sprt.home #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:nth-child(1) > .vc_row > canvas.sprt-hero-net {
		transition: none;
	}
}