/* Первый экран: 3D-полувагон «black edition». Перетаскивание — поворот, плитки — груз */
.hero {
	position: relative;
	height: 260vh; /* прокрутка: камера уходит в профиль, затем скан в контурный фильтр */
	background: #08090b;
	color: var(--text-on-dark);
}

.hero__stage {
	position: sticky;
	top: 0;
	height: 100vh; /* taste-skill-ignore: запасной вариант, ниже 100svh */
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
}

.hero__poster,
.hero__wagon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__poster {
	object-fit: cover;
}

.hero.is-ready .hero__poster {
	display: none;
}

.hero__wagon {
	cursor: grab;
	touch-action: pan-y; /* вертикальный свайп — прокрутка страницы, горизонтальный — поворот */
}

.hero__wagon canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Знак на фоне: контур той же линией, что и сетка; диаметр — 3,4 ячейки, центр — в середине ячейки над центром экрана */
.hero__mark {
	--cell: calc(100vw / 12);
	position: absolute;
	left: 50%;
	top: calc(50% - var(--cell) / 2);
	top: calc(round(nearest, 50%, var(--cell)) - var(--cell) / 2);
	width: calc(var(--cell) * 3.4);
	height: auto;
	translate: -50% -50%;
	/* нижняя часть знака растворяется в фоне */
	mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); /* taste-skill-ignore: маска затухания */
}

@media (max-width: 900px) {
	.hero__mark { width: calc(var(--cell) * 6.8); }
}

/* Затемнение по периметру: рельсы и сетка растворяются к краям экрана, вагон в центре остаётся ярким */
.hero__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: /* taste-skill-ignore: виньетка поверх 3D-сцены */
		radial-gradient(ellipse 62% 58% at 50% 42%, rgba(8, 9, 11, 0) 40%, rgba(8, 9, 11, 0.75) 78%, #08090b 100%), /* taste-skill-ignore */
		linear-gradient(to right, #08090b 0%, rgba(8, 9, 11, 0) 16%, rgba(8, 9, 11, 0) 84%, #08090b 100%); /* taste-skill-ignore */
}

.hero.is-dragging .hero__wagon {
	cursor: grabbing;
}

/* Координаты по углам, как на визитках */
.hero__coord {
	position: absolute;
	color: var(--c-white-60);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.hero__coord--tl { top: calc(var(--header-top) + var(--header-h) + 18px); left: var(--gutter); }
.hero__coord--tr { top: calc(var(--header-top) + var(--header-h) + 18px); right: var(--gutter); }
.hero__coord--bl { bottom: var(--space-m); left: var(--gutter); }
.hero__coord--br { bottom: var(--space-m); right: var(--gutter); }

/* Паспорт вагона — слева, на уровне вагона: название и строки «параметр — значение» на линиях сетки */
.hero__spec {
	position: absolute;
	left: var(--gutter);
	top: 30%;
	width: min(310px, 26vw);
	display: grid;
	gap: 14px;
	pointer-events: none;
}

.hero__spec-name {
	position: relative;
	padding-left: 14px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--accent);
}

.hero__spec-name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--accent);
}

.hero__spec-rows {
	display: grid;
	border-top: 1px solid var(--grid-line-dark); /* taste-skill-ignore: линии таблицы */
	font-size: 12px;
}

.hero__spec-rows div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--grid-line-dark); /* taste-skill-ignore */
}

.hero__spec-rows dt {
	color: var(--text-muted-dark);
	white-space: nowrap;
}

.hero__spec-rows dd {
	color: var(--c-white);
	text-align: right;
	white-space: nowrap;
}

.hero__hint {
	color: var(--text-muted-dark);
	transition: opacity var(--dur-base) var(--ease-out);
}

.hero.is-dragging .hero__hint,
.hero.is-scanned .hero__hint {
	opacity: 0;
}

/* Справа: тип вагона и груз — списки строк, как фильтры блока грузов */
.hero__panel {
	position: absolute;
	right: var(--gutter);
	top: 30%;
	display: grid;
	gap: 22px;
	width: 176px;
}

.hero__types,
.hero__loads {
	display: grid;
	border-top: 1px solid var(--grid-line-dark); /* taste-skill-ignore: линии списка */
}

.hero__loads[hidden] {
	display: none;
}

.hero__type,
.hero__load {
	--vf: 8px;
	--vf-w: 1.5px;
	min-height: 44px;
	padding: 0 14px;
	border-bottom: 1px solid var(--grid-line-dark); /* taste-skill-ignore */
	font-size: 16px;
	text-align: left;
	color: var(--text-muted-dark);
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.hero__type:hover,
.hero__load:hover {
	background: var(--c-white-08);
	color: var(--c-white);
}

/* Вагон в пути — переключение недоступно, пока он не встанет на место */
.hero.is-moving .hero__type {
	cursor: progress;
}

.hero.is-moving .hero__type[aria-pressed="false"] {
	color: rgba(255, 255, 255, 0.28);
	background: transparent;
}

.hero__type[aria-pressed="true"],
.hero__load[aria-pressed="true"] {
	color: var(--c-white);
}

.hero__type[aria-pressed="true"]::before,
.hero__load[aria-pressed="true"]::before {
	opacity: 1;
	scale: 1;
	inset: 4px;
}

/* ---------- Заголовок ---------- */
.hero__content {
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: clamp(40px, 6vh, 88px);
	display: grid;
	justify-items: center;
	gap: var(--space-m);
	max-width: 15em;
	margin-inline: auto;
	text-align: center;
	font-size: min(clamp(2.25rem, 1.2rem + 4.6vw, 5.25rem), 8vh); /* 37 → 84; на низких экранах — по высоте */
	pointer-events: none;
}

.hero__content a {
	pointer-events: auto;
}

.hero__title {
	font-size: 1em;
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
}

.hero__title em {
	font-style: normal;
	color: var(--accent);
}

.hero__tagline {
	font-size: var(--fs-lead);
	line-height: 1.3;
	color: var(--c-white-60);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: var(--space-2xs);
}

@media (max-height: 760px) {
	.hero__tagline { display: none; }
}

/* Телефон: паспорт и груз — строкой под вагоном */
@media (max-width: 900px) {
	.hero__content { max-width: none; }
	.hero__coord--tl,
	.hero__coord--tr { display: none; }
	.hero__spec { top: calc(var(--header-top) + var(--header-h) + 20px); right: var(--gutter); width: auto; gap: 8px; }
	.hero__spec-name { font-size: 14px; }
	/* телефон: только значения, одной строкой */
	.hero__spec-rows { display: flex; flex-wrap: wrap; gap: 4px 0; border: 0; padding-left: 14px; font-size: 11px; }
	.hero__spec-rows div { display: block; padding: 0 10px 0 0; border: 0; }
	.hero__spec-rows dt { display: none; }
	.hero__spec-rows dd { display: inline; }
	.hero__spec-rows div:not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--text-muted-dark); }
	.hero__hint { display: none; }
	.hero__panel {
		top: auto;
		right: var(--gutter);
		left: var(--gutter);
		bottom: calc(clamp(40px, 6vh, 88px) + 250px);
		width: auto;
		gap: 8px;
	}
	.hero__types,
	.hero__loads {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		justify-content: safe center; /* при прокрутке первый пункт не обрезается */
		scrollbar-width: none;
		overflow-x: auto;
		border-top: 0;
	}
	.hero__type,
	.hero__load { border: 1px solid var(--grid-line-dark); /* taste-skill-ignore */ min-height: 38px; padding: 0 12px; font-size: 14px; }
	.hero__type + .hero__type,
	.hero__load + .hero__load { border-left: 0; }
}

@media (max-width: 900px) {
	.hero { height: 220vh; }
}

/* Без анимации: статичный кадр, без прокрутки-сцены */
@media (prefers-reduced-motion: reduce) {
	.hero { height: auto; }
	.hero__stage { position: relative; }
	.hero__wagon,
	.hero__panel,
	.hero__hint { display: none; }
}

/* Телефон и планшет: без 3D-вагона, паспорта и выбора груза — сетка, контурный знак G в центре
	и заголовок с кнопками внизу; первый экран без прокрутки-сцены */
@media (max-width: 900px) {
	.hero { height: auto; }
	.hero__stage { position: relative; }
	.hero__poster,
	.hero__wagon,
	.hero__spec,
	.hero__panel,
	.hud__barcode { display: none; }
	.hero__mark {
		top: 42%;
		width: calc(var(--cell) * 7.4);
		mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); /* taste-skill-ignore: маска затухания */
	}
	.hero__vignette { background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(8, 9, 11, 0) 50%, #08090b 100%); /* taste-skill-ignore */ }
	.hero__coord--tl,
	.hero__coord--tr { display: block; }
}