/* ─────────────────────────────────────────────────────────────────────────
   БЕЗ РАМОК. По слову владельца: чёрные рамки и подложки вокруг текста убраны
   везде, чтобы туннель на фоне был виден всегда, а текст лежал прямо на нём.
   Остаются только органы управления (кнопки, чипы, поля ввода): им нужен
   контур, иначе их не найти. Тонкие линии-разделители между строками тоже
   остаются — это не рамки.
   Файл подключается последним и перекрывает остальные.
   ───────────────────────────────────────────────────────────────────────── */

/* окна-станции: ни рамки, ни заливки, ни среза угла, ни шапки */
main > .station:not(.station--open) {
  border: 0;
  background: none;
  clip-path: none;
  padding: clamp(1rem, 0.6rem + 2vw, 2rem) 0;
}
main > .station:not(.station--open).sec {
  padding-block-start: clamp(1rem, 0.6rem + 2vw, 2rem);
}
.win-bar { display: none; }

/* панели и карточки: прозрачные, без контура */
.panel,
.lattice-box,
.lattice-box.panel,
.proc,
.fs-wrap,
.mini,
.hero-scene,
.spec-out .panel,
#zayavka aside.panel {
  background: none;
  border: 0;
  clip-path: none;
}
.hero-scene { overflow: visible; }
.lattice,
.lattice-box .lattice,
.lat3d,
.hs-shell { background: none; }
.panel-head,
.scalebar { border-color: var(--ox-hair); }

/* этапы проекта и зоны команды: без коробок */
.st { border: 0; background: none; }
.tz { background: none; border: 0; }
.tz--r { border-inline-start: 2px solid var(--ox-red); }
.tz--v { border-inline-start: 2px solid var(--ox-violet); }
.tz[aria-pressed="true"] { background: none; outline: 1px solid var(--ox-ink); outline-offset: -1px; }

/* оплата: три колонки без заливки; выбранная отмечена контуром и подписью «Выбрано» */
#dengi .rows { background: none; border: 0; gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); }
#dengi .row.pay-panel { background: none; border-top: var(--bw) solid var(--ox-hair); }
#dengi .row.pay-panel.is-picked { background: none; outline: 1px solid var(--ox-ink); outline-offset: 4px; }

/* чешуя: тёмная заливка убрана, остаются тонкие швы и бегущая по ним волна */
.fx-scales {
  background: none;
}
.fx-scales::before {
  background: rgb(242 240 236 / 0.07);
  background-image: none;
  -webkit-mask-image: var(--fx-scale-line);
  mask-image: var(--fx-scale-line);
  -webkit-mask-size: 28px 18px;
  mask-size: 28px 18px;
  opacity: 1;
}

/* шапка страницы: лёгкий полупрозрачный низ вместо сплошной заливки */
.top { background: linear-gradient(to bottom, rgb(7 8 11 / 0.82) 55%, transparent); }

/* текст прямо на частицах: чуть плотнее основной цвет, чтобы читался на движущемся фоне */
.hero-lede,
.sec-head p,
.row-d,
.flow-card p,
.spec-list li,
.form-note { color: var(--ox-ink); }

/* переполнение на телефоне: панель героя больше не обрезается, но и колонку раздвигать не должна */
.hero-grid > * { min-width: 0; }
.hero-scene { max-width: 100%; }

/* вуаль под колонкой текста: мягкая, без краёв и рамок, ослабляет частицы там, где лежит текст;
   по бокам туннель виден полностью */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgb(7 8 11 / 0.5) 16%, rgb(7 8 11 / 0.5) 84%, transparent 100%);
}
@media (max-width: 47.99rem) {
  body::after { background: rgb(7 8 11 / 0.38); }
}

/* текст на движущихся частицах: тёмное кольцо вокруг букв отделяет их от точек */
.hero h1,
.hero-lede,
.sec-head h2,
.sec-head p,
.sec-head .tag,
.row-t,
.row-d,
.row-n,
.flow-card h3,
.flow-card p,
.flow-rail,
.proc-flow .st-v,
.tz b,
.spec-list li,
.spec-foot,
.form-note,
.field label,
.hero-readout,
.mini-p {
  text-shadow: 0 0 1px rgb(7 8 11 / 0.95), 0 1px 8px rgb(7 8 11 / 0.8);
}

/* ── ТЁМНЫЙ КОСМОС вместо чёрного ───────────────────────────────────────────
   Фон — глубокий индиго с лёгкими туманностями; поверх два больших световых
   поля, фиолетовое и красное. Они дышат в противофазе: когда одно ярче, другое
   гаснет, и поверх бегут мерцающие звёзды-частицы (tunnel.js). */
html { background: #090a1f; }
body {
  background:
    radial-gradient(90vmax 70vmax at 12% 0%, rgb(36 22 84 / 0.9), transparent 62%),
    radial-gradient(80vmax 60vmax at 100% 100%, rgb(70 14 40 / 0.8), transparent 62%),
    radial-gradient(70vmax 60vmax at 55% 55%, rgb(14 16 46 / 0.9), transparent 70%),
    #090a1f;
}
html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html::before { /* фиолетовое свечение */
  background:
    radial-gradient(52vmax 44vmax at 4% 6%, rgb(148 50 221 / 0.46), transparent 64%),
    radial-gradient(38vmax 34vmax at 96% 44%, rgb(148 50 221 / 0.34), transparent 62%),
    radial-gradient(34vmax 30vmax at 40% 104%, rgb(148 50 221 / 0.26), transparent 62%);
  animation: glowViolet 7s ease-in-out infinite alternate;
}
html::after { /* красное свечение */
  background:
    radial-gradient(50vmax 42vmax at 98% 98%, rgb(255 42 58 / 0.42), transparent 64%),
    radial-gradient(36vmax 32vmax at 3% 58%, rgb(255 42 58 / 0.3), transparent 62%),
    radial-gradient(32vmax 28vmax at 62% -4%, rgb(255 42 58 / 0.24), transparent 62%);
  animation: glowRed 7s ease-in-out infinite alternate;
}
@keyframes glowViolet {
  0%   { opacity: 1; }
  38%  { opacity: 0.55; }
  44%  { opacity: 0.8; }
  60%  { opacity: 0.4; }
  100% { opacity: 0.25; }
}
@keyframes glowRed {
  0%   { opacity: 0.25; }
  40%  { opacity: 0.6; }
  48%  { opacity: 0.45; }
  62%  { opacity: 0.9; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none; opacity: 0.6; }
}
/* вуаль под колонкой текста в тон космоса, а не чёрная */
body::after {
  background: linear-gradient(90deg, transparent 0, rgb(9 10 31 / 0.5) 16%, rgb(9 10 31 / 0.5) 84%, transparent 100%);
}
@media (max-width: 47.99rem) {
  body::after { background: rgb(9 10 31 / 0.36); }
}
.top { background: linear-gradient(to bottom, rgb(9 10 31 / 0.82) 55%, transparent); }

/* ── ФОН В СТИЛЕ OX: чёрный обсидиан, по краям и снизу красные и фиолетовые кристаллы ──
   Картинка лежит под всеми слоями (z-index -1); при прокрутке вниз её приближает «камера» туннеля.
   Центр картинки тёмный, поэтому колонка с текстом остаётся читаемой; низ слегка затемнён. */
html { background: #07060d; }
body { background: none; }
.bg-ox {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #07060d url("./assets/ox-bg.webp") 50% 50% / cover no-repeat;
  transform: scale(1);
  transform-origin: 50% 62%;
  will-change: transform;
}
.bg-ox::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(7 6 13 / 0.62), rgb(7 6 13 / 0) 46%),
    radial-gradient(75% 60% at 50% 42%, rgb(7 6 13 / 0.35), transparent 70%);
}
@media (max-width: 47.99rem) {
  .bg-ox { background-image: url("./assets/ox-bg-960.webp"); background-position: 50% 100%; }
}
/* свечение поверх картинки мягче: теперь свет уже есть в самих кристаллах */
html::before { opacity: 0.7; }
html::after { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .bg-ox { transform: none; }
}

/* кристаллы фона подсвечиваются и дышат поочерёдно */
@media (prefers-reduced-motion: no-preference) {
  .bg-ox { animation: oxCrystal 7s ease-in-out infinite; }
  @keyframes oxCrystal {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
  }
}

html { overflow-x: clip; }
main { overflow-x: clip; }

/* шапка: плотная подложка, чтобы текст раздела не просвечивал под логотипом и переключателем языка */
.top { background: linear-gradient(to bottom, rgb(9 10 31 / 0.96) 70%, rgb(9 10 31 / 0.7) 100%); }

/* телефон: тяжёлые покадровые перерисовки отключены — чешуя и швы стоят, светятся импульсы и ядро */
@media (max-width: 48rem), (pointer: coarse) {
  .fx-on .fx-scales::after { animation: none; opacity: 0.16; }
  .fx-on .fx-seam { animation: none; opacity: 0; }
  html::before, html::after { animation: none; opacity: 0.75; }
}

/* телефон: тень текста без широкого размытия — оно дорого перерисовывается на слабых экранах */
@media (max-width: 48rem), (pointer: coarse) {
.hero h1,
.hero-lede,
.sec-head h2,
.sec-head p,
.sec-head .tag,
.row-t,
.row-d,
.row-n,
.flow-card h3,
.flow-card p,
.flow-rail,
.proc-flow .st-v,
.tz b,
.spec-list li,
.spec-foot,
.form-note,
.field label,
.hero-readout,
.mini-p {
  text-shadow: 0 1px 2px rgb(7 8 11 / 0.9);
}
}