/* nxus_logo.css
 * Shared NXUS brand mark + wordmark.
 * Usage:
 *   <div class="nxus-logo">
 *     <div class="nxus-logo-mark"><svg>…</svg></div>
 *     <div class="nxus-logo-text">NX<span class="u">U</span>S</div>
 *   </div>
 *
 * Variants: .nxus-logo.sm (24px mark), .nxus-logo.lg (48px mark)
 *
 * Per-page tokens:
 *   --logo-blue (default #4d9fff)
 *   --logo-bg   (default #07090f — match page background for inner cutouts)
 *   --logo-text-color (default #ffffff)
 */

.nxus-logo {
  --logo-blue: #4d9fff;
  --logo-bg: #07090f;
  --logo-text-color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.nxus-logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.nxus-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nxus-logo-text {
  font-family: var(--sans, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--logo-text-color);
  line-height: 1;
}
.nxus-logo-text .u {
  color: var(--logo-blue);
}

/* Outer-node pulsing — staggered for a subtle 'alive' feel */
@keyframes nxusNodePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.nxus-logo-mark .node-1 { animation: nxusNodePulse 2.4s ease-in-out infinite 0s; }
.nxus-logo-mark .node-2 { animation: nxusNodePulse 2.4s ease-in-out infinite 0.8s; }
.nxus-logo-mark .node-3 { animation: nxusNodePulse 2.4s ease-in-out infinite 1.6s; }

/* Size variants */
.nxus-logo.sm .nxus-logo-mark { width: 24px; height: 24px; }
.nxus-logo.sm .nxus-logo-text { font-size: 14px; }
.nxus-logo.sm { gap: 9px; }

.nxus-logo.lg .nxus-logo-mark { width: 48px; height: 48px; }
.nxus-logo.lg .nxus-logo-text { font-size: 26px; }
.nxus-logo.lg { gap: 16px; }

/* Light theme — adjust the inner-circle cutouts */
html[data-theme="light"] .nxus-logo {
  --logo-text-color: #111827;
  --logo-bg: #ffffff;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .nxus-logo-mark .node-1,
  .nxus-logo-mark .node-2,
  .nxus-logo-mark .node-3 {
    animation: none;
  }
}