/* The graph canvas: SVG layers, 2.5D depth, nodes, edges, hero overlay. */
.center { min-width: 0; position: relative; overflow: hidden; }
.graph-wrap { position: relative; height: 100vh; min-height: 0; }

#graph { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
#graph.is-dragging { cursor: grabbing; }
#graph:focus-visible { outline: 2px solid var(--violet); outline-offset: -3px; }

.grid-label {
  position: absolute;
  top: 20px; left: 24px;
  z-index: 2;
  font: 12px var(--font-mono);
  letter-spacing: .12em;
  color: #6b768d;
  pointer-events: none;
}

.graph-tools {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: grid;
  grid-template-columns: 34px 52px 34px 38px;
  overflow: hidden;
  border: 1px solid #bdc9df;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 28px rgba(61, 74, 95, .12);
  backdrop-filter: blur(10px);
}
.graph-tools button, .graph-tools output {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  padding: 0;
  color: #3d4a5f;
  border: 0;
  border-right: 1px solid #d4dcea;
  background: transparent;
  font: 600 14px var(--font-mono);
}
.graph-tools button { cursor: pointer; }
.graph-tools button:last-child { border-right: 0; }
.graph-tools button:hover, .graph-tools button:focus-visible { color: #5b4fc0; background: rgba(143, 130, 238, .1); outline: 0; }
.graph-tools output { color: #6b768d; font-size: 10px; }
.graph-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.graph-gesture-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 14px;
  padding: 7px 11px;
  color: #6b768d;
  border: 1px solid rgba(189, 201, 223, .8);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 24px rgba(61, 74, 95, .08);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  transition: opacity .3s, transform .3s;
  font: 9px var(--font-mono);
  letter-spacing: .08em;
  pointer-events: none;
}
.graph-gesture-hint span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.graph-wrap.has-interacted .graph-gesture-hint { opacity: 0; transform: translate(-50%, 5px); }
.mouse-icon, .wheel-icon { position: relative; display: inline-block; width: 10px; height: 14px; border: 1px solid currentColor; border-radius: 6px; }
.mouse-icon::after { content: ""; position: absolute; top: 3px; left: 4px; width: 1px; height: 4px; background: currentColor; }
.wheel-icon::after { content: "↕"; position: absolute; top: -2px; left: 11px; font-size: 10px; }

/* --- Parallax layers ---
   Each depth layer is translated by the interaction/camera loop; the transition
   below only smooths idle settling, the loop drives frame-to-frame motion. */
#layer-grid, #layer-groups, #layer-edges, #layer-nodes {
  will-change: transform;
}

/* Background depth grid — moves slowest, sits furthest back. */
.depth-grid line { stroke: rgba(109, 127, 164, .12); stroke-width: 1; }

/* --- Groups (cluster halos) --- */
.group-label { font: 600 13px var(--font-mono); letter-spacing: .11em; fill: #4a5568; }
.group-halo { fill: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 5 8; }

/* --- Edges --- */
.edge { stroke: #bdc9df; stroke-width: 1; opacity: .38; transition: opacity .3s, stroke-width .3s; }
.edge.cross { stroke: #9c91e9; opacity: .52; stroke-dasharray: 4 7; }
.edge.active { opacity: .9; stroke-width: 1.7; }
.edge.dim { opacity: .1; }
.edge-label {
  display: none;
  font: 10px var(--font-mono);
  fill: #6b768d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.edge-label.show { opacity: .85; }

/* --- Nodes --- */
.node { cursor: pointer; outline: none; transition: opacity .25s; }
.node .node-hitbox { fill: transparent; pointer-events: all; }
.node .halo { opacity: .17; transition: opacity .2s, r .2s; }
.node .dot { stroke-width: 1.4; transition: r .2s, filter .2s; }
.node .label { font: 12px var(--font-mono); fill: #4a5568; pointer-events: none; }
.node:hover .halo, .node.selected .halo { opacity: .55; }
.node:hover .dot, .node.selected .dot { filter: drop-shadow(0 0 5px rgba(143, 130, 238, .5)); }
.node.selected .dot { r: 9; }
.node.dim { opacity: .18; }
.node:focus-visible .dot { stroke: var(--ink); stroke-width: 2.4; }

/* group colors */
.group-app .dot      { fill: #fff; stroke: var(--violet); }
.group-app .halo     { fill: var(--violet); }
.group-domain .dot   { fill: #fff; stroke: var(--cyan); }
.group-domain .halo  { fill: var(--cyan); }
.group-skill .dot    { fill: #fff; stroke: var(--blue); }
.group-skill .halo   { fill: var(--blue); }
.group-interest .dot { fill: #fff; stroke: var(--green); }
.group-interest .halo{ fill: var(--green); }

@media (max-width: 760px) {
  .graph-wrap { height: 100%; }
  .graph-tools { top: 12px; right: 12px; grid-template-columns: 32px 46px 32px 36px; }
  .graph-gesture-hint { bottom: 12px; gap: 9px; font-size: 8px; }
  .graph-gesture-hint span:nth-child(2) { display: none; }
}

/* Reduced motion: parallax/idle drift are disabled in JS; nothing else animates. */