/* ============================================================ Starfield mode — режим звёздного неба. Включается через class="starfield" на . Применяется к области графа (.graph-wrap), не к панелям сбоку. ============================================================ */ /* 0. Цветовая палитра под звёздную стилистику. Тёплое золото вместо терракотового акцента, чуть холоднее линии. */ body.starfield { --accent: #c9a063; /* тёплое золото-латунь, как пыль туманности */ --line: #2a2c30; /* чуть холоднее (было #2a2a2a) */ --surface-2: #1c1d20; /* чуть холоднее */ } /* Перезаписываем хардкод терракотового на золотой акцент только в starfield */ body.starfield .chip.active { background: rgba(201, 160, 99, 0.15); border-color: rgba(201, 160, 99, 0.45); } body.starfield .controls button.on { background: rgba(201, 160, 99, 0.18); border-color: rgba(201, 160, 99, 0.50); } body.starfield .lineage-panel mark { background: rgba(201, 160, 99, 0.25); } body.starfield .ait-suggest:hover { border-color: rgba(201, 160, 99, 0.4); } body.starfield .chip-theoretical.active { border-color: rgba(201, 160, 99, 0.45) !important; } /* В режиме starfield заменяем градиент-фон graph-wrap на сплошной тёмный (звёздный фон будет накладываться через ::before) */ body.starfield main.graph-wrap { background: #060606; position: relative; overflow: hidden; } /* 1. Звёздный фон — статичные точки разной яркости (тайл 600×600) */ body.starfield main.graph-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Ccircle%20cx%3D%22331%22%20cy%3D%22154%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22548%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%2259%22%20cy%3D%22519%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.16%22%2F%3E%3Ccircle%20cx%3D%22444%22%20cy%3D%22428%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22564%22%20cy%3D%22434%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22228%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%2263%22%20cy%3D%22590%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2247%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22296%22%20cy%3D%22429%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22584%22%20cy%3D%22315%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22185%22%20cy%3D%22105%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22192%22%20cy%3D%22381%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%22577%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.4%22%2F%3E%3Ccircle%20cx%3D%22508%22%20cy%3D%22544%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22476%22%20cy%3D%22599%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22254%22%20cy%3D%22184%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%2283%22%20cy%3D%22588%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22351%22%20cy%3D%22459%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.39%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22120%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22155%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%2279%22%20cy%3D%22571%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22321%22%20cy%3D%22348%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22508%22%20cy%3D%22593%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22276%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2262%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22591%22%20cy%3D%22456%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.44%22%2F%3E%3Ccircle%20cx%3D%22355%22%20cy%3D%2223%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22119%22%20cy%3D%22505%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22294%22%20cy%3D%22132%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%22508%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22411%22%20cy%3D%22562%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22563%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22367%22%20cy%3D%22389%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22154%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%22496%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%224%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22378%22%20cy%3D%22579%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22527%22%20cy%3D%2255%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22572%22%20cy%3D%22401%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%22493%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.31%22%2F%3E%3Ccircle%20cx%3D%22195%22%20cy%3D%2268%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.33%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22348%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22580%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%2226%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%22385%22%20cy%3D%22152%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22355%22%20cy%3D%22372%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%22499%22%20cy%3D%22477%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%2287%22%20cy%3D%22147%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22271%22%20cy%3D%22490%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%22210%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22556%22%20cy%3D%2227%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%2293%22%20cy%3D%22267%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22171%22%20cy%3D%22364%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.36%22%2F%3E%3Ccircle%20cx%3D%22514%22%20cy%3D%22337%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22199%22%20cy%3D%22245%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%22204%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2228%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22352%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22357%22%20cy%3D%22373%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%22481%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.29%22%2F%3E%3Ccircle%20cx%3D%22494%22%20cy%3D%221%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22352%22%20cy%3D%2286%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%22397%22%20cy%3D%22204%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22444%22%20cy%3D%22340%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22405%22%20cy%3D%22474%22%20r%3D%220.7%22%20fill%3D%22white%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%22162%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%22154%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22149%22%20cy%3D%22485%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22159%22%20cy%3D%22561%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22105%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22142%22%20cy%3D%22444%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%2228%22%20r%3D%220.6%22%20fill%3D%22white%22%20opacity%3D%220.24%22%2F%3E%3Ccircle%20cx%3D%22513%22%20cy%3D%22246%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22557%22%20cy%3D%22429%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.17%22%2F%3E%3Ccircle%20cx%3D%22362%22%20cy%3D%22469%22%20r%3D%221.2%22%20fill%3D%22white%22%20opacity%3D%220.38%22%2F%3E%3Ccircle%20cx%3D%22529%22%20cy%3D%22430%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22536%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.16%22%2F%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%22187%22%20r%3D%221.0%22%20fill%3D%22white%22%20opacity%3D%220.15%22%2F%3E%3Ccircle%20cx%3D%22153%22%20cy%3D%22176%22%20r%3D%220.5%22%20fill%3D%22white%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22123%22%20cy%3D%22569%22%20r%3D%220.4%22%20fill%3D%22white%22%20opacity%3D%220.28%22%2F%3E%3C%2Fsvg%3E"); background-size: 600px 600px; background-repeat: repeat; opacity: 0.7; } /* 2. Виньетка — затемнение углов области графа */ body.starfield main.graph-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient( ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.72) 100% ); } /* SVG-граф должен быть выше фона звёзд и виньетки, но фон у него не сплошной */ body.starfield .graph { position: relative; z-index: 2; background: transparent; } /* Мини-легенда и controls должны быть выше SVG и виньетки, чтобы клики работали */ body.starfield .mini-legend, body.starfield .controls, body.starfield .floating-info { z-index: 5; } /* 3. Halo на узлах — мягкое свечение от центра к прозрачности. Сам круг halo рендерится в JS (нужен SVG-элемент). Цвет halo задаётся через radialGradient в defsEl, по линии (lineage). */ body.starfield .node .halo { pointer-events: none; transition: opacity 0.2s; } /* Усиленное свечение у выбранного узла */ body.starfield .node.selected .halo { opacity: 1; } /* В режиме звёздного неба слегка приглушаем рёбра, чтобы свечение узлов читалось ярче */ body.starfield .links line { opacity: 0.7; } body.starfield .links line.faded { opacity: 0.15; } /* 4. Узлы как звёзды: тонкая полупрозрачная обводка цвета линии, плавно встречается с halo и переходит в свечение. Photo поверх — нетронуто. */ body.starfield .node circle.shape { stroke-width: 0.8 !important; /* тонкая, не «обведённая» рамка */ stroke-opacity: 0.55 !important; /* полупрозрачная — растворяется в halo */ fill: rgba(244,241,236,0.88) !important; } /* Внешние (квадратные) узлы — оставляем лёгкую обводку */ body.starfield .node rect.shape { stroke-width: 1 !important; } /* Selected — оставляем цветную обводку линии (её ставит JS), только подкручиваем толщину */ body.starfield .node.selected .shape { stroke-width: 2.2 !important; } body.starfield .node.highlighted .shape { stroke-width: 1.6 !important; } /* 5. Приглушение halo и сердцевины у малозначимых tier (3, 4) — менее заметные «звёзды» против ярких сверхгигантов tier 0–1 */ body.starfield .node.tier-3 .halo { opacity: 0.6; } body.starfield .node.tier-4 .halo { opacity: 0.4; } body.starfield .node.tier-3 circle.shape { fill: rgba(244,241,236,0.7) !important; } body.starfield .node.tier-4 circle.shape { fill: rgba(244,241,236,0.55) !important; } /* 8. Фото в стилистике галактики: мягкие края + цветовая обработка ВСТРОЕНЫ в PNG-файлы офлайн (см. бэкап assets/photos.bak.before-feather). Никаких runtime-фильтров — браузер рендерит готовое. При выборе/наведении лёгкий boost через filter (редкое событие, дёшево). */ body.starfield .node.selected .photo, body.starfield .node.highlighted .photo { filter: brightness(1.15) saturate(1.2); } /* 6. Серифный шрифт для имён узлов — академический регистр */ body.starfield .node text { font-family: 'Lora', 'Source Serif Pro', Georgia, serif !important; font-weight: 500 !important; letter-spacing: 0.01em; /* убираем толстую чёрную обводку — лёгкий полупрозрачный stroke для читаемости поверх halo */ stroke: rgba(8, 8, 8, 0.5) !important; stroke-width: 0.6px !important; } body.starfield .node.tier-0 text { font-weight: 600 !important; } body.starfield .node.tier-1 text { font-weight: 500 !important; } /* ============================================================ Galaxy sub-mode: Каждый член школы излучает большое мягкое сияние своего цвета. Пересекающиеся halo складываются через mix-blend-mode: screen — плотный кластер даёт яркую туманность, одинокий член — еле видное гало. ============================================================ */ /* Blend применяется только к подгруппе .halos внутри каждой ноды, а сама форма (.shape) и фото — render normally, без блендинга, чтобы линии-связи не просвечивали через кружки. Кросс-нодовый blend halo сохраняется через backdrop. Пока симуляция движет узлы (body.simming), blend выключен — иначе пересчёт смешивания на каждом кадре мерцает и лагает. */ body.starfield.galaxy .nodes .node .halos { mix-blend-mode: screen; } body.starfield.galaxy.simming .nodes .node .halos, body.starfield.galaxy.interacting .nodes .node .halos { mix-blend-mode: normal; } /* Кружок-форма в galaxy-режиме — непрозрачный, чтобы скрывать линии под собой */ body.starfield.galaxy .node circle.shape { fill: var(--text) !important; stroke: rgba(244,241,236,0.55) !important; stroke-width: 0.7 !important; stroke-opacity: 1 !important; } /* Для нод с ФОТО — убираем заливку и обводку под фото: фото с мягким радиальным маской края просто растворяется в halo, без видимой рамки */ body.starfield.galaxy .node:has(.photo) circle.shape { fill: transparent !important; stroke: transparent !important; } /* При выборе/наведении возвращаем тонкую белую обводку — индикатор фокуса */ body.starfield.galaxy .node.selected:has(.photo) circle.shape, body.starfield.galaxy .node.highlighted:has(.photo) circle.shape { stroke: rgba(255,255,255,0.7) !important; stroke-width: 1.2 !important; } /* Tier 3-4 — слегка приглушённый fill (дает «бледные звёзды» против ярких сверхгигантов). Используем fill-opacity вместо альфы в цвете — чтобы stroke оставался непрозрачным. */ body.starfield.galaxy .node.tier-3 circle.shape { fill-opacity: 0.75 !important; } body.starfield.galaxy .node.tier-4 circle.shape { fill-opacity: 0.6 !important; } body.starfield.galaxy .node rect.shape { stroke: rgba(244,241,236,0.5) !important; } /* Selected — белая подсветка для контраста с цветным halo */ body.starfield.galaxy .node.selected .shape { stroke: #ffffff !important; stroke-width: 1.8 !important; } /* 7. Плавное появление/исчезание узлов при смене фильтров — "взрыв" новой звезды через opacity + lift halo. */ body.starfield .node { transition: opacity 0.5s ease; } body.starfield .node.hidden { display: block !important; opacity: 0 !important; pointer-events: none !important; } body.starfield .node .halo { transition: opacity 0.6s ease; } body.starfield .node.hidden .halo { opacity: 0 !important; }