/* ─────────────────────────────────────────────────────────────────────────
   ТУННЕЛЬ ПРОКРУТКИ И СВЯЗИ · стили.
   Фон лежит под всем содержимым и не принимает указатель. Нити живут в поле
   страницы между линией маршрута и краем колонки.
   ───────────────────────────────────────────────────────────────────────── */
.bg-tunnel {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  opacity: 0;
  animation: tnIn 1.6s var(--ease) 0.4s forwards;
}
@keyframes tnIn { to { opacity: 1; } }

/* ── окна-станции ──────────────────────────────────────────────────────── */
main > .station:not(.station--open) {
  position: relative;
  margin-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(2.6rem, 2.2rem + 1.4vw, 3.4rem) clamp(1rem, 0.6rem + 2.4vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
  width: min(100% - var(--gut) * 2, 1180px);
  border: var(--bw) solid var(--ox-line);
  background: rgb(9 6 7 / 0.86);
  clip-path: polygon(0 0, calc(100% - var(--cut-panel)) 0, 100% var(--cut-panel), 100% 100%, 0 100%);
}
/* внутри окна лишние внешние отступы раздела не нужны */
main > .station:not(.station--open).sec {
  padding-block-start: clamp(2.6rem, 2.2rem + 1.4vw, 3.4rem);
}
.win-bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 2rem;
  padding-inline: clamp(1rem, 0.6rem + 2.4vw, 2.6rem);
  border-bottom: var(--bw) solid var(--ox-hair);
  font-family: var(--ox-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ox-ink-3);
}
.win-n { color: var(--ox-red); font-variant-numeric: tabular-nums; }
.win-bar i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ox-line), transparent);
}
/* вход в окно: световая полоса по верхней кромке один раз */
main > .station.is-in:not(.station--open)::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ox-fuchsia) 30%, var(--ox-rose) 50%, var(--ox-red) 70%, transparent) no-repeat;
  background-size: 28% 100%;
  animation: tnEdge 1.4s var(--ease) 1 both;
}
@keyframes tnEdge {
  from { background-position: -40% 0; opacity: 1; }
  to { background-position: 140% 0; opacity: 0; }
}

/* ── направляющие ──────────────────────────────────────────────────────── */
.tunnel-nav {
  position: fixed;
  z-index: 25;
  inset-inline-end: clamp(6px, 0.8vw, 18px);
  top: 50%;
  translate: 0 -50%;
}
.tunnel-nav ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.tn-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-width: 28px;
  min-height: 28px;
  color: var(--ox-ink-3);
  text-decoration: none;
}
.tn-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--ox-ink-3);
  background: transparent;
  transform: rotate(45deg);
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), transform 350ms var(--ease);
}
.tn-dot[aria-current="location"]::after {
  background: linear-gradient(135deg, var(--ox-fuchsia), var(--ox-red));
  border-color: var(--ox-ink);
  transform: rotate(45deg) scale(1.25);
}
.tn-l {
  position: absolute;
  inset-inline-end: 100%;
  margin-inline-end: 4px;
  white-space: nowrap;
  padding: 3px 8px;
  font-family: var(--ox-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ox-surface);
  border: var(--bw) solid var(--ox-line);
  color: var(--ox-ink-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.tn-dot:hover .tn-l,
.tn-dot:focus-visible .tn-l,
.tn-dot[aria-current="location"] .tn-l { opacity: 1; }
.tn-dot:focus-visible { outline: var(--bw-focus) solid var(--ox-focus); outline-offset: 2px; }
@media (max-width: 47.99rem) {
  .tunnel-nav { display: none; }
}

.tunnel-pager {
  position: fixed;
  z-index: 26;
  inset-inline: 0;
  inset-block-end: max(10px, env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100% - 20px);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px;
  background: rgb(16 18 24 / 0.92);
  border: var(--bw) solid var(--ox-line);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  font-family: var(--ox-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox-ink-2);
}
.tunnel-pager button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ox-ink);
  background: transparent;
  border: var(--bw) solid var(--ox-line-ui);
  cursor: pointer;
}
.tunnel-pager button b { font-weight: 500; }
.tunnel-pager button:hover:not(:disabled) { border-color: var(--ox-ink); }
.tunnel-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.tunnel-pager button:focus-visible { outline: var(--bw-focus) solid var(--ox-focus); outline-offset: 2px; }
.tp-now { padding-inline: 0.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-now i { font-style: normal; color: var(--ox-ink); }
@media (max-width: 30rem) {
  .tp-now b { display: none; }
  .tunnel-pager button .tp-l { display: none; }
}
body { padding-block-end: 72px; }

@media (prefers-reduced-motion: reduce) {
  .bg-tunnel { animation: none; opacity: 1; }
  main > .station.is-in::before { animation: none; display: none; }
}

/* лёгкий режим окон (телефон и высокие окна): одно проявление при входе, без покадровых transform */
main > .station.st-lite:not(.st-show):not(.station--open) { opacity: 0; transform: translateY(16px); }
main > .station.st-lite { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
main > .station.st-lite.st-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { main > .station.st-lite:not(.st-show) { opacity: 1; transform: none; } }