/* Hero: text is server-rendered and visible on first paint (it is the LCP element - never start it at opacity 0).
   The stage holds a poster image (tier 0/1) and, on capable devices, the WebGL canvas fades in over it. */
.lg-hero {
	position: relative; min-height: 100svh; display: grid; align-items: center;
	padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(64px, 10vh, 120px);
	overflow: clip; isolation: isolate;
}
.lg-hero__stage { position: absolute; inset: 0; z-index: -1; }
.lg-hero__poster, .lg-hero-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
}
.lg-hero-canvas { opacity: 0; transition: opacity 900ms var(--ease-out, ease-out); }
.lg-hero-canvas.is-live { opacity: 1; }
.lg-hero__poster { transition: opacity 900ms var(--ease-out, ease-out); }
.lg-hero__stage.is-live .lg-hero__poster { opacity: 0; } /* the live render replaces the still, never doubles it */
.lg-hero__stage::after { /* keeps the headline side calm and readable whatever renders behind it */
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgb(8 11 20 / .92) 0%, rgb(8 11 20 / .70) 38%, rgb(8 11 20 / 0) 64%),
	            linear-gradient(0deg, var(--lg-midnight) 0%, transparent 22%);
}
@media (max-width: 899px) {
	.lg-hero__poster, .lg-hero-canvas { object-position: 60% 30%; opacity: .55; }
	.lg-hero__stage::after { background: linear-gradient(180deg, rgb(8 11 20 / .35), rgb(8 11 20 / .88) 55%, var(--lg-midnight)); }
}
.lg-hero__content { position: relative; max-width: min(760px, 100%); }
.lg-hero__title { font-size: var(--step-5); margin: .25em 0 .3em; }
.lg-hero__lede { font-size: var(--step-1); color: var(--lg-ink-2); max-width: 36ch; margin: 0 0 1.8em; }
.lg-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* entrance: words rise into focus but stay painted (opacity >= .01 would still delay LCP - so no opacity at all) */
@media (prefers-reduced-motion: no-preference) {
	.lg-hero__title .w { display: inline-block; animation: lg-rise 900ms var(--ease-spring-soft, ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
	@keyframes lg-rise { from { transform: translateY(.35em); filter: blur(6px); } }
}

/* floating glass chips (service teasers). Tier 1 gets a cheap float; tier 2 keeps them still (the canvas moves). */
.lg-hero__chips { position: absolute; right: var(--gutter); bottom: clamp(32px, 8vh, 80px); display: grid; gap: 12px; width: min(300px, 40vw); }
.lg-chip { --r: 18px; padding: 14px 16px; font-size: var(--step--1); color: var(--lg-ink-2); }
.lg-chip strong { display: block; color: var(--lg-ink); font-size: var(--step-0); }
@media (prefers-reduced-motion: no-preference) {
	[data-hero-tier="1"] ~ .lg-hero__chips .lg-chip { animation: lg-float 7s ease-in-out infinite alternate; }
	[data-hero-tier="1"] ~ .lg-hero__chips .lg-chip:nth-child(2) { animation-delay: -2.4s; }
	[data-hero-tier="1"] ~ .lg-hero__chips .lg-chip:nth-child(3) { animation-delay: -4.8s; }
	@keyframes lg-float { to { transform: translate3d(0, -10px, 0); } }
}
@media (max-width: 899px) { .lg-hero__chips { display: none; } }

.lg-scroll-cue {
	position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 26px; height: 42px;
	border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4);
}
.lg-scroll-cue::after { content: ""; position: absolute; left: 50%; top: 9px; width: 3px; height: 8px; translate: -50% 0; border-radius: 2px; background: var(--lg-ink); }
@media (prefers-reduced-motion: no-preference) {
	.lg-scroll-cue::after { animation: lg-cue 1.8s var(--ease-out, ease-out) infinite; }
	@keyframes lg-cue { 60%, 100% { transform: translateY(12px); opacity: 0; } }
}