/* Relationship signals and the suspended avatar progressively enhance the existing layout. */
.ambient-system { --signal-color: #8ca9cc; }
.ambient-system[data-active-lane="0"] { --signal-color: #7d9fca; }
.ambient-system[data-active-lane="1"] { --signal-color: #80ab96; }
.ambient-system[data-active-lane="2"] { --signal-color: #bda46d; }
.ambient-system .system-connector { visibility: hidden; }
.ambient-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ambient-wires .ambient-wire, .ambient-wires .ambient-wire-signal { fill: none; stroke-width: 1.2; stroke-linecap: round; }
.ambient-wire { stroke: var(--line); transition: stroke .25s, opacity .25s; }
.ambient-wire.ambient-active { stroke: var(--signal-color); opacity: .7; }
.ambient-wire-signal { stroke: var(--signal-color); stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; }
.ambient-wire-signal.ambient-active { opacity: 1; animation: ambient-signal 1.35s ease-out 2; }
.ambient-system .system-core, .ambient-system .system-small-node { transition: transform .28s ease, border-color .28s, box-shadow .28s; }
.ambient-system[data-active-lane="0"] .system-core,
.ambient-system[data-active-lane="1"] .system-core,
.ambient-system[data-active-lane="2"] .system-core { border-color: var(--signal-color); transform: translateY(-3px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal-color) 8%, transparent), 0 9px 20px -13px var(--signal-color); }
.ambient-system[data-active-lane="0"] .system-small-node,
.ambient-system[data-active-lane="1"] .system-small-node,
.ambient-system[data-active-lane="2"] .system-small-node { transform: translateY(-2px); border-color: var(--signal-color); }
.ambient-system .output-node.ambient-selected { border-color: var(--signal-color); transform: translateY(-3px); box-shadow: 0 8px 18px -12px var(--signal-color); }
.ambient-system .system-footnote > span:last-child { text-align: right; line-height: 1.6; }
.avatar-motion { transform-origin: 50% 0; border-radius: 8px; box-shadow: 0 6px 13px -7px rgba(30,50,80,.3); touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
@media (min-width: 791px) and (prefers-reduced-motion: no-preference) { .avatar-motion { cursor: grab; } .avatar-motion.avatar-dragging { cursor: grabbing; z-index: 3; } }
@keyframes ambient-signal { from { stroke-dashoffset: 100; opacity: 0; } 16% { opacity: 1; } 85% { opacity: 1; } to { stroke-dashoffset: -7; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ambient-wire-signal { display: none; } .ambient-system .system-core, .ambient-system .system-small-node, .ambient-system .output-node.ambient-selected { transform: none; transition: none; } .avatar-motion { cursor: default; } }