/* Background3d — the real Nodwise animated sphere background, ported from
   nodwise/src/presentation/uis/graph/Components/_Shared/Background3d.razor.css
   for the standalone (Blazor-less) coming-soon. Dark "glow" mode only — the
   landing is dark, so nodes always render as light-emitting CSS balls. */

/* ── Brand palette (base scales the sphere colours reference) ─────────────────
   primary = blue, secondary = lime/green. Node colours in background-spheres.json
   are either literal hex or "var(--primary-N)" / "var(--secondary-N)" tokens, so
   these must resolve for the field's green-to-blue gradient to appear.
   Defined on `.bg3d` (the guaranteed ancestor of every node) rather than :root, so
   the tokens are always in scope for the engine-injected `.node` elements — an
   encapsulated component owns its own tokens. */
.bg3d {
  --primary-50:  #F4F9FE; --primary-100: #E4F1FF; --primary-200: #C2E1FF;
  --primary-300: #86C1FF; --primary-400: #3D9EFF; --primary-500: #1F87F3;
  --primary-600: #0770D9; --primary-700: #0052A3; --primary-800: #002E5C;
  --primary-900: #001F3D; --primary-950: #000810;

  --secondary-50:  #F6FF92; --secondary-100: #E5FF56; --secondary-200: #D4FF00;
  --secondary-300: #CAF000; --secondary-400: #B8DD00; --secondary-500: #A2C400;
  --secondary-600: #819C00; --secondary-700: #627700; --secondary-800: #4D5F00;
  --secondary-900: #415000; --secondary-950: #232C00;
}

/* ── Stage ──────────────────────────────────────────────────────────────────── */
.bg3d {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* Dark-glow palette nudge: the two palest lime shades wash out to white under the
     hot glow core, so lift them to the saturated lime (analogous to the app's own
     surface-scoped palette remap). Blues and saturated limes are untouched. */
  --secondary-50:  var(--secondary-200);
  --secondary-100: var(--secondary-300);
}
.bg3d-blur {
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.bg3d-scene {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  pointer-events: none;
  opacity: var(--bg3d-scene-opacity, 1);
}

/* Node layer for the 3D transforms. World-origin (0,0,0) is anchored at screen
   CENTER so the orbital rotation stays balanced around the viewport centre. */
#node-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
#background-layer { display: none; }

/* Sphere nodes (glass SVG hidden in glow mode below) */
.node {
  position: absolute;
  width: 192px;
  height: 192px;
  transform-origin: 0 0;
  pointer-events: none;
}
.node svg {
  width: 100%;
  height: 100%;
  color: inherit;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

/* Edges — thin 2px CSS-gradient tube between the two connected nodes (the engine's
   3 faces reused as a tube so the line never goes edge-on and vanishes). */
.edge {
  position: absolute;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  height: 2px !important;
  pointer-events: none;
}
.edge-face {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  background: linear-gradient(90deg,
    var(--edge-source-color, #7dd3fc),
    var(--edge-target-color, #7dd3fc));
}
.edge-face:nth-child(2) { transform: rotateX(120deg); }
.edge-face:nth-child(3) { transform: rotateX(240deg); }
.edge-face svg { display: none; }

/* ── Dark "light-emitting" glow ───────────────────────────────────────────────
   The per-node colour can't ride a <use>d gradient, so the glass ball is hidden
   and the glow is a CSS radial-gradient on ::after (384x384, centre coincident
   with the node's connection point). currentColor = the node colour the engine
   sets inline; no box-shadow (that was the perf killer). */
.node svg { display: none; }
.node::after {
  content: '';
  position: absolute;
  top: -96px;
  left: -96px;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    #f7fb96 0%,
    currentColor 25%,
    color-mix(in srgb, currentColor 90%, transparent 10%) 30%,
    color-mix(in srgb, currentColor 10%, transparent 90%) 50%,
    color-mix(in srgb, currentColor  1%, transparent 99%) 51%, transparent 90%);
}
/* Edges glow in their source colour (single colour — box-shadow can't be a gradient). */
.edge { box-shadow: 0 0 8px var(--edge-source-color, #7dd3fc); }

/* ── Entrance overlay ──────────────────────────────────────────────────────────
   Opaque black on first paint to hide the graph's pop-in; fades out once the
   scene is rendered and the entrance speed envelope is armed. */
.bg3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000810;
  opacity: 1;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.bg3d-overlay--hidden { opacity: 0; }