src/app/globals.css

@import "tailwindcss";

:root {
  --bg-deep: #03060d;
  --bg-mid: #080f18;
  --panel: #0e1826;
  --panel-border: rgba(148, 180, 214, 0.14);
  --foreground: #e9eef5;
  --muted: #8fa3bd;
  --accent-teal: #2dd4bf;
  --accent-blue: #3b82f6;
  --accent-glow: rgba(45, 130, 200, 0.35);
  --gold: #f0b429;
  --gold-bright: #ffd873;
  --topnav-h: 48px;
}

@theme inline {
  --color-background: var(--bg-deep);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  color: var(--foreground);
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(45, 212, 191, 0.11), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(59, 130, 246, 0.14), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
  min-height: 100dvh;
}

.glass-panel {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(14px);
}

.glass-pill {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.accent-send {
  background: radial-gradient(circle at 30% 30%, #5eb8ff, var(--accent-blue));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 18px rgba(59, 130, 246, 0.55);
}

.text-gradient {
  background: linear-gradient(90deg, #ffffff 0%, #cdeaff 45%, var(--accent-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection {
  background: var(--accent-blue);
  color: white;
}

/* scrollbars for panels */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border) transparent;
}

/* Node landing: scale/fade in, then a small gold sunburst flash to mark arrival */
@keyframes node-land {
  0% { opacity: 0; transform: scale(0.82); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes node-sunburst {
  0% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
  35% { box-shadow: 0 0 22px 6px rgba(240, 180, 41, 0.55), 0 0 0 1px rgba(240, 180, 41, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}

.node-landing {
  animation: node-land 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1) both,
    node-sunburst 0.9s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .node-landing { animation: none; }
}

.deep-dive-btn {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #241a03;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 10px rgba(240, 180, 41, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.deep-dive-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 16px rgba(240, 180, 41, 0.65);
}

/* Grouped-by-layer reflow: a slow, deliberate glide into clusters rather
   than the burst-in landing animation used on initial load / layout switch. */
.grouping-transition .react-flow__node {
  transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .grouping-transition .react-flow__node { transition: none; }
}