/* ==========================================================================
   SF Plumbing — Opening logo intro (homepage only)
   Shown only when <html> has .sf-intro-on (set by a tiny inline script in
   <head>), so without JavaScript nothing covers the page.
   ========================================================================== */

.sf-intro { display: none; }

.sf-intro-on .sf-intro {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: block;
	overflow: hidden;
	background: radial-gradient(90% 70% at 50% 55%, #11151a 0%, #05070a 60%, #000 100%);
	color: #fff;
}

.sf-intro-on body { overflow: hidden; }

.sf-intro__scene,
.sf-intro__stage { position: absolute; inset: 0; }

.sf-intro__stage {
	perspective: 1600px;
	perspective-origin: 50% 48%;
	overflow: hidden;
}

/* Floor plan of pipes, laid down in perspective */
.sf-intro__floor {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2400px;
	height: 2400px;
	margin: -1200px 0 0 -1200px;
	transform: rotateX(64deg) translate3d(0, 120px, -300px);
	will-change: transform, opacity;
}
.sf-intro__floor svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sf-intro__grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.5; }
.sf-intro__pipes path { stroke: rgba(255, 255, 255, 0.75); stroke-width: 3; }
.sf-intro__branches path { stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; }
.sf-intro__nodes circle { fill: #fff; opacity: 0; }
.sf-intro__water path { stroke: #1567ab; stroke-width: 7; filter: drop-shadow(0 0 6px rgba(21, 103, 171, 0.9)); }

.sf-intro__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1300px, 130vw);
	height: min(500px, 60vw);
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(21, 103, 171, 0.22), rgba(21, 103, 171, 0));
	opacity: 0;
}

.sf-intro__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 2px solid #1567ab;
	border-radius: 50%;
	box-shadow: 0 0 30px rgba(21, 103, 171, 0.6);
	opacity: 0;
}

/* 3D logo */
.sf-intro__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(60vw, 960px);
	aspect-ratio: 690 / 192;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
}
.sf-intro__logo3d,
.sf-intro__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-intro__logo3d { transform-style: preserve-3d; opacity: 0; will-change: transform; }
.sf-intro__layer { overflow: visible; }

/* Skip */
.sf-intro__skip {
	position: absolute;
	right: clamp(20px, 5vw, 88px);
	bottom: clamp(24px, 6vh, 64px);
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.6);
	font: 500 0.68rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
}
.sf-intro__skip:hover,
.sf-intro__skip:focus-visible { color: #fff; }
.sf-intro__skip:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

@media (max-width: 767.98px) {
	.sf-intro__logo { width: 84vw; }
	.sf-intro__skip { left: 50%; right: auto; transform: translateX(-50%); }
}