inside the switcher. */
.org-arc-particles {
position: absolute;
inset: 0;
pointer-events: none;
}
.org-arc-particles .atom-dot {
position: absolute;
transform: translate(-50%, -50%);
}
/* ------------------------------------------------------------------------ */
/* Organism: Onboarding gate */
/* ------------------------------------------------------------------------ */
.org-onboarding-gate {
position: relative;
display: grid;
gap: 14px;
width: min(420px, 100%);
}
/* Modifier — горизонтально центрирует title/copy/button. По-умолчанию
organism left-align (production showcase). Level1 включает через
data-align="center" — нейтрально для других потребителей. */
.org-onboarding-gate[data-align="center"] {
justify-items: center;
text-align: center;
}
.org-onboarding-gate[data-align="center"] .gate-copy {
justify-items: center;
}
.org-onboarding-gate[data-align="center"] .gate-start {
justify-self: center;
}
/* Optional icon slot — иконка перед заголовком gate. Параметризовано:
любой inline-флекс контейнер (SVG, emoji в span, atom-dot). Не имеет
фиксированного размера — родитель задаёт. */
.org-onboarding-gate .gate-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
opacity: 0.92;
}
.org-onboarding-gate::before {
content: "";
position: absolute;
inset: -40px -60px;
background:
radial-gradient(circle at 34% 46%, rgba(255, 255, 255, 0.38), transparent 22%),
radial-gradient(circle at 54% 54%, rgba(182, 215, 255, 0.18), transparent 34%);
filter: blur(34px);
opacity: 0.88;
pointer-events: none;
}
body.dark .org-onboarding-gate::before {
background:
radial-gradient(circle at 34% 46%, rgba(158, 202, 255, 0.18), transparent 22%),
radial-gradient(circle at 54% 54%, rgba(94, 120, 196, 0.16), transparent 34%);
}
.org-onboarding-gate .gate-title {
position: relative;
margin: 0;
font-size: clamp(38px, 4.6vw, 56px);
line-height: 0.92;
letter-spacing: -0.06em;
}
.org-onboarding-gate .gate-copy {
position: relative;
display: grid;
gap: 6px;
max-width: 360px;
color: color-mix(in srgb, var(--text) 72%, transparent);
font-size: 17px;
line-height: 1.18;
letter-spacing: -0.03em;
}
.org-onboarding-gate .gate-start {
position: relative;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: transform 180ms ease;
}
.org-onboarding-gate .gate-start::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.82;
}
.org-onboarding-gate .gate-start::after {
content: "";
position: absolute;
left: 18px;
right: 0;
bottom: -4px;
height: 1px;
background: currentColor;
opacity: 0.34;
transform-origin: left center;
transition: transform 180ms ease, opacity 180ms ease;
}
.org-onboarding-gate .gate-start:hover {
transform: translate3d(0, -1px, 0);
}
.org-onboarding-gate .gate-start:hover::after {
opacity: 0.68;
transform: scaleX(1.06);
}
/* ── Template wrapper: full-viewport overlay, центрирует organism gate.
Используется когда gate работает как первый экран перед чем-то
(flight, режим, settings). Тема через те же flight-vars. */
.org-onboarding-overlay {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(circle at 50% 36%, var(--flight-bg-glow), transparent 60%),
var(--flight-bg-base);
color: var(--flight-text);
opacity: 1;
transition: opacity 480ms ease;
}
.org-onboarding-overlay[hidden] {
display: none;
}
.org-onboarding-overlay.fading {
opacity: 0;
pointer-events: none;
}
/* ------------------------------------------------------------------------ */
/* Organism: Onboarding flight */
/* ------------------------------------------------------------------------ */
.org-flight {
position: relative;
width: 100%;
display: grid;
place-items: center;
gap: 16px;
text-align: center;
padding: 24px 0;
}
.org-flight .flight-hint {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
color: color-mix(in srgb, var(--text) 64%, transparent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.org-flight .flight-step {
display: grid;
gap: 8px;
}
.org-flight .flight-step p {
margin: 0;
}
.org-flight .flight-step p:first-child {
font-size: clamp(28px, 3.4vw, 44px);
line-height: 0.92;
letter-spacing: -0.06em;
text-shadow: 0 0 24px rgba(255, 255, 255, 0.18), 0 0 58px rgba(132, 194, 255, 0.16);
}
.org-flight .flight-step p + p {
font-size: 16px;
line-height: 1.14;
letter-spacing: -0.03em;
color: color-mix(in srgb, var(--text) 74%, transparent);
}
.org-flight .flight-progress {
width: 220px;
height: 1px;
background: color-mix(in srgb, var(--text) 18%, transparent);
overflow: hidden;
}
.org-flight .flight-progress-bar {
width: 64%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), color-mix(in srgb, var(--text) 76%, transparent));
}
.org-flight .flight-status {
color: color-mix(in srgb, var(--text) 64%, transparent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ── Live mode: organism активируется JS'ом через [data-onboarding-flight] ─
Полноэкранный overlay, который проигрывает sequential 3-phase flight intro
(approach → dwell → depart per step). Шаги наслаиваются на одну точку,
движутся СТРОГО по оси Z (без scale/rotate) — чистая перпендикулярность
плоскости камеры. Тема следует за prefers-color-scheme + body.dark/.light. */
/* Theme tokens — defaults для светлой темы (OS-light). Нейтральная
cool-grey палитра без тёплых оттенков. */
:root {
--flight-bg-base: #f5f6f8;
--flight-bg-glow: rgba(140, 150, 170, 0.10);
--flight-text: rgba(20, 22, 38, 0.92);
--flight-text-subtle: rgba(20, 22, 38, 0.58);
--flight-progress-track: rgba(20, 22, 38, 0.14);
--flight-progress-fill: rgba(20, 22, 38, 0.62);
--flight-shadow: 0 0 24px rgba(20, 22, 38, 0.08), 0 0 58px rgba(132, 194, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
:root {
--flight-bg-base: linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
--flight-bg-glow: rgba(94, 60, 158, 0.32);
--flight-text: rgba(245, 247, 255, 0.92);
--flight-text-subtle: rgba(245, 247, 255, 0.58);
--flight-progress-track: rgba(245, 247, 255, 0.14);
--flight-progress-fill: rgba(245, 247, 255, 0.62);
--flight-shadow: 0 0 24px rgba(255, 255, 255, 0.18), 0 0 58px rgba(132, 194, 255, 0.16);
}
}
/* Manual override через body class — пользователь может форсировать. */
body.light {
--flight-bg-base: #f5f6f8;
--flight-bg-glow: rgba(140, 150, 170, 0.10);
--flight-text: rgba(20, 22, 38, 0.92);
--flight-text-subtle: rgba(20, 22, 38, 0.58);
--flight-progress-track: rgba(20, 22, 38, 0.14);
--flight-progress-fill: rgba(20, 22, 38, 0.62);
--flight-shadow: 0 0 24px rgba(20, 22, 38, 0.08), 0 0 58px rgba(132, 194, 255, 0.10);
}
body.dark {
--flight-bg-base: linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
--flight-bg-glow: rgba(94, 60, 158, 0.32);
--flight-text: rgba(245, 247, 255, 0.92);
--flight-text-subtle: rgba(245, 247, 255, 0.58);
--flight-progress-track: rgba(245, 247, 255, 0.14);
--flight-progress-fill: rgba(245, 247, 255, 0.62);
--flight-shadow: 0 0 24px rgba(255, 255, 255, 0.18), 0 0 58px rgba(132, 194, 255, 0.16);
}
.org-flight[data-onboarding-flight] {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
display: block;
padding: 0;
perspective: 1400px;
perspective-origin: 50% 50%;
overflow: hidden;
isolation: isolate;
z-index: 60;
color: var(--flight-text);
background:
radial-gradient(circle at 50% 36%, var(--flight-bg-glow), transparent 60%),
var(--flight-bg-base);
}
.org-flight[data-onboarding-flight] > .atom-anim-flight-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.org-flight[data-onboarding-flight] .flight-steps {
position: absolute;
inset: 0;
display: block;
transform-style: preserve-3d;
z-index: 2;
pointer-events: none;
}
.org-flight[data-onboarding-flight] .flight-step {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(720px, 80vw);
text-align: center;
opacity: 0;
color: var(--flight-text);
will-change: opacity, transform;
}
.org-flight[data-onboarding-flight] .flight-step p {
margin: 0;
}
.org-flight[data-onboarding-flight] .flight-step p:first-child {
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.04em;
text-shadow: var(--flight-shadow);
}
.org-flight[data-onboarding-flight] .flight-step p + p {
font-size: clamp(16px, 1.6vw, 22px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--flight-text-subtle);
margin-top: 12px;
}
/* Inline link-style кнопка внутри .flight-step — для интерактивных
призывов в gate-шаге (например fullscreen). Наследует font/color от
-обёртки, добавляет underline + cursor pointer. pointer-events:auto
нужен потому что родитель .flight-steps имеет pointer-events:none. */
.org-flight[data-onboarding-flight] .flight-step .gate-fullscreen {
background: transparent;
border: 0;
padding: 0;
margin: 0;
color: inherit;
font: inherit;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
cursor: pointer;
pointer-events: auto;
transition: color 160ms ease, text-decoration-color 160ms ease;
}
.org-flight[data-onboarding-flight] .flight-step .gate-fullscreen:hover,
.org-flight[data-onboarding-flight] .flight-step .gate-fullscreen:focus-visible {
color: var(--flight-text);
text-decoration-color: currentColor;
outline: none;
}
.org-flight[data-onboarding-flight] .flight-progress {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: min(280px, 60vw);
height: 1px;
background: var(--flight-progress-track);
overflow: hidden;
}
.org-flight[data-onboarding-flight] .flight-progress-bar {
width: 100%;
height: 100%;
transform-origin: 0% 50%;
background: var(--flight-progress-fill);
transition: transform 120ms linear;
}
.org-flight[data-onboarding-flight] .flight-status {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: var(--flight-text-subtle);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Hint — текстовая подсказка над progress-баром. Подсказывает пользователю,
что нужно скроллить для продвижения. */
.org-flight[data-onboarding-flight] .flight-hint {
position: absolute;
top: auto;
bottom: 84px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: var(--flight-text-subtle);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
opacity: 0.82;
/* Hint мягко пульсирует, привлекая внимание к scroll-affordance. */
animation: flightHintBreath 2.8s ease-in-out infinite;
}
@keyframes flightHintBreath {
0%, 100% { opacity: 0.42; }
50% { opacity: 0.86; }
}
/* Hidden state — overlay полностью убран из layout, чтобы pointer
events проваливались на stage снизу. Базовое display:block перебивает
HTML hidden attribute, поэтому фиксируем правилом для [hidden]. */
.org-flight[data-onboarding-flight][hidden] {
display: none;
}
/* .fading — safety для timer-driver demo и forced complete(). */
.org-flight[data-onboarding-flight].fading {
opacity: 0;
transition: opacity 520ms ease;
pointer-events: none;
}
/* ------------------------------------------------------------------------ */
/* Organism: Guide flow */
/* ------------------------------------------------------------------------ */
.org-guide-flow {
position: relative;
width: min(320px, 100%);
display: grid;
gap: 10px;
padding: 4px 0;
}
.org-guide-flow::before {
content: "";
position: absolute;
inset: -36px -48px;
background:
radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.24), transparent 24%),
radial-gradient(circle at 50% 48%, rgba(118, 176, 255, 0.12), transparent 42%);
filter: blur(26px);
opacity: 0.72;
pointer-events: none;
}
body.dark .org-guide-flow::before {
background:
radial-gradient(circle at 42% 28%, rgba(158, 202, 255, 0.18), transparent 24%),
radial-gradient(circle at 50% 48%, rgba(94, 120, 196, 0.16), transparent 42%);
}
.org-guide-flow .gf-kicker,
.org-guide-flow .gf-step {
position: relative;
z-index: 1;
margin: 0;
color: color-mix(in srgb, var(--text) 62%, transparent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.org-guide-flow .gf-title {
position: relative;
z-index: 1;
margin: 0;
font-size: 28px;
font-weight: 740;
line-height: 0.94;
letter-spacing: -0.05em;
}
.org-guide-flow .gf-copy {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0;
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.03em;
color: color-mix(in srgb, var(--text) 78%, transparent);
}
.org-guide-flow .gf-meta {
position: relative;
z-index: 1;
max-width: 280px;
margin: 0;
font-size: 12px;
line-height: 1.26;
color: color-mix(in srgb, var(--text) 52%, transparent);
}
/* ------------------------------------------------------------------------ */
/* Organism: Detail panel — glass + spotlight + backdrop (production .detail)*/
/* ------------------------------------------------------------------------ */
.org-detail-stage {
/* Light theme: warm paper-like surface с двумя accent ambient-glow'ами.
Backdrop в этом режиме рисуется через светлый radial-gradient (см.
стейдж-override .detail-backdrop ниже). */
position: relative;
min-height: 540px;
border-radius: 14px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 30% 36%, color-mix(in srgb, var(--detail-accent, #ff6b57), white 78%), transparent 56%),
radial-gradient(circle at 76% 70%, color-mix(in srgb, var(--detail-accent, #ff6b57), white 88%), transparent 62%),
linear-gradient(135deg, #faf6ee 0%, #f0ebe1 48%, #e6dfd2 100%);
color: var(--text);
}
/* Dark theme: production spatial scene. */
body.dark .org-detail-stage {
background:
radial-gradient(circle at 30% 36%, rgba(74, 92, 168, 0.38), transparent 56%),
radial-gradient(circle at 76% 70%, rgba(108, 70, 178, 0.34), transparent 62%),
linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
color: rgba(245, 247, 255, 0.92);
}
.org-detail-stage::before {
content: "";
position: absolute;
inset: -16%;
background:
radial-gradient(circle at 26% 50%, color-mix(in srgb, var(--accent-day), transparent 70%), transparent 40%),
radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent-year), transparent 76%), transparent 44%),
radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent-month), transparent 82%), transparent 40%);
filter: blur(70px);
opacity: 0.65;
mix-blend-mode: screen;
pointer-events: none;
}
/* Star-dust — adapts to theme. Light: subtle dark specks on paper.
Dark: bright white pinpoints on deep space. */
.org-detail-stage::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--text), transparent 65%) 0 0.6px, transparent 1px),
radial-gradient(circle at 32% 70%, color-mix(in srgb, var(--text), transparent 75%) 0 0.6px, transparent 1px),
radial-gradient(circle at 48% 12%, color-mix(in srgb, var(--text), transparent 75%) 0 0.6px, transparent 1px),
radial-gradient(circle at 62% 88%, color-mix(in srgb, var(--text), transparent 65%) 0 0.6px, transparent 1px),
radial-gradient(circle at 84% 30%, color-mix(in srgb, var(--text), transparent 75%) 0 0.6px, transparent 1px),
radial-gradient(circle at 92% 64%, color-mix(in srgb, var(--text), transparent 65%) 0 0.6px, transparent 1px);
background-size: 18px 18px, 22px 22px, 28px 28px, 34px 34px, 40px 40px, 26px 26px;
opacity: 0.35;
pointer-events: none;
}
body.dark .org-detail-stage::after {
background-image:
radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.55) 0 0.6px, transparent 1px),
radial-gradient(circle at 32% 70%, rgba(255, 255, 255, 0.40) 0 0.6px, transparent 1px),
radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.40) 0 0.6px, transparent 1px),
radial-gradient(circle at 62% 88%, rgba(255, 255, 255, 0.55) 0 0.6px, transparent 1px),
radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.40) 0 0.6px, transparent 1px),
radial-gradient(circle at 92% 64%, rgba(255, 255, 255, 0.55) 0 0.6px, transparent 1px);
opacity: 0.6;
}
/* Stage is always dark — stars use screen blend regardless of page theme. */
.org-detail-stage::after { mix-blend-mode: screen; }
/* Cursor-following spotlight — JS updates --cursor-x / --cursor-y as %. */
.org-detail-stage {
--cursor-x: 50%;
--cursor-y: 50%;
}
.org-detail-stage > .org-detail-cursor-lens {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(
circle 240px at var(--cursor-x) var(--cursor-y),
color-mix(in srgb, var(--detail-accent, var(--accent-day)), transparent 62%) 0%,
color-mix(in srgb, var(--detail-accent, var(--accent-day)), transparent 86%) 30%,
transparent 60%
);
mix-blend-mode: screen;
opacity: 0;
transition: opacity 240ms ease;
}
.org-detail-stage:hover > .org-detail-cursor-lens { opacity: 1; }
/* Sphere canvas behind detail-stage content. */
.org-detail-stage > .org-detail-sphere {
position: absolute;
inset: 0;
z-index: 0;
}
/* Clickable node-marks on top of the sphere. */
.org-detail-stage > .org-detail-nodes {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.org-detail-stage .org-detail-node {
position: absolute;
display: grid;
place-items: center;
pointer-events: auto;
cursor: pointer;
background: none;
border: 0;
padding: 0;
transform: translate(-50%, -50%);
transition: transform 220ms ease;
}
.org-detail-stage .org-detail-node:hover { transform: translate(-50%, -50%) scale(1.06); }
.org-detail-stage .org-detail-node[aria-selected="true"] > .mol-node-mark {
--mark-scale: 1.10;
--core-size: 18px;
}
/* Detail panel sits on top of sphere + nodes; positioned near the selected node via JS. */
.org-detail-stage .org-detail {
position: absolute;
z-index: 4;
transition: top 320ms cubic-bezier(.22,1,.36,1), left 320ms cubic-bezier(.22,1,.36,1), right 320ms cubic-bezier(.22,1,.36,1);
}
/* Backdrop follows the selected node — JS sets --detail-x/--detail-y. */
.org-detail-stage .org-detail-backdrop {
--detail-x: 50%;
--detail-y: 50%;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
ellipse 320px 220px at var(--detail-x) var(--detail-y),
color-mix(in srgb, var(--detail-accent, var(--accent-day)), transparent 30%) 0%,
color-mix(in srgb, var(--detail-accent, var(--accent-day)), transparent 70%) 32%,
transparent 68%
);
filter: blur(28px);
opacity: 0.95;
mix-blend-mode: screen;
transition: opacity 320ms ease;
}
/* Detail anchor: reuse
directly inside the stage. */
.org-detail-backdrop {
--detail-accent: #ff6b57;
--spot-x: 50%;
--spot-y: 38%;
position: absolute;
left: 28%;
top: 52%;
width: 460px;
height: 320px;
border-radius: 132px;
pointer-events: none;
transform: translate3d(-50%, -50%, 0);
background:
radial-gradient(
ellipse 116% 98% at var(--spot-x) var(--spot-y),
rgba(255, 255, 255, 0.78) 0%,
rgba(255, 255, 255, 0.62) 22%,
rgba(255, 255, 255, 0.42) 46%,
rgba(255, 255, 255, 0.24) 68%,
rgba(255, 255, 255, 0.10) 84%,
transparent 100%
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.12) 36%,
rgba(255, 255, 255, 0.04) 100%
);
filter: blur(34px);
opacity: 0.92;
}
body.dark .org-detail-backdrop {
background:
radial-gradient(
ellipse 116% 98% at var(--spot-x) var(--spot-y),
rgba(168, 188, 232, 0.40) 0%,
rgba(120, 144, 200, 0.30) 22%,
rgba(76, 96, 160, 0.18) 46%,
rgba(52, 64, 112, 0.10) 68%,
rgba(36, 44, 80, 0.04) 84%,
transparent 100%
);
opacity: 0.85;
}
/* Spatial variant — text in space, no glass card, no border, no background.
Title is huge with multi-layer text-shadow; links live in arc-switcher. */
.org-detail {
--detail-accent: #ff6b57;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
width: min(430px, calc(100% - 96px));
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--text);
isolation: isolate;
z-index: 1;
overflow: visible;
}
.org-detail[data-side="left"] {
left: auto;
right: 50%;
transform: translateY(-50%);
text-align: right;
}
/* Spatial: no decorative ::before / ::after / spotlight. */
.org-detail-spotlight { display: none; }
.org-detail-motion {
position: relative;
z-index: 1;
}
.org-detail-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
margin-bottom: 18px;
}
.org-detail[data-side="left"] .org-detail-top {
flex-direction: row-reverse;
justify-content: flex-end;
}
/* Detail panel composes
, , ,
directly. No org-* type/text rules — atoms own appearance. */
/* Detail spacing — composition uses molecules (tag-row + text-with-glow). */
.org-detail-motion .mol-tag-row { margin-bottom: 18px; }
.org-detail-motion .mol-text-with-glow--display { margin: 0 0 12px; }
.org-detail-motion .mol-text-with-glow--body { margin: 0 0 12px; }
.org-detail-motion .org-detail-comments {
display: grid;
gap: 8px;
max-width: 30ch;
margin: 0;
}
.org-detail-motion .org-detail-comments p {
margin: 0;
color: color-mix(in srgb, var(--text), white 2%);
font-size: 14px;
line-height: 1.36;
text-shadow:
0 0 16px rgba(255, 255, 255, 0.18),
0 0 8px rgba(255, 255, 255, 0.08);
}
.org-detail-stage .org-detail-comments p {
text-shadow:
0 0 16px rgba(0, 0, 0, 0.4),
0 0 8px rgba(0, 0, 0, 0.24);
}
/* Spatial detail hides connections — they live in . */
.org-detail-motion .org-detail-links-label,
.org-detail-motion .org-detail-links {
display: none;
}
/* ------------------------------------------------------------------------ */
/* Organism: Settings panel */
/* ------------------------------------------------------------------------ */
.org-settings {
position: relative;
width: min(380px, 100%);
display: grid;
gap: 12px;
padding: 14px 18px;
isolation: isolate;
}
.org-settings::before {
content: "";
position: absolute;
inset: -8px -18px;
z-index: -1;
border-radius: 28px;
background: radial-gradient(
ellipse 90% 84% at 38% 30%,
rgba(255, 245, 232, 0.34) 0%,
rgba(196, 220, 255, 0.14) 38%,
transparent 82%
);
filter: blur(24px);
opacity: 0.72;
pointer-events: none;
}
body.dark .org-settings::before {
background: radial-gradient(
ellipse 90% 84% at 38% 30%,
rgba(122, 150, 220, 0.20) 0%,
rgba(62, 78, 124, 0.12) 38%,
transparent 82%
);
}
.org-settings .nav-label {
margin: 4px 4px 0;
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.org-settings .nav-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.org-settings .nav-row .atom-button {
flex: 1 1 96px;
}
.org-settings .nav-hint {
max-width: 320px;
padding: 0 4px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
/* ------------------------------------------------------------------------ */
/* Organism: Top action bar (brand + search + actions) */
/* ------------------------------------------------------------------------ */
.org-topbar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 16px;
}
.org-topbar .center {
display: grid;
justify-items: center;
}
.org-topbar .right {
display: flex;
gap: 8px;
}
/* ------------------------------------------------------------------------ */
/* Flow list */
/* ------------------------------------------------------------------------ */
.flow-list {
display: grid;
gap: 8px;
}
.flow-row {
display: grid;
grid-template-columns: 56px minmax(180px, 0.32fr) 1fr;
gap: 18px;
align-items: baseline;
padding: 16px 18px;
border-radius: 14px;
background: var(--shell);
border: 1px solid var(--line);
}
.flow-row .num {
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
}
.flow-row strong {
font-size: 18px;
font-weight: 740;
line-height: 1.1;
letter-spacing: -0.02em;
}
.flow-row p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.flow-row code {
color: var(--text);
font-size: 11px;
}
/* ------------------------------------------------------------------------ */
/* Variant matrix */
/* ------------------------------------------------------------------------ */
.matrix {
display: grid;
gap: 10px;
}
.matrix-row {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 18px;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
background: var(--shell);
border: 1px solid var(--line);
}
.matrix-row strong {
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
.matrix-row code {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 10px;
}
.matrix-row .values {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.matrix-row .pill {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
background: var(--panel);
color: var(--text);
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: -0.01em;
border: 1px solid var(--line);
}
/* ------------------------------------------------------------------------ */
/* Code snippet block */
/* ------------------------------------------------------------------------ */
.snippet {
margin: 0;
padding: 12px 14px;
border-radius: 12px;
background: color-mix(in srgb, var(--text) 6%, transparent);
border: 1px solid var(--line);
color: var(--text);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
line-height: 1.5;
white-space: pre-wrap;
overflow-x: auto;
}
body.dark .snippet {
background: rgba(255, 255, 255, 0.04);
}
/* ------------------------------------------------------------------------ */
/* Responsive */
/* ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--three {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card--wide {
grid-column: span 2;
}
}
@media (max-width: 720px) {
.ds-shell {
width: min(100vw - 24px, 1240px);
padding-top: 16px;
}
.ds-hero,
.section,
.card {
padding: 16px;
}
.grid,
.grid--two,
.grid--three {
grid-template-columns: 1fr;
}
.card--wide {
grid-column: auto;
}
.section-header {
grid-template-columns: 1fr;
}
.flow-row {
grid-template-columns: 1fr;
}
.matrix-row {
grid-template-columns: 1fr;
}
.org-topbar {
grid-template-columns: 1fr;
text-align: left;
}
}
/* ========================================================================= */
/* Production-parity organism layer. */
/* Точная копия CSS из production relationship-graph для */
/* `.detail`, `.detail-*`, `.relationship-arc-switcher`, `.relationship-arc-*`*/
/* — чтобы organisms можно было переиспользовать копи-пастом в прототип. */
/* Override `position: fixed` → absolute, `height: 100vh` → 100% для дизайн- */
/* системы (organisms живут внутри stage, а не fullscreen). */
/* ========================================================================= */
/* ── Detail panel ────────────────────────────────────────────────────── */
.detail {
--detail-accent: #3a6ab5;
--spot-x: 50%;
--spot-y: 38%;
position: absolute;
z-index: 8;
display: block;
width: min(348px, calc(100vw - 48px));
padding: 14px 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.22)),
radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--detail-accent), transparent 94%) 0%, transparent 44%);
box-shadow:
0 18px 42px rgba(24, 31, 39, 0.10),
0 8px 22px rgba(255, 255, 255, 0.22) inset;
opacity: 0;
pointer-events: none;
transform: translate3d(-50%, calc(-50% + 18px), 0) scale(0.98);
backdrop-filter: blur(18px) saturate(1.08);
-webkit-backdrop-filter: blur(18px) saturate(1.08);
overflow: hidden;
isolation: isolate;
transition:
opacity 220ms ease,
transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.detail::before,
.detail::after,
.detail-spotlight {
content: "";
position: absolute;
pointer-events: none;
}
.detail::before {
top: -34px;
left: -12px;
width: 72%;
height: 46%;
border-radius: 999px;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.12) 34%, transparent 60%);
transform: rotate(-7deg);
opacity: 0.86;
}
.detail::after {
inset: auto 18px 12px 18px;
height: 1px;
border: 0;
border-radius: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
opacity: 0.78;
}
.detail-spotlight {
inset: -34px;
z-index: 0;
border-radius: 44px;
background: radial-gradient(
ellipse 48% 34% at var(--spot-x) var(--spot-y),
rgba(255, 255, 255, 0.82) 0%,
rgba(255, 255, 255, 0.42) 22%,
rgba(255, 255, 255, 0.14) 42%,
transparent 72%
);
filter: blur(10px);
opacity: 0.48;
}
.detail-backdrop {
--detail-accent: #3a6ab5;
--spot-x: 50%;
--spot-y: 38%;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-radius: 132px;
pointer-events: none;
background:
radial-gradient(
ellipse 116% 98% at var(--spot-x) var(--spot-y),
rgba(255, 255, 255, 0.78) 0%,
rgba(255, 255, 255, 0.62) 22%,
rgba(255, 255, 255, 0.42) 46%,
rgba(255, 255, 255, 0.24) 68%,
rgba(255, 255, 255, 0.10) 84%,
transparent 100%
),
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 36%, rgba(255, 255, 255, 0.04) 100%);
filter: blur(34px);
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.96);
transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.detail-backdrop.visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.detail.visible { opacity: 1; pointer-events: auto; }
.detail[data-phase="opening"],
.detail[data-phase="visible"] { transform: translate3d(-50%, -50%, 0) scale(1); }
.detail[data-phase="closing"] { transform: translate3d(-50%, calc(-50% + 14px), 0) scale(0.985); }
.detail-motion {
position: relative;
z-index: 1;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.detail.content-hidden .detail-motion { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.99); }
.detail-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.detail-tag {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 0 11px;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--detail-accent), rgba(255, 255, 255, 0.82) 84%);
color: var(--detail-accent);
font-size: 10px;
font-weight: 760;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.detail-tag::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 16px currentColor;
}
.detail-status {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
color: color-mix(in srgb, var(--text), var(--detail-accent) 32%);
font-size: 10px;
font-weight: 720;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.detail-status::before {
content: "·";
color: color-mix(in srgb, var(--detail-accent), transparent 20%);
font-size: 18px;
line-height: 0;
}
.detail-close { display: none; }
/* Спрятать пустые элементы detail panel ТОЛЬКО для spatial-варианта
(view-only) — production renderDetail не рендерит empty values в DOM.
В authoring mode title/intent могут быть пустыми, но placeholder
(mol-editable-text:empty::before) должен показываться — поэтому
.detail-title:empty не должен скрываться. Скопил селекторы под
[data-spatial-detail], чтобы не цеплять authoring detail. */
/* tag/status — буллет через ::before, без текста показывать его незачем.
Глобальное правило (не только spatial), иначе в authoring detail остаются
"висячие" точки над заголовком. title/intent НЕ глобально — у них есть
placeholder в authoring mode через mol-editable-text. */
.detail-tag:empty,
.detail-status:empty { display: none; }
/* В authoring mode (CTA draft) title/intent пустые — это норма, нужно
показывать placeholder через :empty::before. Поэтому :not([data-mode=
"authoring"]). Comments/links/label всегда скрываются empty, они не
имеют placeholder. */
[data-spatial-detail]:not([data-mode="authoring"]) .detail-title:empty,
[data-spatial-detail]:not([data-mode="authoring"]) .detail-intent:empty {
display: none;
}
[data-spatial-detail] .detail-comments:empty,
[data-spatial-detail] .detail-links:empty,
[data-spatial-detail] .detail-links-label:empty { display: none; }
.detail-title {
position: relative;
z-index: 1;
margin: 0 0 10px;
font-size: 30px;
font-weight: 740;
line-height: 0.98;
letter-spacing: -0.03em;
}
.detail-intent {
position: relative;
z-index: 1;
margin: 0 0 14px;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
max-width: 24ch;
}
.detail-comments {
position: relative;
z-index: 1;
display: grid;
gap: 8px;
max-width: 30ch;
margin: 0 0 14px;
}
.detail-comments p {
margin: 0;
color: color-mix(in srgb, var(--muted), var(--text) 28%);
font-size: 13px;
line-height: 1.36;
}
.detail-links-label {
position: relative;
z-index: 1;
margin-bottom: 9px;
color: var(--muted);
font-size: 10px;
font-weight: 760;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.detail-links {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Spatial variant — text in space, no glass card. */
.detail[data-variant="spatial"] {
width: min(430px, calc(100vw - 96px));
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
}
.detail[data-variant="spatial"]::before,
.detail[data-variant="spatial"]::after { display: none; opacity: 0; }
.detail[data-variant="spatial"] .detail-spotlight { display: none; }
.detail[data-variant="spatial"][data-side="left"] { text-align: right; }
.detail[data-variant="spatial"] .detail-top {
margin-bottom: 18px;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.detail[data-variant="spatial"][data-side="left"] .detail-top { flex-direction: row-reverse; }
.detail[data-variant="spatial"] .detail-tag {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-size: 10px;
font-weight: 720;
letter-spacing: 0.18em;
gap: 9px;
}
.detail[data-variant="spatial"] .detail-status {
min-height: 0;
color: color-mix(in srgb, var(--text), var(--detail-accent) 42%);
font-size: 10px;
font-weight: 720;
letter-spacing: 0.18em;
}
.detail[data-variant="spatial"] .detail-tag::before {
position: static;
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: 0 0 14px currentColor;
}
/* Light theme defaults: text-shadow гладко переходит в тёплый paper-фон через
warm-tinted glow с примесью accent. Текст dark, тени subtle и тоже dark. */
.detail[data-variant="spatial"] .detail-title {
margin-bottom: 12px;
font-size: clamp(38px, 5vw, 58px);
font-weight: 690;
line-height: 0.92;
letter-spacing: -0.045em;
max-width: min(12ch, 100%);
text-shadow:
0 0 32px color-mix(in srgb, var(--detail-accent), transparent 78%),
0 1px 0 rgba(255, 255, 255, 0.6);
}
.detail[data-variant="spatial"][data-side="left"] .detail-title,
.detail[data-variant="spatial"][data-side="left"] .detail-intent,
.detail[data-variant="spatial"][data-side="left"] .detail-comments,
.detail[data-variant="spatial"][data-side="left"] .detail-links { margin-left: auto; }
.detail[data-variant="spatial"] .detail-intent {
margin-bottom: 12px;
font-size: 17px;
line-height: 1.34;
max-width: 28ch;
color: color-mix(in srgb, var(--text), white 6%);
text-shadow: 0 0 18px color-mix(in srgb, var(--detail-accent), transparent 84%);
}
.detail[data-variant="spatial"] .detail-comments { max-width: 30ch; }
.detail[data-variant="spatial"] .detail-comments p {
color: color-mix(in srgb, var(--text), var(--muted) 28%);
text-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
}
.detail[data-variant="spatial"] .detail-links-label,
.detail[data-variant="spatial"] .detail-links { display: none; }
body.dark .detail[data-variant="spatial"] {
border: 0;
background: none;
box-shadow: none;
backdrop-filter: none;
}
/* Dark theme: production WHITE-glow text-shadow поверх deep-space bg. */
body.dark .detail[data-variant="spatial"] .detail-title {
text-shadow:
0 0 34px rgba(255, 255, 255, 0.46),
0 0 14px rgba(255, 255, 255, 0.28),
0 1px 0 rgba(255, 255, 255, 0.24);
}
body.dark .detail[data-variant="spatial"] .detail-intent {
color: color-mix(in srgb, var(--text), white 18%);
text-shadow: 0 0 22px rgba(255, 255, 255, 0.30), 0 0 10px rgba(255, 255, 255, 0.18);
}
body.dark .detail[data-variant="spatial"] .detail-comments p {
color: color-mix(in srgb, var(--text), white 2%);
text-shadow: 0 0 16px rgba(255, 255, 255, 0.18), 0 0 8px rgba(255, 255, 255, 0.08);
}
/* Scope override only inside the showcase stage so design-system can render
detail in both themes without messing with global .detail-backdrop rules. */
body.dark .org-detail-stage .detail-backdrop {
border-radius: 156px;
background:
radial-gradient(
ellipse 122% 104% at var(--spot-x) var(--spot-y),
rgba(148, 176, 236, 0.22) 0%,
rgba(118, 144, 212, 0.18) 22%,
rgba(88, 108, 170, 0.14) 46%,
rgba(56, 68, 108, 0.10) 68%,
rgba(20, 24, 38, 0.04) 86%,
transparent 100%
),
linear-gradient(135deg, rgba(88, 110, 176, 0.12) 0%, rgba(50, 64, 106, 0.08) 42%, rgba(16, 20, 34, 0.02) 100%);
filter: blur(42px);
opacity: 0.98;
}
body.dark .org-detail-stage .detail-backdrop:not(.visible) { opacity: 0; }
/* ── Relationship arc switcher ──────────────────────────────────────── */
.relationship-arc-switcher {
--arc-accent: var(--detail-accent);
--arc-motion-distance: 84px;
position: absolute; /* production: fixed; design-system: scoped to stage */
top: 0;
z-index: 7;
width: min(680px, 52%); /* production uses 52vw; we use % of stage */
height: 100%; /* production: 100vh */
opacity: 1;
overflow: visible;
pointer-events: none;
transform: translate3d(0, 0, 0) scale(1);
transform-origin: center;
transition: opacity 220ms ease, transform 220ms ease;
touch-action: none;
}
.relationship-arc-switcher.visible {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
}
.relationship-arc-switcher[data-side="left"] { left: 0; }
.relationship-arc-switcher[data-side="right"] { right: 0; }
.relationship-arc-switcher__particles,
.relationship-arc-switcher__items {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.relationship-arc-switcher__items {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.relationship-arc-switcher__particles {
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.relationship-arc-particle {
--particle-alpha: 0.42;
--particle-size: 2.4px;
/* Drift params — bridge задаёт per-particle для рассинхронизированного
движения (как «дыхание» частиц на сфере). Fallback'и для статичного. */
--drift-x: 0px;
--drift-y: 0px;
--drift-dur: 6s;
--drift-delay: 0s;
/* Cursor pull — bridge обновляет per-particle через RAF loop (как
uCursor pull у частиц на сфере). Складывается с drift в transform. */
--pull-x: 0px;
--pull-y: 0px;
position: absolute;
width: var(--particle-size);
height: var(--particle-size);
border-radius: 999px;
background: color-mix(in srgb, var(--arc-accent), transparent 10%);
box-shadow:
0 0 7px color-mix(in srgb, var(--arc-accent), transparent 42%),
0 0 16px color-mix(in srgb, var(--arc-accent), transparent 76%);
opacity: var(--particle-alpha);
transform: translate(-50%, -50%);
/* Подвижность — плавный drift + лёгкое пульсирование opacity, как
частицы на сфере. Каждая частица со своими amplitude/duration/delay
(CSS-vars), поэтому движение не синхронное. */
animation: arcParticleDrift var(--drift-dur) ease-in-out infinite;
animation-delay: var(--drift-delay);
will-change: transform, opacity;
}
@keyframes arcParticleDrift {
0% {
transform: translate(-50%, -50%) translate(var(--pull-x), var(--pull-y));
opacity: var(--particle-alpha);
}
50% {
transform: translate(-50%, -50%)
translate(calc(var(--drift-x) + var(--pull-x)), calc(var(--drift-y) + var(--pull-y)));
opacity: min(1, calc(var(--particle-alpha) * 1.55));
}
100% {
transform: translate(-50%, -50%) translate(var(--pull-x), var(--pull-y));
opacity: var(--particle-alpha);
}
}
@media (prefers-reduced-motion: reduce) {
/* Без drift, но cursor pull остаётся (применяется через transform var). */
.relationship-arc-particle {
animation: none;
transform: translate(-50%, -50%) translate(var(--pull-x), var(--pull-y));
}
}
.relationship-arc-item {
--item-color: var(--arc-accent);
--item-emphasis: 0.7;
--dot-size: calc(18px + var(--item-emphasis) * 18px);
--dot-shift: -18px;
position: absolute;
display: grid;
grid-template-columns: var(--dot-size) minmax(0, 320px);
align-items: center;
column-gap: 18px;
min-width: 382px;
padding: 0;
border: 0;
background: none;
color: color-mix(in srgb, var(--text), var(--item-color) 12%);
cursor: pointer;
font: inherit;
opacity: calc(0.38 + var(--item-emphasis) * 0.62);
text-align: left;
transform: translate(var(--dot-shift), -50%);
transition: color 180ms ease, opacity 180ms ease, transform 180ms ease, letter-spacing 180ms ease;
}
.relationship-arc-item[disabled] { cursor: default; opacity: 0.34; pointer-events: none; }
.relationship-arc-item.exiting { pointer-events: none; z-index: 6; }
.relationship-arc-item__dot {
position: relative;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
isolation: isolate;
background:
radial-gradient(circle at center,
color-mix(in srgb, var(--item-color), white 3%) 0 11%,
var(--item-color) 23%,
color-mix(in srgb, var(--item-color), transparent 26%) 38%,
color-mix(in srgb, var(--item-color), transparent 78%) 62%,
transparent 82%),
radial-gradient(circle at center,
color-mix(in srgb, var(--item-color), transparent 20%) 0 32%,
color-mix(in srgb, var(--item-color), transparent 76%) 58%,
transparent 74%);
box-shadow:
0 0 calc(24px + var(--item-emphasis) * 42px) color-mix(in srgb, var(--item-color), transparent 42%),
0 0 calc(62px + var(--item-emphasis) * 68px) color-mix(in srgb, var(--item-color), transparent 82%);
filter: blur(0.15px) saturate(1.14);
}
.relationship-arc-item__dot::before,
.relationship-arc-item__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.relationship-arc-item__dot::before {
inset: 20%;
background: radial-gradient(circle at center,
color-mix(in srgb, var(--item-color), white 4%) 0 24%,
var(--item-color) 54%,
color-mix(in srgb, var(--item-color), black 10%) 100%);
box-shadow: 0 0 10px color-mix(in srgb, var(--item-color), transparent 16%),
0 0 2px color-mix(in srgb, var(--item-color), white 10%) inset;
}
.relationship-arc-item__dot::after {
inset: 6%;
background:
radial-gradient(circle at 46% 32%, color-mix(in srgb, var(--item-color), transparent 18%) 0 1.3px, transparent 2.2px),
radial-gradient(circle at 62% 58%, color-mix(in srgb, var(--item-color), transparent 28%) 0 1px, transparent 2px),
radial-gradient(circle at 34% 64%, color-mix(in srgb, var(--item-color), transparent 38%) 0 0.9px, transparent 1.8px);
opacity: calc(0.36 + var(--item-emphasis) * 0.32);
}
.relationship-arc-item__copy {
display: grid;
gap: 3px;
justify-items: start;
min-width: 0;
}
.relationship-arc-item strong {
display: -webkit-box;
max-width: 320px;
overflow: hidden;
font-size: 13px;
font-weight: 760;
letter-spacing: 0.03em;
line-height: 1.12;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.relationship-arc-item small {
display: inline-flex;
align-items: center;
gap: 8px;
color: color-mix(in srgb, var(--item-color), var(--text) 30%);
font-size: 9px;
font-weight: 760;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.relationship-arc-item small .relationship-arc-item__status::before {
content: "·";
margin-right: 8px;
color: color-mix(in srgb, var(--item-color), transparent 28%);
}
.relationship-arc-item[data-role="focus"] {
--dot-size: 52px;
--dot-shift: -26px;
min-width: 440px;
opacity: 1;
}
.relationship-arc-item[data-role="focus"] .relationship-arc-item__dot {
box-shadow: 0 0 72px color-mix(in srgb, var(--item-color), transparent 34%),
0 0 132px color-mix(in srgb, var(--item-color), transparent 78%);
}
.relationship-arc-item[data-role="focus"] strong {
max-width: 360px;
font-size: 16px;
font-weight: 800;
}
.relationship-arc-item:hover {
color: var(--text);
letter-spacing: 0.01em;
transform: translate(var(--dot-shift), calc(-50% - 3px));
}
/* ── Add-item CTA (role="add-parent" / role="add-child") ──
Пустой dashed circle с "+" вместо filled vertex dot. Использует
--halo-rgb (production accent) для tint, чтобы CTA не выглядело как
real node, но визуально часть arc'а. */
.relationship-arc-item--add {
--item-color: rgb(var(--halo-rgb, 255, 107, 87));
}
.relationship-arc-item__dot--add {
display: flex;
align-items: center;
justify-content: center;
width: var(--dot-size);
height: var(--dot-size);
border: 1.8px dashed color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 30%);
border-radius: 50%;
background: transparent !important;
box-shadow: 0 0 calc(16px + var(--item-emphasis) * 26px)
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 78%);
color: color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), var(--text) 40%);
font-size: 22px;
font-weight: 600;
line-height: 1;
filter: none;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.relationship-arc-item__dot--add::before,
.relationship-arc-item__dot--add::after {
display: none; /* CTA не нуждается в декоративных layer'ах obычного dot'a. */
}
.relationship-arc-item--add:hover .relationship-arc-item__dot--add {
border-color: color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 8%);
box-shadow: 0 0 calc(28px + var(--item-emphasis) * 40px)
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 60%);
transform: scale(1.08);
}
/* ========================================================================= */
/* Flow · Vertex Create — long-press 3s pattern */
/* ========================================================================= */
.org-vertex-create-stage {
/* Light theme: warm paper background с мягкими accent-glow'ами от --halo-rgb. */
position: relative;
min-height: 540px;
border-radius: 14px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 30% 36%, color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), white 78%), transparent 56%),
radial-gradient(circle at 76% 70%, color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), white 88%), transparent 62%),
linear-gradient(135deg, #faf6ee 0%, #f0ebe1 48%, #e6dfd2 100%);
color: var(--text);
touch-action: none;
user-select: none;
cursor: crosshair;
}
body.dark .org-vertex-create-stage {
background:
radial-gradient(circle at 28% 32%, rgba(53, 70, 130, 0.42), transparent 58%),
radial-gradient(circle at 78% 72%, rgba(94, 60, 158, 0.34), transparent 64%),
linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
color: rgba(245, 247, 255, 0.92);
}
.org-vertex-create-stage > .org-detail-sphere {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Hint в idle-state — гаснет во время удержания. */
.org-vertex-create-hint {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 6;
transform: translateX(-50%);
color: color-mix(in srgb, var(--text), transparent 50%);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
pointer-events: none;
transition: opacity 220ms ease;
}
body.dark .org-vertex-create-hint {
color: color-mix(in srgb, rgba(245, 247, 255, 0.6), transparent 30%);
}
.org-vertex-create-stage[data-state="converging"] .org-vertex-create-hint,
.org-vertex-create-stage[data-state="materialized"] .org-vertex-create-hint,
.org-vertex-create-stage[data-state="authoring"] .org-vertex-create-hint,
.org-vertex-create-stage[data-state="persisted"] .org-vertex-create-hint {
opacity: 0;
}
/* Halo в точке давления — растёт во время удержания.
--create-progress (0..1) обновляется из JS каждый кадр.
Base size 280px (compact), scale 0.15 → 1.0. После материализации
этот халo полностью скрывается — финальный nimbus даёт встроенный
.atom-halo внутри .mol-node-mark (точно как у вершин в графе). */
.org-vertex-create-halo {
position: absolute;
z-index: 2;
width: 280px;
height: 280px;
margin: -140px 0 0 -140px; /* центрирование от left/top */
border-radius: 50%;
/* Light theme — два слоя: насыщенный ядерный glow без blend mode (виден
на бумаге) + ambient ореол с soft alpha. Цвет через --halo-rgb. */
background:
radial-gradient(circle at center,
rgba(var(--halo-rgb, 255, 107, 87), 0.58) 0%,
rgba(var(--halo-rgb, 255, 107, 87), 0.38) 14%,
rgba(var(--halo-rgb, 255, 107, 87), 0.18) 32%,
rgba(var(--halo-rgb, 255, 107, 87), 0.07) 54%,
rgba(var(--halo-rgb, 255, 107, 87), 0.02) 74%,
transparent 88%);
filter: blur(calc(2px + var(--create-progress, 0) * 14px)) saturate(1.06);
opacity: calc(var(--create-progress, 0) * (2 - var(--create-progress, 0)));
transform: scale(calc(0.15 + var(--create-progress, 0) * 0.85));
pointer-events: none;
/* Транзишен только для смены состояний (materialized/cancel),
во время converging --create-progress обновляется каждый кадр. */
}
/* Dark theme — добавляем mix-blend-mode: screen для bright glow поверх
deep-space, цвета чуть ярче. */
body.dark .org-vertex-create-stage .org-vertex-create-halo {
background:
radial-gradient(circle at center,
rgba(var(--halo-rgb, 255, 107, 87), 0.95) 0%,
rgba(var(--halo-rgb, 255, 107, 87), 0.62) 12%,
rgba(var(--halo-rgb, 255, 107, 87), 0.32) 28%,
rgba(var(--halo-rgb, 255, 107, 87), 0.12) 52%,
rgba(var(--halo-rgb, 255, 107, 87), 0.03) 74%,
transparent 88%);
mix-blend-mode: screen;
}
/* Halo opacity управляется ТОЛЬКО через --create-progress (0..1).
- converging: JS ramp'ит progress 0→1 → halo проявляется
- materialize/cancel: JS ramp'ит progress 1→0 → halo плавно гаснет
- reset/idle: progress = 0 → opacity = 0
Никаких state-based instant'ов opacity (это вызывало «блик»). */
/* Materialized vertex — node-mark в точке давления, появляется на 100% удержания. */
.org-vertex-create-mark {
position: absolute;
z-index: 3;
width: 1px; /* anchor; mol-node-mark внутри сам задаёт размер */
height: 1px;
pointer-events: none;
opacity: 0;
transform: scale(0);
transition:
opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.org-vertex-create-mark > .mol-node-mark {
position: absolute;
transform: translate(-50%, -50%);
}
.org-vertex-create-stage[data-state="materialized"] .org-vertex-create-mark,
.org-vertex-create-stage[data-state="authoring"] .org-vertex-create-mark,
.org-vertex-create-stage[data-state="persisted"] .org-vertex-create-mark {
opacity: 1;
transform: scale(1);
}
/* ── Molecule: Editable text — reusable contenteditable + placeholder ──
Используется везде, где нужен inline-ввод без рамок и подчёркиваний:
detail-title authoring, detail-intent authoring, любое spatial-поле.
Атомы: .atom-typography (size/weight задаёт родитель), placeholder через
::before с attr(data-placeholder) — тот же шрифт, более муьеный цвет. */
.mol-editable-text {
outline: none;
cursor: text;
caret-color: var(--editable-caret, rgb(var(--halo-rgb, 255, 107, 87)));
/* Сохраняем typography родителя (detail-title, detail-intent и т.д.). */
}
/* Без contenteditable элемент только показывает placeholder (read-only) —
I-beam cursor сбивает с толку. Делаем default. */
.mol-editable-text:not([contenteditable]) {
cursor: default;
caret-color: transparent;
}
.mol-editable-text:empty::before {
content: attr(data-placeholder);
color: var(--editable-placeholder,
color-mix(in srgb, currentColor, transparent 56%));
pointer-events: none;
}
/* Spatial-контекст: placeholder примешивает accent для деликатной подсветки. */
.detail[data-variant="spatial"] .mol-editable-text:empty::before {
color: color-mix(in srgb,
color-mix(in srgb, currentColor, transparent 56%),
var(--detail-accent, #ff6b57) 14%);
}
/* Spatial detail в authoring-режиме — title/intent редактируются inline.
Все правила placeholder/caret теперь идут от .mol-editable-text. */
.org-vertex-create-stage > .detail[data-mode="authoring"] {
z-index: 8;
}
.detail[data-mode="authoring"] .detail-tag {
/* Authoring: tag тоже placeholder, либо пустой. По умолчанию — пустой. */
opacity: 0.6;
}
/* ── Molecule: Action key — кнопка действия с keyboard-hint ПОД ней.
Reusable паттерн: glyph + label сверху, hint ниже мелким муьеным шрифтом.
Никаких рамок/фонов; на hover чуть приподнимается. Tone задаётся через
--action-tone (default = currentColor; --detail-accent для confirm). */
.mol-action-key {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 0;
border: 0;
background: none;
font-family: inherit;
text-align: left;
cursor: pointer;
color: var(--action-tone, currentColor);
transition: color 180ms ease, transform 180ms ease;
}
.mol-action-key:hover {
transform: translateY(-1px);
color: var(--action-tone-hover, var(--action-tone, currentColor));
}
.mol-action-key__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 720;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mol-action-key__glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 14px;
}
.mol-action-key__hint {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.45;
}
.mol-action-key-showcase {
display: inline-flex;
gap: 28px;
}
/* ── Authoring actions group — confirm / discard. Использует .mol-action-key. */
.detail-authoring-actions {
position: relative;
z-index: 1;
display: flex;
gap: 22px;
margin-top: 18px;
}
.detail[data-variant="spatial"][data-side="left"] .detail-authoring-actions {
justify-content: flex-end;
}
[data-vertex-confirm],
[data-spatial-confirm] {
--action-tone: var(--detail-accent, #ff6b57);
--action-tone-hover: color-mix(in srgb, var(--detail-accent, #ff6b57), white 18%);
}
[data-vertex-discard],
[data-spatial-discard] {
--action-tone: color-mix(in srgb, currentColor, transparent 50%);
--action-tone-hover: currentColor;
}
/* Spatial detail authoring mode — CTA flow для создания родителя.
Default (view mode): actions/chips/close видны/скрыты соответственно.
Authoring mode (draft-vertex): actions visible, chips/close скрыты,
title/intent редактируемые (contenteditable + mol-editable-text class
добавляются bridge'ом). */
[data-spatial-detail]:not([data-mode="authoring"]) [data-spatial-authoring-actions] {
display: none;
}
[data-spatial-detail][data-mode="authoring"] .detail-chips,
[data-spatial-detail][data-mode="authoring"] [data-spatial-close],
[data-spatial-detail][data-mode="authoring"] [data-spatial-comments],
[data-spatial-detail][data-mode="authoring"] [data-spatial-links],
[data-spatial-detail][data-mode="authoring"] .detail-links-label {
display: none;
}
/* В persisted-режиме actions скрыты (вершина сохранена, делать нечего). */
.detail[data-mode="persisted"] .detail-authoring-actions { display: none; }
.detail[data-mode="persisted"] .mol-editable-text {
caret-color: transparent;
}
/* Пустые поля (например, intent без описания) исчезают, не показывают
placeholder в персистнутом состоянии. */
.detail[data-mode="persisted"] .mol-editable-text:empty {
display: none;
}
/* В spatial-режиме detail = view of existing vertex (open via tap).
Read-only поведение идентично persisted: no caret, no actions, empty
intent не показывает placeholder. Но persist observer не триггерится
(он слушает только 'persisted' = save после создания через long-press).
Plus spatial показывает close + comments + links (production parity). */
.detail[data-mode="spatial"] .detail-authoring-actions { display: none; }
.detail[data-mode="spatial"] .mol-editable-text {
caret-color: transparent;
}
.detail[data-mode="spatial"] .mol-editable-text:empty {
display: none;
}
/* close / comments / links / spotlight видны только в spatial.
В authoring (creation of new vertex) они скрыты — поле фокусировано
на вводе title/intent + actions Save/Cancel. */
.detail[data-mode="authoring"] .detail-close,
.detail[data-mode="authoring"] .detail-comments,
.detail[data-mode="authoring"] .detail-links-label,
.detail[data-mode="authoring"] .detail-links,
.detail[data-mode="authoring"] .detail-spotlight {
display: none;
}
.detail[data-mode="persisted"] .detail-close,
.detail[data-mode="persisted"] .detail-comments,
.detail[data-mode="persisted"] .detail-links-label,
.detail[data-mode="persisted"] .detail-links,
.detail[data-mode="persisted"] .detail-spotlight {
display: none;
}
/* Spatial — show close button (overrides default .detail-close{display:none}).
detail-links / detail-links-label для spatial variant DS уже скрыты
(см. .detail[data-variant="spatial"] .detail-links{display:none} выше),
связи показываются через отдельный relationship-arc-switcher слева. */
.detail[data-mode="spatial"] .detail-close {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: none;
color: color-mix(in srgb, var(--text), transparent 40%);
font-size: 22px;
font-weight: 400;
line-height: 1;
border-radius: 50%;
cursor: pointer;
transition: color 180ms ease, background-color 180ms ease;
}
.detail[data-mode="spatial"] .detail-close:hover {
color: var(--text);
background: color-mix(in srgb, var(--text), transparent 92%);
}
/* Reset button в controls. */
.mol-controls [data-vertex-reset] {
padding: 6px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--text);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.mol-controls [data-vertex-reset]:hover {
background: color-mix(in srgb, var(--shell), var(--text) 8%);
}
/* ========================================================================= */
/* Wizard pattern — ghost cursor + contextual hints для онбординга */
/* ========================================================================= */
/* ── Molecule: wizard fog — canvas + backdrop-filter blur. Изначально
весь stage под fog'ом (опаковый canvas + blur backdrop'a сзади),
как «туман войны» / «замёрзшее стекло». Cursor движется → erase
destination-out → fog рассеивается ПОД курсором, оставляя clear-след.
След накапливается: куда уже двигали ghost / user cursor — там fog'a нет.
Работает в обеих темах (canvas рисует semi-opaque base, blur — на фоне). */
/* Wizard backdrop — чистый blur без цветной подложки. Mask управляется
JS'ом из wireWizard: накапливается trail вокруг wizard cursor (всегда
растёт) + trail вокруг user cursor (растёт пока user рядом с wizard'ом,
decay'ит когда уходит за PROXIMITY_PX). mask-composite: intersect →
pixel transparent если transparent хотя бы в одном слое (внутри любой
trail точки). Initial mask приходит из JS при wire. */
.mol-wizard-fog {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
mask-composite: intersect;
-webkit-mask-composite: source-in;
transition: opacity 360ms ease, backdrop-filter 360ms ease;
}
/* fogClear — для step'ов где пользователь должен ясно видеть нижний слой
(drag-to-rotate sphere, click на конкретный element). Blur полностью
отключается; ghost cursor + hint остаются. */
.mol-wizard-fog.cleared {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ── Molecule: ghost cursor — full-stage cursor lens overlay + центральный
marker. Визуально идентичен реальному cursor lens (radial gradient
с centred-at-cursor), но с двумя distinguishing features:
1) Пульсирующая opacity (1.6s ease-in-out) — реальный lens статичен
2) Центральный marker-dot — у реального cursor lens'а его нет
Position через --ghost-x / --ghost-y (px relative to stage); JS
плавно лерпит координаты через rAF для эффекта «движения курсора». */
.mol-ghost-cursor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2; /* внутри .org-wizard — выше backdrop, ниже marker/hint */
/* Halo вокруг cursor — accent цвет (production coral).
ВАЖНО: НЕ использовать mix-blend-mode — оно создаёт isolation stacking
context на .org-wizard, и backdrop-filter в .mol-wizard-fog перестаёт
видеть sphere/floating-bg под overlay'ем (blur пропадает).
Pulse animation даёт жизни. Visible UI element, не fog backdrop. */
background: radial-gradient(
circle 240px at var(--ghost-x, 50%) var(--ghost-y, 50%),
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 56%) 0%,
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 82%) 30%,
transparent 60%
);
animation: ghostLensBreath 1.6s ease-in-out infinite;
}
@keyframes ghostLensBreath {
0%, 100% { opacity: 0.65; }
50% { opacity: 1.00; }
}
/* User cursor halo — accent glow вокруг реального курсора пользователя в
wizard режиме. Использует --halo-rgb (production accent, по умолчанию
coral) — цветной как floating background halos. Чуть мягче ghost lens'a
чтобы wizard cursor оставался primary visual anchor. */
.mol-user-cursor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2; /* тот же слой что ghost lens */
background: radial-gradient(
circle 180px at var(--user-x, -200px) var(--user-y, -200px),
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 60%) 0%,
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 84%) 35%,
transparent 65%
);
}
/* Marker — точка-прицел в центре ghost lens'a. Анимация пульсации
синхронна с lens'ом, размер 8px с soft glow. */
.mol-ghost-cursor__marker {
position: absolute;
z-index: 3; /* выше ghost lens'a */
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
/* Marker — accent цвет для контраста с halo. Глаз сразу видит куда
указывает wizard. */
background: rgb(var(--halo-rgb, 255, 107, 87));
box-shadow: 0 0 14px rgb(var(--halo-rgb, 255, 107, 87));
left: var(--ghost-x, 50%);
top: var(--ghost-y, 50%);
animation: ghostMarkerPulse 1.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes ghostMarkerPulse {
0%, 100% { transform: scale(0.78); opacity: 0.78; }
50% { transform: scale(1.18); opacity: 1.00; }
}
/* Clickable variant — для wizard intro click-target step'ов. Marker
принимает pointer events, расширяет hit area через ::after (48px),
показывает курсор pointer. JS toggle'ит через .clickable class. */
.mol-ghost-cursor__marker.clickable {
pointer-events: auto;
cursor: pointer;
}
.mol-ghost-cursor__marker.clickable::after {
content: '';
position: absolute;
inset: -22px; /* расширяет hit area до 48px вокруг 8px marker'a */
border-radius: 50%;
pointer-events: auto;
}
/* ── Molecule: wizard hint — spatial text + pulsing accent marker. ──
Distinguishing features (отличает от обычного текста):
- Слева pulsing accent dot (синхронно с ghost cursor pulse)
- Цвет: accent-tinted (color-mix с accent 18%)
- Чуть меньше body (14px vs 17-18px), letter-spacing 0.005em */
.mol-wizard-hint {
position: absolute;
z-index: 4; /* внутри .org-wizard — выше backdrop/ghost/marker */
display: block;
width: max-content;
max-width: min(260px, calc(100vw - 48px));
padding: 0 8px;
text-align: center;
/* Hint расположен ПОД ghost cursor'ом. Horizontal alignment управляется
через --hint-tx (JS читает позицию ghost и выбирает: -50% для центра,
0 для align-start у левого края, -100% для align-end у правого). */
left: var(--ghost-x, 50%);
top: var(--ghost-y, 50%);
transform: translate(var(--hint-tx, -50%), 32px);
pointer-events: none;
transition: opacity 240ms ease;
opacity: 0;
}
.mol-wizard-hint.visible {
opacity: 1;
}
.mol-wizard-hint__marker {
width: 6px;
height: 6px;
margin-top: 7px;
border-radius: 50%;
background: rgb(var(--halo-rgb, 255, 107, 87));
box-shadow: 0 0 10px rgb(var(--halo-rgb, 255, 107, 87));
animation: ghostBreath 1.6s ease-in-out infinite;
}
.mol-wizard-hint__text {
font-size: 14px;
font-weight: 540;
line-height: 1.42;
letter-spacing: 0.005em;
/* Нейтральный текст hint'a — без accent tint. */
color: var(--flight-text, var(--text));
}
/* ── Organism: wizard overlay — контейнер для ghost cursor + hint.
Накладывается поверх stage'a, не блокирует pointer events. */
.org-wizard {
position: absolute;
inset: 0;
z-index: 11;
pointer-events: none;
opacity: 0;
transition: opacity 220ms ease;
}
.org-wizard.visible { opacity: 1; }
/* Туман (mol-wizard-fog) виден ТОЛЬКО когда ghost cursor двигается.
Когда стоит — wizard "молча подсказывает", без фокус-эффекта.
`.moving` class toggle'ится JS в animateGhostTo (organisms.js).
Default — fog скрыт; во время движения — поднимается. */
.org-wizard .mol-wizard-fog {
opacity: 0;
transition: opacity 280ms ease;
}
.org-wizard.moving .mol-wizard-fog {
opacity: 1;
}
/* Minimized state — wizard в левом верхнем углу, blur выключен, hint скрыт.
Marker остаётся видим (с halo) как индикатор «помощник доступен».
На .hover (proximity к marker'у) wizard раскрывается обратно. */
.org-wizard.minimized .mol-wizard-fog {
opacity: 0;
transition: opacity 320ms ease;
}
.org-wizard.minimized .mol-ghost-cursor {
opacity: 0.55;
transition: opacity 320ms ease;
}
/* Hint остаётся видимым в minimized — wizard в углу постоянно показывает
«что делать дальше». Текст слегка деэмфазирован (opacity 0.78), на hover
полная яркость. */
.org-wizard.minimized .mol-wizard-hint {
opacity: 0.85 !important;
pointer-events: none;
}
.org-wizard.minimized .mol-user-cursor {
opacity: 0;
}
.org-wizard.minimized.hover .mol-wizard-fog {
opacity: 1;
}
.org-wizard.minimized.hover .mol-ghost-cursor {
opacity: 1;
}
.org-wizard.minimized.hover .mol-wizard-hint {
opacity: 1 !important;
}
.org-wizard.minimized.hover .mol-user-cursor {
opacity: 1;
}
/* ── Реальный cursor lens — следует за курсором пользователя.
Используется в любом stage'е (wireCursorLens). Визуально идентичен
ghost cursor'у: radial gradient halo + центральная dot для точного
targeting'а (см. ghostMarkerPulse). */
.mol-cursor-lens {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 11;
/* Halo вокруг курсора, размером сопоставим с vertex halo (atom-halo,
--halo-size: 184px diameter + 11px blur ≈ 220px effective glow).
Radius 110px = diameter 220px — визуально matches размеру halo
вокруг созданной вершины. Плавный многоступенчатый gradient. */
background: radial-gradient(
circle 110px at var(--lens-x, 50%) var(--lens-y, 50%),
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 40%) 0%,
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 62%) 18%,
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 82%) 42%,
color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), transparent 95%) 65%,
transparent 85%
);
/* mix-blend-mode: screen убран — создаёт isolation stacking context,
который мог конфликтовать с backdrop-filter сверху и был слабо
различим на light theme. Plain source-over даёт стабильный glow. */
opacity: 0;
transition: opacity 220ms ease;
}
/* visible class задаётся wireCursorLens на pointermove. Breathing
animation идентична .mol-ghost-cursor — pulse 1.6s ease-in-out,
opacity 0.65 ↔ 1.0. Визуально lens теперь like wizard ghost cursor. */
.mol-cursor-lens.visible {
opacity: 1;
animation: ghostLensBreath 1.6s ease-in-out infinite;
}
/* Центральная dot — точечный target для precise targeting'а. Reuse
ghostMarkerPulse keyframes от wizard marker. Position через
--lens-x/-y CSS vars (set'ятся wireCursorLens на pointermove).
Размер 8px + soft glow — идентичен wizard ghost marker'у. */
.mol-cursor-lens.visible::after {
content: '';
position: absolute;
left: var(--lens-x, 50%);
top: var(--lens-y, 50%);
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
border-radius: 50%;
background: rgb(var(--halo-rgb, 255, 107, 87));
box-shadow: 0 0 14px rgb(var(--halo-rgb, 255, 107, 87));
pointer-events: none;
animation: ghostMarkerPulse 1.6s ease-in-out infinite;
}
/* ── Showcase stage для wizard demo ── */
.org-wizard-demo-stage {
position: relative;
min-height: 420px;
border-radius: 14px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 30% 36%, color-mix(in srgb, var(--accent-day), white 78%), transparent 56%),
radial-gradient(circle at 76% 70%, color-mix(in srgb, var(--accent-year), white 88%), transparent 62%),
linear-gradient(135deg, #faf6ee 0%, #f0ebe1 48%, #e6dfd2 100%);
color: var(--text);
}
body.dark .org-wizard-demo-stage {
background:
radial-gradient(circle at 30% 36%, rgba(74, 92, 168, 0.38), transparent 56%),
radial-gradient(circle at 76% 70%, rgba(108, 70, 178, 0.34), transparent 62%),
linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
color: rgba(245, 247, 255, 0.92);
}
.org-wizard-demo-canvas {
position: absolute;
inset: 0;
}
.org-wizard-demo-canvas [data-wizard-target] {
position: absolute;
transform: translate(-50%, -50%);
}
/* ========================================================================= */
/* Organism · Edge Create — long-drag создание связи между двумя вершинами */
/* ========================================================================= */
.org-edge-create-stage {
/* Spatial scene — те же тёмные/светлые backdrop'ы что и vertex-create. */
position: relative;
min-height: 540px;
border-radius: 14px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 30% 36%, color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), white 78%), transparent 56%),
radial-gradient(circle at 76% 70%, color-mix(in srgb, rgb(var(--halo-rgb, 255, 107, 87)), white 88%), transparent 62%),
linear-gradient(135deg, #faf6ee 0%, #f0ebe1 48%, #e6dfd2 100%);
color: var(--text);
touch-action: none;
user-select: none;
}
body.dark .org-edge-create-stage {
background:
radial-gradient(circle at 28% 32%, rgba(53, 70, 130, 0.42), transparent 58%),
radial-gradient(circle at 78% 72%, rgba(94, 60, 158, 0.34), transparent 64%),
linear-gradient(135deg, #0c1027 0%, #0a0d1f 48%, #06070f 100%);
color: rgba(245, 247, 255, 0.92);
}
.org-edge-create-stage > .org-detail-sphere {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.org-edge-create-edges {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.org-edge-create-nodes {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.org-edge-create-node {
position: absolute;
display: grid;
place-items: center;
pointer-events: auto;
cursor: grab;
background: none;
border: 0;
padding: 0;
margin: 0;
/* Position через CSS variables — bridge'и (level1) обновляют --node-x/-y
каждый rAF через _sphereControl.onFrame projection. translate(-50%, -50%)
центрирует marker на projected screen point.
--node-scale (default 1) обновляется per-frame на основе cameraDistance:
при zoom-out все ноды уменьшаются (production-faithful distance fade).
Hover/armed/target-hover умножают scale через CSS calc внутри transform. */
left: 0; top: 0;
transform: translate3d(calc(var(--node-x, 0px) - 50%), calc(var(--node-y, 0px) - 50%), 0)
scale(var(--node-scale, 1));
transition: opacity 220ms ease;
will-change: transform, opacity;
}
.org-edge-create-node:hover {
transform: translate3d(calc(var(--node-x, 0px) - 50%), calc(var(--node-y, 0px) - 50%), 0)
scale(calc(var(--node-scale, 1) * 1.06));
}
.org-edge-create-node[data-armed="true"] {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.18);
}
.org-edge-create-node[data-armed="true"] > .mol-node-mark {
filter: brightness(1.15) saturate(1.2);
}
.org-edge-create-node[data-target-hover="true"] {
transform: translate(-50%, -50%) scale(1.24);
}
.org-edge-create-node[data-target-hover="true"] > .mol-node-mark {
filter: brightness(1.25) saturate(1.3);
}
/* Edge line (in-progress drag) — pulsing accent stroke, soft glow. */
.org-edge-create-edges path[data-edge-drag] {
fill: none;
stroke: rgb(var(--edge-rgb, 255, 107, 87));
stroke-width: 2;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgb(var(--edge-rgb, 255, 107, 87)));
opacity: 0.9;
pointer-events: none;
}
/* Persisted edge — постоянная линия после commit'a, чуть тоньше. */
.org-edge-create-edges path[data-edge-persisted] {
fill: none;
stroke: rgb(var(--edge-rgb, 255, 107, 87));
stroke-width: 1.4;
stroke-linecap: round;
filter: drop-shadow(0 0 4px rgb(var(--edge-rgb, 255, 107, 87)));
opacity: 0.65;
pointer-events: none;
}
/* Hint в idle, гаснет в priming/armed. */
.org-edge-create-hint {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 6;
transform: translateX(-50%);
color: color-mix(in srgb, var(--text), transparent 50%);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
pointer-events: none;
transition: opacity 220ms ease;
}
body.dark .org-edge-create-hint {
color: color-mix(in srgb, rgba(245, 247, 255, 0.6), transparent 30%);
}
.org-edge-create-stage[data-state="armed"] .org-edge-create-hint,
.org-edge-create-stage[data-state="priming"] .org-edge-create-hint {
opacity: 0.3;
}