/* ─────────────────────────────────────────────────────────────────────────
   КОНСТРУКТОР · обсидиановое ядро, оболочки модулей, красный и фиолетовый
   потоки. Сила эффектов — максимальная, но только внутри схемы: текст,
   чипы и итоговая панель остаются резкими.
   ───────────────────────────────────────────────────────────────────────── */
.lattice {
  background:
    radial-gradient(70% 70% at 50% 52%, rgb(148 50 221 / 0.08), transparent 70%),
    radial-gradient(120% 100% at 50% 45%, var(--ox-surface-2) 0%, var(--ox-surface) 78%);
}
.lat-grid line {
  stroke: rgb(242 240 236 / 0.04);
}

/* ядро — тёмный камень в кольце */
.lat-bond .core-ring {
  fill: none;
  stroke: var(--ox-ink-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.lat-bond .core-body {
  fill: #0b0c10;
  stroke: var(--ox-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lat-node circle.core {
  fill: var(--ox-red);
}

/* оболочка модуля: полупрозрачная, со срезанными углами */
.lat-bond polygon.shell {
  fill: rgb(242 240 236 / 0.05);
  stroke: var(--ox-ink-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

/* связи: ствол модуля — красный, связь с железом и каналами — фиолетовая */
.lat-bond line.on {
  stroke: var(--ox-red);
  opacity: 0.75;
}
.lat-bond line.link {
  stroke: var(--ox-violet);
  opacity: 0.7;
  stroke-dasharray: 3 3;
}
.lat-bond line.hot {
  stroke: var(--ox-ink);
  opacity: 1;
}
.lat-node circle.on {
  fill: var(--ox-ink);
}
.lat-node circle.hot {
  fill: var(--ox-red);
}
.lat-node circle.infra.on,
.lat-node circle.chan.on {
  fill: var(--ox-violet-text);
}
.lat-lab {
  fill: var(--ox-ink);
}
.lat-lab--sm,
.lat-lab--part {
  fill: var(--ox-ink-2);
}

/* поток света: бегущий штрих по активной связи */
.lat-bond line.flow {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 22;
  opacity: 0.95;
  animation: latFlow 2.4s linear infinite;
  animation-play-state: paused;
}
.lat-bond line.flow--r { stroke: #f0787c; }
.lat-bond line.flow--v { stroke: #c77bf0; }
.lattice-box.live .lat-bond line.flow {
  animation-play-state: running;
}
@keyframes latFlow {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

/* панель конструктора: одна геометрия с остальными */
.lattice-box.panel {
  background: var(--ox-surface);
  border-color: var(--ox-line);
  clip-path: polygon(0 0, calc(100% - var(--cut-panel)) 0, 100% var(--cut-panel), 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .lat-bond line.flow {
    animation: none !important;
    stroke-dasharray: none;
    opacity: 0.45;
  }
}

/* Геометрия единая: радиусов нет, углы режутся срезом (решение плана §2.4).
   Прежняя «мягкая» геометрия чипов, дорожек, панели и переключателя языка снята. */
.scale-track,
.lattice-box,
.lattice-box .lattice,
.lang {
  border-radius: 0;
}
.chip::after {
  display: none; /* точка-отметка заменена меткой-риской в sections.css */
}

/* телефон: выбор → схема → итог → отправка (порядок из ТЗ) */
@media (max-width: 63.99rem) {
  .spec-grid > div:first-child {
    display: contents;
  }
  .spec-grid > div:first-child > * {
    order: 1;
  }
  .spec-grid > div:first-child > .lattice-box {
    order: 2;
  }
  .spec-grid .spec-out {
    order: 3;
  }
}

/* ── объёмный вид конструктора («тихая сцена») ───────────────────────────── */
.lat3d {
  display: none;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 420;
  background: var(--ox-surface);
}
.lattice-box[data-view="3d"] .lat3d { display: block; }
.lattice-box[data-view="3d"] .lattice { display: none; }
.view-toggle {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem clamp(0.9rem, 0.8rem + 0.5vw, 1.3rem) 0.2rem;
}
.view-toggle .chip { min-height: 36px; padding: 0.4rem 0.8rem; }
.view-toggle .chip:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── цепи ДНК в плоской схеме ─────────────────────────────────────────────── */
.lat-bond line.stem-hidden { stroke: none; }
.lat-bond .dna path { fill: none; vector-effect: non-scaling-stroke; }
.lat-bond .dna-a { stroke: var(--ox-red); stroke-width: 1.4; opacity: 0.9; }
.lat-bond .dna-b { stroke: #b85cff; stroke-width: 1.4; opacity: 0.9; }
.lat-bond .dna-rung { stroke: rgb(240 216 255 / 0.28); stroke-width: 1; }
.lat-bond .dna.hot .dna-a,
.lat-bond .dna.hot .dna-b { stroke: var(--ox-ink); }
.lat-bond path.flow {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 2 26;
  animation: latFlow 2.4s linear infinite;
  animation-play-state: paused;
}
.lattice-box.live .lat-bond path.flow { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .lat-bond path.flow { animation: none !important; stroke-dasharray: none; opacity: 0.4; }
}

/* ── Плоская схема: голограмма-ядро и нейронные связи ───────────────────── */
.holo-aura { fill: url(#holoAura); opacity: calc(0.35 + 0.6 * var(--g, 0)); }
.holo-ball { fill: url(#holoBall); stroke: rgb(179 110 240 / 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.holo-line { fill: none; stroke: rgb(225 83 88 / 0.5); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.holo-heart { fill: #fff4ea; opacity: calc(0.55 + 0.45 * var(--g, 0)); animation: holoBeat 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes holoBeat { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.25); } }
.shell-arc { fill: none; stroke: #2a2c3a; stroke-width: 5; stroke-linecap: round; transition: transform 0.6s var(--ease), stroke 0.4s; }
.shell-arc.on { stroke: #e15358; filter: none; opacity: 1; }
.nrn-base { fill: none; stroke: var(--ox-ink-3); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.35; vector-effect: non-scaling-stroke; }
.nrn.on .nrn-base { opacity: 1; stroke-dasharray: none; stroke: #e15358; stroke-width: 1.6; }
.nrn-glow { fill: none; stroke: #9432dd; stroke-width: 6; opacity: 0.28; stroke-linecap: round; }
.nrn-run { fill: none; stroke: #ffb0b4; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.12 0.88; animation: nrnRun 2.4s linear infinite; }
.nrn.hot .nrn-glow { opacity: 0.55; }
@keyframes nrnRun { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.nrn-node { fill: #0b0c10; stroke: var(--ox-ink-3); stroke-width: 1.4; }
.nrn-node.on { fill: #e15358; stroke: #ffd0d2; }
.nrn-node.hot { stroke: #fff4ea; stroke-width: 2.4; }
.nrn-lab { fill: var(--ox-ink-3); font-size: 15px; paint-order: stroke; stroke: #090a1f; stroke-width: 3px; stroke-linejoin: round; }
.nrn-lab.on { fill: var(--ox-ink); }
@media (max-width: 40rem) { .nrn-lab { font-size: 18px; stroke-width: 4px; } }
.lat-node circle.nrn-sat { fill: #b36ef0; stroke: #090a1f; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) { .nrn-run, .holo-heart { animation: none; } }