/* HUD — технический слой поверх тёмных экранов: сетка, рамка-видоискатель, шкала,
	перекрестие, штрихкод, вертикальные подписи, трекинг. Только декор: aria-hidden. */
.hud {
	--hud-ink: rgba(255, 255, 255, 0.55);
	--hud-ink-dim: rgba(255, 255, 255, 0.32);
	--hud-line: rgba(255, 255, 255, 0.07);
	--hud-cols: 12;
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: var(--font-mono); /* taste-skill-ignore: технический стиль по запросу клиента */
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--hud-ink);
}

/* Сетка: 12 колонок, квадратные ячейки */
.hud__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--hud-line) 1px, transparent 1px), /* taste-skill-ignore: линии сетки */
		linear-gradient(to bottom, var(--hud-line) 1px, transparent 1px); /* taste-skill-ignore: линии сетки, не градиент-заливка */
	background-size: calc(100% / var(--hud-cols)) calc(100vw / var(--hud-cols));
	background-position: 0 0;
}

/* Вертикальные подписи по краям (читаются снизу вверх) */
.hud__side {
	position: absolute;
	writing-mode: vertical-rl;
	rotate: 180deg;
	white-space: nowrap;
	color: var(--hud-ink-dim);
}

.hud__side--l1 { left: calc(var(--gutter) / 2 - 5px); top: 24%; }
.hud__side--l2 { left: calc(var(--gutter) / 2 - 5px); top: 50%; }
.hud__side--l3 { left: calc(var(--gutter) / 2 - 5px); bottom: 14%; }

/* Рамка-видоискатель: только уголки */
.hud__frame {
	position: absolute;
	left: var(--frame-l, 30%);
	top: var(--frame-t, 25%);
	width: var(--frame-w, 40%);
	height: var(--frame-h, 31%);
	transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}

.hud__frame i {
	position: absolute;
	width: 22px;
	height: 22px;
	border: 0 solid var(--hud-ink);
}

.hud__frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hud__frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hud__frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hud__frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* Подпись в нижнем углу рамки — трекинг */
.hud__track {
	position: absolute;
	left: 0;
	top: calc(100% + 10px);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	white-space: nowrap;
}

.hud__track span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.hud__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	animation: hud-blink 1.6s steps(2, jump-none) infinite;
}

@keyframes hud-blink {
	50% { opacity: 0.25; }
}

/* Шкала слева от рамки: «1520 мм» — ширина российской колеи */
.hud__ruler {
	position: absolute;
	left: calc(var(--frame-l, 30%) - 54px);
	top: var(--frame-t, 25%);
	height: calc(var(--frame-h, 31%) * 0.62);
	width: 44px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: end;
	transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
}

.hud__ruler::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 9px;
	border-right: 1px solid var(--hud-ink); /* taste-skill-ignore: шкала */
	background-image: linear-gradient(to bottom, var(--hud-ink) 1px, transparent 1px); /* taste-skill-ignore: деления шкалы */
	background-size: 100% 8px;
}

.hud__ruler span {
	padding-right: 14px;
	line-height: 1;
}

.hud__ruler span:nth-child(2) {
	align-self: center;
	width: 4px;
	height: 4px;
	margin-right: 18px;
	padding: 0;
	border-radius: 50%;
	background: var(--hud-ink);
}

/* Штрихкод с номером вагона (настоящий Code 39) */
.hud__barcode {
	position: absolute;
	right: calc(var(--gutter) / 2 - 11px);
	bottom: 16%;
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.hud__barcode img {
	width: 22px;
	height: auto;
	opacity: 0.6;
}

.hud__barcode span {
	writing-mode: vertical-rl;
	color: var(--hud-ink-dim);
}

/* Подпись вразрядку по низу */
.hud__caption {
	position: absolute;
	left: 50%;
	bottom: 20px;
	translate: -50% 0;
	white-space: nowrap;
	letter-spacing: 0.62em;
	color: var(--hud-ink-dim);
}

/* Зерно плёнки поверх всей страницы */
.grain {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	background: url("../img/hud/grain.png") repeat;
	opacity: 0.55;
	mix-blend-mode: overlay;
}

@media (max-width: 900px) {
	.hud { --hud-cols: 4; }
	.hud__side,
	.hud__barcode,
	.hud__ruler,
	.hud__caption { display: none; }
	.hud__frame { --frame-l: 8%; --frame-w: 84%; }
}

@media (prefers-reduced-motion: reduce) {
	.hud__dot { animation: none; }
}

/* Манифест: рамка вокруг текста, перекрестие у правого верхнего угла */
.hud--manifest {
	--frame-l: 12%;
	--frame-t: 22%;
	--frame-w: 76%;
	--frame-h: 56%;
}