/* =========================================================
   ДЕРЕВО РОДА — ПОЛНОЭКРАННЫЙ СЛОЙ

   Отдельным файлом, потому что показывают его теперь два места:
   EhoAI на тёмной сцене и кабинет на сайте, светлый. Дерево при этом
   одно и то же — тот же tree.js, та же разметка, тот же вид.

   ПОЧЕМУ ЗДЕСЬ СВОИ ПЕРЕМЕННЫЕ. В ehoai.css они объявлены на :root
   тёмной темы, и слой брал их оттуда. На сайте такого :root нет —
   дерево осталось бы без цветов и уехало бы в невидимое. Объявляем их
   на самом слое: он полноэкранный и тёмный всегда, независимо от того,
   поверх чего открылся.
   ========================================================= */

.sky{
  --line:rgba(140,185,232,.16);
  --panel-2:#16293D;
  --ink:#EAF2FA; --mid:#A8BDD3; --soft:#728CA8;
  --blue:#5AA7F0;
  --ease:cubic-bezier(.22,.61,.36,1);
}

.sky{
  position:fixed;inset:0;z-index:120;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(20,44,72,.5), transparent 74%),
    radial-gradient(120% 120% at 50% 50%, rgba(6,14,23,.88), rgba(4,9,15,.98));
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .34s var(--ease);
  touch-action:none;cursor:grab;overflow:hidden;
}
.sky.on{opacity:1}
.sky.is-drag{cursor:grabbing}
body.sky-on{overflow:hidden}

/* Встроенный показ — параллакс-панель на index_v1.php (см. mount() в
   tree.js): та же тьма и та же нить, но внутри чужого блока, а не
   поверх всей страницы. fixed стал бы всей высотой окна вместо высоты
   панели; z-index:120 и курсор с блюром — вещи полноэкранной модалки,
   тут только мешают (блюр под маленькой панелью размывает текст промо-
   блока рядом, а не фон позади неё).

   position ОСТАЁТСЯ relative, а не absolute. Панель уже стоит на своём
   месте обычным блоком грида (.tp-device в home_v1.css) — abs вынул бы
   её из потока, и её родитель (.tp-visual) перестал бы вообще замечать
   её высоту при подсчёте своей: он схлопнулся бы до пары строк подписи
   под деревом, а сама панель шириной в колонку и высотой в квадрат
   (aspect-ratio:1/1) наехала бы на всё, что идёт на странице ниже. Ровно
   так и было при первой попытке — дерево прорастало корректно, но часть
   его снизу пряталась под следующей секцией. relative здесь ничего
   не переопределяет физически (inset:0 у самого .sky-c/.sky-names уже
   свой canvas/слой имён внутри, не наружу), только гасит fixed, который
   иначе унаследовался бы от .sky. */
.sky-embed{position:relative;z-index:auto;backdrop-filter:none;touch-action:auto;cursor:default}

.sky-c{position:absolute;inset:0;width:100%;height:100%}
.sky-names{position:absolute;inset:0;pointer-events:none}

/* Подпись яруса — у левого края, тихо. Ориентир, а не заголовок. */
.sky-lv{
  position:absolute;left:22px;top:0;
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(114,140,168,.5);pointer-events:none;white-space:nowrap;
  animation:skyIn .8s var(--ease) .9s both;
}

/* Имя — под точкой и по центру, как в обычном дереве. Обычный текст, а
   не рисунок на холсте: его выделяют, читают программой чтения с
   экрана и ищут поиском по странице. */
.sky-n{
  position:absolute;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:158px;margin-left:-79px;margin-top:14px;
  text-align:center;pointer-events:auto;
  opacity:0;animation:skyIn .55s var(--ease) forwards;animation-delay:var(--d,0ms);
}
/* Не поместилась под точкой — уходит наверх. */
.sky-n.is-up{margin-top:-52px}

.sky-n b{
  display:block;max-width:100%;
  font-size:12.5px;font-weight:600;color:rgba(226,238,250,.94);
  letter-spacing:-.005em;text-shadow:0 1px 10px rgba(4,10,18,.95);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sky-n i{
  font-style:normal;font-size:10.5px;color:rgba(140,175,210,.7);
  text-shadow:0 1px 8px rgba(4,10,18,.95);white-space:nowrap;
}
/* ЛИЦО НАД ИМЕНЕМ.

   Подпись стоит ПОД точкой узла, а снимок — над подписью, то есть
   поверх самой точки. Это и нужно: у кого есть фотография, у того
   вместо огонька лицо, и свет обводит его кольцом.

   Кружок небольшой: дерево вписывается целиком, и лицо здесь — примета,
   по которой человека узнают среди двух десятков имён, а не портрет.
   Разглядывать — приближением, как и всё остальное в дереве. */
/* СНИМОК ВЫНУТ ИЗ ПОТОКА — И ЭТО НЕ ПРИЁМ, А ЕДИНСТВЕННЫЙ ВЕРНЫЙ
   СПОСОБ. Внутри строки он сдвигал бы подпись вниз ровно на свою
   высоту, и компенсировать это пришлось бы отрицательным margin-top у
   .sky-n. А margin-top у .sky-n уже задан трижды — у обычного узла, у
   поднятого (.is-up) и у смотрящего (.is-me), — все той же
   специфичности в два класса. Победил бы тот, кто ниже по файлу, и
   часть лиц уехала бы от своих точек.

   Абсолютное положение не трогает поток вовсе: подпись остаётся там,
   где стояла, а лицо встаёт над ней. */
.sky-face{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  width:44px;height:44px;margin-bottom:4px;
  border-radius:50%;object-fit:cover;
  border:1px solid rgba(206,228,248,.45);
  box-shadow:0 0 14px rgba(120,164,205,.45);
  background:rgba(10,22,34,.6);
}
.sky-n.is-me .sky-face{
  width:54px;height:54px;
  border-color:rgba(95,214,176,.55);box-shadow:0 0 20px rgba(95,214,176,.5);
}
.sky-n.is-gone .sky-face{filter:grayscale(.5);opacity:.85}

.sky-n.is-gone b{color:rgba(190,208,226,.72)}
.sky-n.is-loose{opacity:.5}
.sky-n.is-me{width:230px;margin-left:-115px;margin-top:18px}
.sky-n.is-me b{font-size:14.5px;color:#DCFFF2;white-space:normal;text-shadow:0 0 18px rgba(95,214,176,.5)}
.sky-n.is-me i{color:rgba(150,225,200,.85)}
.sky-n.has-seat b::after{
  content:'';display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;
  background:var(--blue);vertical-align:middle;
}

/* Не поместилась вовсе — притушена, показывается при наведении.
   Спрятанная честнее наложенной: у двух наложенных нельзя прочесть ни
   одну. */
.sky-n.is-dim{opacity:.14}
.sky-n.is-dim:hover{opacity:1;z-index:3}

@keyframes skyIn{
  from{opacity:0;filter:blur(4px);transform-origin:50% 0}
  to  {opacity:1;filter:blur(0)}
}

/* ---------- обвязка ---------- */

.sky-top{position:absolute;left:26px;top:22px;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.sky-t{font-family:Literata,Georgia,serif;font-size:20px;letter-spacing:-.01em;color:rgba(232,243,253,.94)}
.sky-s{font-size:12px;color:var(--soft)}

.sky-x{
  position:absolute;right:22px;top:22px;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(16,31,48,.7);border:1px solid var(--line);color:var(--mid);
  font-size:22px;line-height:1;display:grid;place-items:center;
  transition:background .18s,color .18s;
}
.sky-x:hover{background:var(--panel-2);color:var(--ink)}

.sky-tools{
  position:absolute;right:22px;bottom:22px;
  display:flex;align-items:center;gap:4px;padding:4px;border-radius:12px;
  background:rgba(10,22,34,.62);border:1px solid var(--line);backdrop-filter:blur(6px);
}
.sky-b{
  min-width:32px;height:30px;padding:0 10px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--mid);font:inherit;font-size:15px;line-height:1;
  transition:background .16s,color .16s;
}
.sky-b-w{font-size:12.5px}
.sky-b:hover{background:var(--panel-2);color:var(--ink)}

.sky-hint{
  position:absolute;left:26px;bottom:28px;max-width:44ch;
  font-size:12px;color:rgba(114,140,168,.8);pointer-events:none;
  animation:skyIn .8s var(--ease) 1.4s both;
}

@media(max-width:760px){
  .sky-top{left:14px;top:14px}
  .sky-t{font-size:17px}
  .sky-x{right:12px;top:12px;width:36px;height:36px}
  .sky-tools{right:12px;bottom:12px}
  .sky-lv{left:12px;font-size:9px}
  .sky-n{width:124px;margin-left:-62px}
  .sky-n b{font-size:11.5px}
  .sky-n i{display:none}
  .sky-n.is-me{width:170px;margin-left:-85px}
  .sky-hint{left:12px;right:12px;bottom:62px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .sky{transition:none}
  .sky-n,.sky-lv,.sky-hint{opacity:1;animation:none}
}