/* Greygram hero — floating mind map. Ported from floating_20.html. */

@font-face {
	font-family: 'GREYGRAM Logo';
	src: url('../fonts/GREYGRAMLogo-VF.ttf') format('truetype');
	font-weight: 0 600;
	font-display: block;
}

/* Hero occupies the first viewport; the rest of the page scrolls below it. */
.hero {
	position: relative;
}

.stage {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	cursor: none;
	user-select: none;
	-webkit-user-select: none;
}

.stage svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wordmark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'GREYGRAM Logo', sans-serif;
	font-size: 40vw;
	color: var(--ink);
	letter-spacing: -0.02em;
	z-index: 3;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	max-width: 96vw;
}

.wordmark .ltr {
	display: inline-block;
	font-weight: 400;
	font-variation-settings: 'wght' 400;
	will-change: font-variation-settings;
}

.node {
	position: absolute;
	font-family: 'Anthine', sans-serif;
	font-style: italic;
	color: var(--grey);
	transform: translate(-50%, -50%);
	z-index: 2;
	white-space: nowrap;
	will-change: opacity, font-size, left, top;
}

.line { stroke-width: 0.7; }

.subline { stroke: var(--ink); stroke-width: 1; opacity: 0; }
.sub1 { stroke-dasharray: 4 3; }
.sub2 { stroke-dasharray: 2 5; }

.cue {
	position: absolute;
	bottom: 42px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	letter-spacing: 0.025em;
	color: var(--ink);
	white-space: nowrap;
	opacity: 1;
}

@media (max-width: 600px) {
	.wordmark { font-size: 48vw; }
}