.swrf-intro {
	--swrf-intro-ink: #07090a;
	--swrf-intro-paper: #e9edee;
	--swrf-intro-benzin: #08c9df;
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	place-items: center;
	overflow: hidden;
	background: transparent;
	color: var(--swrf-intro-paper);
	font-family: "IBM Plex Mono", Consolas, monospace;
	cursor: pointer;
}

html.swrf-intro-pending,
html.swrf-intro-pending body {
	overflow: hidden !important;
}

html.swrf-intro-pending .swrf-intro {
	display: grid;
}

.swrf-intro__curtain {
	position: absolute;
	inset-block: 0;
	z-index: 1;
	width: 51%;
	background:
		radial-gradient(circle at 100% 50%, rgba(8, 201, 223, .07), transparent 34%),
		var(--swrf-intro-ink);
	will-change: transform;
}

.swrf-intro__curtain--left {
	left: 0;
}

.swrf-intro__curtain--right {
	right: 0;
	transform: scaleX(-1);
}

.swrf-intro__stage {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	width: min(92vw, 760px);
	opacity: 0;
	transform: scale(.96);
	will-change: opacity, transform;
}

.swrf-intro__system,
.swrf-intro__skip {
	font-size: clamp(9px, 1.1vw, 12px);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.swrf-intro__system {
	margin-bottom: -18px;
	color: var(--swrf-intro-benzin);
}

.swrf-intro__graphic {
	display: block;
	width: min(76vw, 68vh, 620px);
	height: auto;
	overflow: visible;
}

.swrf-intro__track,
.swrf-intro__scanner {
	fill: none;
	transform-box: fill-box;
	transform-origin: center;
}

.swrf-intro__track {
	stroke: var(--swrf-intro-benzin);
	stroke-width: 2;
	stroke-dasharray: 16 4 16 4 16 4 16 4 16 4;
	stroke-dashoffset: 100;
	opacity: .8;
}

.swrf-intro__scanner {
	stroke: rgba(233, 237, 238, .28);
	stroke-width: 1;
	stroke-dasharray: 2 98;
	stroke-dashoffset: 100;
	opacity: 0;
}

.swrf-intro__sigil {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(.72);
	will-change: opacity, transform, filter;
}

.swrf-intro__node,
.swrf-intro__city,
.swrf-intro__final {
	opacity: 0;
}

.swrf-intro__node line,
.swrf-intro__final line {
	stroke: var(--swrf-intro-benzin);
	stroke-width: 2;
}

.swrf-intro__final text,
.swrf-intro__city text {
	fill: var(--swrf-intro-benzin);
	font-family: "IBM Plex Mono", Consolas, monospace;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.swrf-intro__final text {
	font-size: 13px;
}

.swrf-intro__city-name {
	font-size: 16px;
}

.swrf-intro__city-number {
	font-size: 15px;
}

.swrf-intro__final circle {
	fill: var(--swrf-intro-benzin);
}

.swrf-intro__readout {
	display: grid;
	grid-template-columns: auto minmax(70px, 150px) auto;
	align-items: center;
	gap: 14px;
	width: min(86vw, 560px);
	margin-top: -24px;
	opacity: 0;
	font-size: clamp(8px, 1vw, 11px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.swrf-intro__readout span {
	color: var(--swrf-intro-benzin);
}

.swrf-intro__readout strong {
	font-weight: 600;
	white-space: nowrap;
}

.swrf-intro__readout i {
	position: relative;
	display: block;
	height: 1px;
	overflow: hidden;
	background: rgba(233, 237, 238, .22);
}

.swrf-intro__readout i::after {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--swrf-intro-benzin);
	transform: translateX(-101%);
}

.swrf-intro__skip {
	margin-top: 28px;
	color: rgba(233, 237, 238, .38);
	opacity: 0;
}

html.swrf-intro-running .swrf-intro__stage {
	animation: swrf-intro-stage var(--swrf-intro-duration, 2600ms) cubic-bezier(.65, 0, .2, 1) forwards;
}

html.swrf-intro-running .swrf-intro__curtain--left {
	animation: swrf-intro-curtain-left var(--swrf-intro-duration, 2600ms) cubic-bezier(.7, 0, .25, 1) forwards;
}

html.swrf-intro-running .swrf-intro__curtain--right {
	animation: swrf-intro-curtain-right var(--swrf-intro-duration, 2600ms) cubic-bezier(.7, 0, .25, 1) forwards;
}

html.swrf-intro-running .swrf-intro__track {
	animation: swrf-intro-track 920ms cubic-bezier(.65, 0, .25, 1) 80ms forwards;
}

html.swrf-intro-running .swrf-intro__scanner {
	animation: swrf-intro-scanner 1250ms linear 260ms forwards;
}

html.swrf-intro-running .swrf-intro__node {
	animation: swrf-intro-node 230ms cubic-bezier(.2, .9, .3, 1.45) forwards;
	animation-delay: calc(180ms + (var(--node-index) * 125ms));
}

html.swrf-intro-running .swrf-intro__city {
	animation: swrf-intro-city 340ms cubic-bezier(.2, .85, .3, 1) forwards;
	animation-delay: calc(260ms + (var(--node-index) * 125ms));
}

html.swrf-intro-running .swrf-intro__sigil {
	animation: swrf-intro-sigil 740ms cubic-bezier(.2, .85, .25, 1) 690ms forwards;
}

html.swrf-intro-running .swrf-intro__final {
	animation: swrf-intro-final 620ms cubic-bezier(.2, .9, .2, 1) 1110ms forwards;
}

html.swrf-intro-running .swrf-intro__readout {
	animation: swrf-intro-readout 360ms ease 650ms forwards;
}

html.swrf-intro-running .swrf-intro__readout i::after {
	animation: swrf-intro-progress 980ms cubic-bezier(.65, 0, .3, 1) 730ms forwards;
}

html.swrf-intro-running .swrf-intro__skip {
	animation: swrf-intro-skip 300ms ease 650ms forwards;
}

@keyframes swrf-intro-stage {
	0% { opacity: 0; transform: scale(.96); }
	9%, 70% { opacity: 1; transform: scale(1); }
	82% { opacity: 1; transform: scale(1.025); }
	100% { opacity: 0; transform: scale(1.07); }
}

@keyframes swrf-intro-curtain-left {
	0%, 76% { transform: translateX(0); }
	100% { transform: translateX(-101%); }
}

@keyframes swrf-intro-curtain-right {
	0%, 76% { transform: scaleX(-1) translateX(0); }
	100% { transform: scaleX(-1) translateX(-101%); }
}

@keyframes swrf-intro-track {
	0% { stroke-dashoffset: 100; opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: .84; }
}

@keyframes swrf-intro-scanner {
	0% { stroke-dashoffset: 100; opacity: 0; transform: rotate(-90deg); }
	15% { opacity: .9; }
	100% { stroke-dashoffset: 0; opacity: 0; transform: rotate(270deg); }
}

@keyframes swrf-intro-node {
	0% { opacity: 0; }
	45% { opacity: 1; }
	100% { opacity: .78; }
}

@keyframes swrf-intro-city {
	0% { opacity: 0; }
	45% { opacity: 1; }
	100% { opacity: .86; }
}

@keyframes swrf-intro-sigil {
	0% { opacity: 0; transform: scale(.72); filter: brightness(1); }
	58% { opacity: 1; transform: scale(1.035); filter: brightness(1.65); }
	100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes swrf-intro-final {
	0% { opacity: 0; }
	55% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: .82; }
}

@keyframes swrf-intro-readout {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes swrf-intro-progress {
	from { transform: translateX(-101%); }
	to { transform: translateX(0); }
}

@keyframes swrf-intro-skip {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 600px) {
	.swrf-intro__system {
		margin-bottom: -8px;
	}

	.swrf-intro__graphic {
		width: min(92vw, 64vh, 500px);
	}

	.swrf-intro__readout {
		grid-template-columns: auto 1fr;
		margin-top: -8px;
	}

	.swrf-intro__readout i {
		grid-column: 2;
	}

	.swrf-intro__readout strong {
		grid-column: 1 / -1;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.swrf-intro {
		display: none !important;
	}

	html.swrf-intro-pending,
	html.swrf-intro-pending body {
		overflow: auto !important;
	}
}