/* constellation.css
   Gretta's memory constellation. A night-sky node graph of a curated slice
   of what she thinks about: work, ideas, lessons, and self. ~16 nodes,
   never a data dump.

   This file styles the INSIDE of #constellation only. The mount itself
   (size, position, border, background gradient, overflow) is already
   owned by assets/style.css ("constellation mount" rule), this file does
   not redeclare any of that, so there is one source of truth for the box.

   Colors + font are pulled from the site's existing design tokens
   (--teal, --ember, --bone, --bone-dim, --ink2, --line, --mono, all
   defined in style.css) instead of re-declared here, so a palette change
   in one place stays in sync everywhere. The one exception is
   --teal-bright: style.css has no brighter-teal token, and the "self"
   node type needs one, so it is defined locally, scoped to #constellation.

   Selectors are scoped to the literal #constellation id to match how the
   rest of this site scopes the mount (see style.css). If this is ever
   mounted to a different id via initConstellation('other-id'), duplicate
   these rules for that id, or generalize both files together.
*/

#constellation{
  --teal-bright:#8fe6ec;
  --node-color:var(--teal);
}

#constellation .gmc-stage{position:absolute; inset:0}
#constellation .gmc-svg{display:block; width:100%; height:100%; overflow:visible}
#constellation .gmc-bg{fill:transparent}

/* decorative night-sky texture only: static, non-interactive, never one
   of the 16 real nodes. Kept still on purpose (nothing to gate behind
   prefers-reduced-motion because nothing here ever moves). */
#constellation .gmc-star{fill:var(--bone-dim); pointer-events:none}

/* ---- edges: faint teal lines between related nodes ---- */
#constellation .gmc-edge{
  stroke:var(--teal); stroke-width:1.1; stroke-linecap:round; fill:none;
  opacity:.2; transition:opacity .25s ease, stroke-width .25s ease;
}
#constellation.has-active .gmc-edge{opacity:.05}
#constellation .gmc-edge.is-lit{opacity:.85; stroke-width:1.6}

/* ---- nodes ---- */
#constellation .gmc-node{
  cursor:pointer; opacity:1; outline:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .25s ease;
}
#constellation.has-active .gmc-node.is-dimmed{opacity:.22}

/* generous invisible hit area so small stars stay easy to hover/tap */
#constellation .gmc-node__hit{fill:transparent}

#constellation .gmc-node__halo{
  fill:var(--node-color); filter:blur(5px); opacity:.32;
  transition:opacity .25s ease; transform-box:fill-box; transform-origin:center;
}
#constellation .gmc-node__core{
  fill:var(--node-color); filter:drop-shadow(0 0 4px var(--node-color));
  transition:filter .25s ease, transform .25s ease;
  transform-box:fill-box; transform-origin:center;
}
#constellation .gmc-node.is-active .gmc-node__core{
  filter:drop-shadow(0 0 8px var(--node-color)) drop-shadow(0 0 18px var(--node-color));
  transform:scale(1.22);
}
#constellation .gmc-node.is-lit .gmc-node__core{
  filter:drop-shadow(0 0 6px var(--node-color));
  transform:scale(1.08);
}
#constellation .gmc-node.is-active .gmc-node__halo,
#constellation .gmc-node.is-lit .gmc-node__halo{opacity:.55}
#constellation .gmc-node:focus-visible .gmc-node__core{
  filter:drop-shadow(0 0 8px var(--node-color)) drop-shadow(0 0 18px var(--node-color));
}

/* type -> color. The only place these are set. */
#constellation .gmc-node.type-work{--node-color:var(--teal)}
#constellation .gmc-node.type-idea{--node-color:var(--ember)}
#constellation .gmc-node.type-lesson{--node-color:var(--bone)}
#constellation .gmc-node.type-self{--node-color:var(--teal-bright)}

/* ---- labels: small, JetBrains Mono ---- */
#constellation .gmc-node__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.01em;
  fill:var(--bone-dim); opacity:0; pointer-events:none; user-select:none;
  transition:opacity .25s ease, fill .25s ease;
}
#constellation .gmc-node.is-active .gmc-node__label,
#constellation .gmc-node.is-lit .gmc-node__label{opacity:1; fill:var(--bone)}
#constellation.has-active .gmc-node.is-dimmed .gmc-node__label{opacity:0}

/* mobile: fewer labels at rest (only the best-connected "hub" nodes),
   full label back on focus/tap. Breakpoint matches style.css's own. */
@media (max-width:520px){
  #constellation .gmc-node__label{opacity:0}
  #constellation .gmc-node.is-hub .gmc-node__label{opacity:.55}
  #constellation .gmc-node.is-active .gmc-node__label{opacity:1}
}

/* ---- tooltip / caption: same raised-panel recipe as .nowcard / .caught ---- */
#constellation .gmc-tooltip{
  position:absolute; left:0; top:0; max-width:230px;
  padding:8px 11px; border-radius:6px;
  background:var(--ink2); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:5;
}
#constellation .gmc-tooltip.is-visible{opacity:1}
#constellation .gmc-tooltip__label{
  font-family:var(--mono); font-size:12px; color:var(--bone); margin-bottom:3px;
}
#constellation .gmc-tooltip__blurb{
  font-family:var(--mono); font-size:11px; line-height:1.45; color:var(--bone-dim);
}

@media (prefers-reduced-motion:reduce){
  #constellation .gmc-edge,
  #constellation .gmc-node,
  #constellation .gmc-node__core,
  #constellation .gmc-node__halo,
  #constellation .gmc-node__label,
  #constellation .gmc-tooltip{transition:none !important}
}