/* Манифест: крупный текст проявляется по буквам при скролле (как в референсе) */
.manifest {
	position: relative;
	height: 280vh;
	background: var(--c-black);
	color: var(--c-white);
}

.manifest__stage {
	position: sticky;
	top: 0;
	display: grid;
	place-items: center;
	height: 100vh; /* taste-skill-ignore: запасной вариант, ниже 100svh */
	height: 100svh;
	overflow: hidden;
	padding-inline: var(--gutter);
}

/* Карта России с сетью ж/д проступает на второй фразе, маршруты прорисовываются скроллом */
.manifest__map {
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(1500px, 112vw);
	translate: -50% -46%;
	opacity: var(--map, 0);
	pointer-events: none;
}

.manifest__map img,
.manifest__map svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Сеть ж/д — фирменным оранжевым, но приглушённым: маршруты от Екатеринбурга поверх остаются ярче;
	магистрали заметнее, остальные линии — ещё тише */
.manifest__map .map-rail {
	stroke: var(--accent);
	stroke-opacity: 0.38;
	stroke-width: 1;
}

/* Сеть прорастает при скролле: каждый отрезок между развилками растёт от своего начала
	(штрих перезапускается на каждом подпути; самый длинный отрезок — около 180 единиц рисунка).
	Без JS и без анимации --rail не задан — сеть видна целиком */
.js-manifest .manifest__map .map-rail path {
	stroke-dasharray: calc(var(--rail, 1) * 190) 400;
}

.js-manifest .manifest__map .map-hubs,
.js-manifest .manifest__map .map-city[data-city="Красноярск"] {
	opacity: var(--rail, 1);
}

.manifest__map .map-rail-branch {
	stroke-opacity: 0.22; /* stroke-opacity не перемножается со слоем, а заменяет его */
}

.manifest__map .map-route {
	stroke-dasharray: var(--len) var(--len);
	stroke-dashoffset: calc(var(--len) * (1 - var(--draw, 0)));
	filter: drop-shadow(0 0 4px rgba(232, 82, 50, 0.6)); /* taste-skill-ignore: технический стиль */
}

.manifest__map .map-city circle {
	fill: #8a8a8a;
	transition: fill var(--dur-base) var(--ease-out);
}

.manifest__map .map-city text {
	font-family: var(--font-mono); /* taste-skill-ignore: технический стиль */
	font-size: 12px;
	letter-spacing: 0.08em;
	fill: rgba(255, 255, 255, 0.0);
	transition: fill var(--dur-base) var(--ease-out);
}

.manifest__map .map-city.is-reached circle { fill: var(--c-white); }
.manifest__map .map-city.is-reached text { fill: rgba(255, 255, 255, 0.7); }

.manifest__map .map-city--origin circle { fill: var(--accent); }
.manifest__map .map-city--origin text { fill: var(--accent); font-weight: 500; }

/* Крупные ж/д узлы: оранжевые точки на сети, подписи приглушённые — главные города маршрутов ярче */
.manifest__map .map-hub circle {
	fill: var(--accent);
}

.manifest__map .map-hub text {
	font-family: var(--font-mono); /* taste-skill-ignore: технический стиль */
	font-size: 10px;
	letter-spacing: 0.06em;
	fill: rgba(255, 255, 255, 0.42);
}

/* Красноярск — узел на Транссибе, без своего маршрута: оформлен как остальные узлы */
.manifest__map .map-city[data-city="Красноярск"] circle { fill: var(--accent); r: 2.2px; }
.manifest__map .map-city[data-city="Красноярск"] text { fill: rgba(255, 255, 255, 0.42); font-size: 10px; }

/* Пульс вокруг Екатеринбурга */
.manifest__map .map-pulse {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: map-pulse 2.4s var(--ease-out) infinite;
}

@keyframes map-pulse {
	from { transform: scale(1); opacity: 0.9; }
	to { transform: scale(5); opacity: 0; }
}

/* Точка-состав на голове маршрута */
.manifest__map .map-train {
	fill: var(--accent);
}

/* Текст поверх карты — подложка для читаемости */
.manifest.is-second .manifest__text--second {
	text-shadow: 0 0 24px #000, 0 0 48px #000; /* taste-skill-ignore: технический стиль */
}

.manifest__text {
	grid-area: 1 / 1;
	position: relative;
	max-width: 17em;
	font-size: clamp(2rem, 0.9rem + 3.6vw, 4.5rem); /* 32 → 72 */
	font-weight: var(--fw-regular);
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-align: center;
	text-wrap: balance;
}

/* Слово целиком переносится, буквы внутри — отдельные span */
.manifest__word {
	display: inline-block;
	white-space: nowrap;
}

.js-manifest .manifest__char {
	color: rgba(255, 255, 255, 0.14);
	transition: color 120ms linear;
}

.js-manifest .manifest__char.is-on {
	color: var(--c-white);
}

.js-manifest .manifest__char.is-cur {
	color: var(--accent);
}

/* Вторая фраза сменяет первую */
.js-manifest .manifest__text--second {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js-manifest .manifest__text--first {
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.js-manifest .manifest.is-second .manifest__text--first {
	opacity: 0;
	transform: translateY(-24px);
}

.js-manifest .manifest.is-second .manifest__text--second {
	opacity: 1;
	transform: none;
}

/* Без JS и без анимации — обе фразы друг под другом, сразу видны */
html:not(.js-manifest) .manifest {
	height: auto;
}

html:not(.js-manifest) .manifest__stage {
	position: relative;
	gap: var(--space-l);
	padding-block: var(--space-2xl);
}

html:not(.js-manifest) .manifest__text--second {
	position: relative;
	top: auto;
	right: auto;
	grid-area: auto;
	margin: 0;
}

/* Светлая панель поднимается из тёмного со скруглённым верхом */
.panel-up {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--radius-panel) * -1);
	border-radius: var(--radius-panel) var(--radius-panel) 0 0;
	--radius-panel: clamp(24px, 4vw, 56px);
}

@media (prefers-reduced-motion: reduce) {
	.manifest { height: auto; }
	.manifest__stage { position: relative; }
}

/* Вторая фраза — справа, над Сибирью, вписана в рамку-видоискатель:
	верх по верхним уголкам, правый край по правым (рамка: top 22 %, right 12 %, см. .hud--manifest) */
.manifest__text--second {
	position: absolute;
	grid-area: auto; /* отсчёт от всей сцены, как у рамки, а не от ячейки сетки */
	top: 22%;
	right: 12%;
	width: fit-content;
	max-width: 10.1em; /* строки: «Вы видите одну заявку / и один результат — / груз на месте / в оговорённый срок.» */
	margin: calc(3 * 1.06em - 0.14em) 0 0; /* на три строки ниже верхних уголков */
	font-size: clamp(1.75rem, 0.9rem + 2.6vw, 3.5rem); /* 28 → 56 */
	text-align: left;
	text-wrap: wrap; /* без балансировки: самая длинная строка доходит до правого уголка */
}

@media (max-width: 900px) {
	.manifest__map {
		width: 230vw;
		translate: -36% -30%;
	}

	.manifest__text--second {
		position: relative;
		top: auto;
		right: auto;
		justify-self: center;
		align-self: start;
		margin: 26vh 0 0;
		text-align: center;
	}
}

/* Телефон и планшет: обе фразы внутри рамки из уголков (рамка: 8 % слева, 84 % ширины, 22–78 % высоты),
	с отступом от уголков; первая — по центру рамки, вторая — у её нижнего края, над картой */
@media (max-width: 900px) {
	.manifest__text {
		max-width: calc(84vw - 56px);
		font-size: clamp(1.625rem, 0.9rem + 3.4vw, 2.75rem); /* 26 → 44 */
		align-self: center;
		justify-self: center;
	}

	.manifest__text--second {
		position: relative;
		grid-area: 1 / 1; /* та же ячейка, что у первой фразы: иначе вторая строка сетки делит сцену пополам */
		top: auto;
		right: auto;
		align-self: start; /* сверху рамки, карта — под фразой */
		margin: calc(22svh + 28px) 0 0;
		font-size: clamp(1.5rem, 0.8rem + 3vw, 2.5rem); /* 24 → 40 */
		text-align: center;
		text-wrap: balance;
	}
}

/* Телефон и планшет: на второй фразе карта целиком в экране — Россия во всю ширину, под фразой,
	внутри рамки. Карта мельче, поэтому линии, точки и подписи городов в единицах рисунка крупнее */
@media (max-width: 900px) {
	.manifest__map {
		inset: 60% auto auto 50%;
		width: 100vw;
		translate: -50% -50%;
	}

	.manifest__map .map-land { stroke-width: 1.6; }
	.manifest__map .map-rail { stroke-width: 2; }
	.manifest__map .map-routes { stroke-width: 3.5; }
	.manifest__map .map-route { filter: drop-shadow(0 0 6px rgba(232, 82, 50, 0.6)); /* taste-skill-ignore: технический стиль */ }
	.manifest__map .map-city circle { r: 6px; }
	.manifest__map .map-city text { font-size: 22px; }
	.manifest__map .map-train,
	.manifest__map .map-pulse { r: 7px; }
}

@media (max-width: 640px) {
	.manifest__map .map-land { stroke-width: 2.4; }
	.manifest__map .map-rail { stroke-width: 3; }
	.manifest__map .map-routes { stroke-width: 5; }
	.manifest__map .map-city circle { r: 9px; }
	.manifest__map .map-city text { font-size: 38px; letter-spacing: 0.04em; }
	.manifest__map .map-city text { transform: translate(6px, -6px); }
	.manifest__map .map-train,
	.manifest__map .map-pulse { r: 10px; }
}

/* Владивосток у правого края карты: на узком экране подпись — слева от точки */
@media (max-width: 640px) {
	.manifest__map .map-city[data-city="Владивосток"] text { text-anchor: end; transform: translate(-22px, -6px); }
}

/* Узлы на планшете и телефоне: точки крупнее в единицах рисунка, подписи только на планшете */
@media (max-width: 900px) {
	.manifest__map .map-hub circle,
	.manifest__map .map-city[data-city="Красноярск"] circle { r: 4.5px; }
	.manifest__map .map-hub text,
	.manifest__map .map-city[data-city="Красноярск"] text { font-size: 18px; }
}

@media (max-width: 640px) {
	.manifest__map .map-hub circle,
	.manifest__map .map-city[data-city="Красноярск"] circle { r: 7px; }
	.manifest__map .map-hub text,
	.manifest__map .map-city[data-city="Красноярск"] text { display: none; }
}

/* Без анимации — сеть и узлы видны сразу */
@media (prefers-reduced-motion: reduce) {
	.js-manifest .manifest__map .map-rail path { stroke-dasharray: none; }
	.js-manifest .manifest__map .map-hubs,
	.js-manifest .manifest__map .map-city[data-city="Красноярск"] { opacity: 1; }
}