/* Sprout Scientific — front page */

:root {
  --bg-0: #f7fafc;
  --bg-1: #eaf3f8;
  --ink: #2c3540;
  --ink-soft: #57636f;
  --sprout: #189ad3;
  --sprout-deep: #0f6e99;
  --sprout-glow: rgba(24, 154, 211, 0.55);
  --sprout-glow-soft: rgba(24, 154, 211, 0.18);
  --node-size: clamp(48px, 6.4vmin, 84px);
  --label-size: clamp(11px, 1.35vmin, 14px);
  --welcome-size: clamp(20px, 3.4vmin, 40px);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.32, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #ffffff;
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  position: fixed;
  inset: 0;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* ---------- Wisp ---------- */

#wisp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: wispCanvasIn 2.4s var(--ease-soft) 0.2s forwards;
}

@keyframes wispCanvasIn { to { opacity: 1; } }

/* ---------- Welcome text ---------- */

.welcome {
  position: absolute;
  left: 50%;
  bottom: clamp(4%, 6vh, 8%);
  transform: translateX(-50%);
  width: min(86vw, 820px);
  text-align: center;
  font-weight: 200;
  font-size: var(--welcome-size);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  pointer-events: none;
}

.welcome .line {
  display: block;
}

.welcome .line-b {
  margin-top: 0.35em;
  color: var(--ink-soft);
}

.welcome .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  animation: wordIn 1.4s var(--ease-soft) forwards;
  margin-right: 0.32em;
}
.welcome .w:last-child { margin-right: 0; }

/* Stagger word reveal — line A */
.line-a .w:nth-child(1) { animation-delay: 0.85s; }
.line-a .w:nth-child(2) { animation-delay: 0.97s; }
.line-a .w:nth-child(3) { animation-delay: 1.07s; }
.line-a .w:nth-child(4) { animation-delay: 1.18s; }
.line-a .w:nth-child(5) { animation-delay: 1.30s; }

/* Line B */
.line-b .w:nth-child(1) { animation-delay: 1.55s; }
.line-b .w:nth-child(2) { animation-delay: 1.65s; }
.line-b .w:nth-child(3) { animation-delay: 1.74s; }
.line-b .w:nth-child(4) { animation-delay: 1.82s; }
.line-b .w:nth-child(5) { animation-delay: 1.90s; }
.line-b .w:nth-child(6) { animation-delay: 1.99s; }

@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------- Orbit / nodes ---------- */

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  list-style: none;
  pointer-events: none;
}

.node {
  position: absolute;
  left: 0;
  top: 0;
  /* polar offset from centre via --x/--y */
  transform: translate(-50%, -50%) translate(var(--x), var(--y));
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  opacity: 0;
  animation:
    nodeIn 1.6s var(--ease-soft) var(--in-delay) forwards,
    nodeFloat var(--float-dur, 10s) ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes nodeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Gentle drift — overlays on top of the static polar offset */
@keyframes nodeFloat {
  0%, 100% { translate: 0 0; }
  25%      { translate: 4px -6px; }
  50%      { translate: -3px 5px; }
  75%      { translate: 5px 3px; }
}

.node-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sprout);
  position: relative;
  isolation: isolate;
  transition:
    transform 0.6s var(--ease-out-back),
    color 0.4s ease;
}

/* Soft halo behind icon */
.node-btn::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--sprout-glow-soft) 0%,
    rgba(24, 154, 211, 0) 65%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  z-index: -1;
}

.node-btn:hover,
.node-btn:focus-visible {
  outline: none;
  transform: scale(1.18);
  color: #ffffff;
  animation: nodeMajestic 3.2s ease-in-out infinite;
}

.node-btn:hover::before,
.node-btn:focus-visible::before {
  opacity: 1;
  transform: scale(1.3);
}

@keyframes nodeMajestic {
  0%, 100% {
    transform: scale(1.18) rotate(0deg);
    filter: drop-shadow(0 0 14px var(--sprout-glow));
  }
  50% {
    transform: scale(1.22) rotate(2deg);
    filter: drop-shadow(0 0 22px var(--sprout-glow));
  }
}

.node-icon,
.node-icon img,
.node-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Sprout PNG icon — same filter chain in both states so the transition
   interpolates smoothly. brightness(0) + invert(1) recolours the blue PNG to
   pure white when hovered; the surrounding blue glow comes from the parent
   .node-btn's nodeMajestic drop-shadow filter. */
.node-icon img {
  object-fit: contain;
  filter: brightness(1) invert(0) drop-shadow(0 0 0 transparent);
  transition: filter 0.6s ease;
}
.node-btn:hover .node-icon img,
.node-btn:focus-visible .node-icon img {
  filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55));
}

/* Inline SVG icons — colour change handled by .node-btn's `color` transition
   (strokes use currentColor). Add a soft white glow so the white-on-white
   icon still has presence. */
.node-icon svg {
  overflow: visible;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0.6s ease;
}
.node-btn:hover .node-icon svg,
.node-btn:focus-visible .node-icon svg {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.7));
}

/* Per-icon hover flourish — keyed by class so adding nodes doesn't shift indices */

.node--grants .node-btn:hover svg,
.node--grants .node-btn:focus-visible svg { animation: spinSlow 6s linear infinite; transform-origin: 50% 50%; }

.node--capital .node-btn:hover svg path,
.node--capital .node-btn:focus-visible svg path { animation: dashDraw 2.4s ease-in-out infinite; }

.node--software .node-btn:hover svg,
.node--software .node-btn:focus-visible svg { animation: bobbleY 2.4s ease-in-out infinite; }

.node--tenders .node-btn:hover svg,
.node--tenders .node-btn:focus-visible svg { animation: tiltShake 2.6s ease-in-out infinite; }

.node--loans .node-btn:hover svg,
.node--loans .node-btn:focus-visible svg { animation: spinSlow 8s linear infinite reverse; transform-origin: 50% 50%; }

/* Discovery: radar sweep rotates around centre; outer rings gently pulse via filter */
.node--discovery .node-btn:hover .radar-sweep,
.node--discovery .node-btn:focus-visible .radar-sweep { animation: radarSpin 2.4s linear infinite; }
.node--discovery .node-btn:hover svg,
.node--discovery .node-btn:focus-visible svg { animation: pulseSoft 2.4s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes bobbleY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6%); }
}
@keyframes tiltShake {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes dashDraw {
  0%   { stroke-dasharray: 0 200; stroke-dashoffset: 0; }
  60%  { stroke-dasharray: 200 0; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 200 0; stroke-dashoffset: -200; }
}

/* Hover label — appears below the icon */

.node-label {
  margin-top: 12px;
  font-size: var(--label-size);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft);
  pointer-events: none;
  max-width: min(40vw, 320px);
  text-wrap: balance;
}

.node:hover .node-label,
.node:focus-within .node-label {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  #wisp,
  .wisp-core,
  .welcome .w,
  .node {
    opacity: 1 !important;
    transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) !important;
    filter: none !important;
  }
  .welcome .w {
    transform: none !important;
  }
}

/* ---------- Compact / mobile / portrait ---------- */

@media (max-aspect-ratio: 3/4) {
  /* Tighten the orbit on portrait so symbols don't crowd edges */
  .node { transform: translate(-50%, -50%) translate(calc(var(--x) * 0.78), calc(var(--y) * 0.86)); }
}

@media (max-width: 480px) {
  :root {
    --node-size: 52px;
    --welcome-size: 18px;
  }
  .node-label { font-size: 11px; white-space: normal; max-width: 28vw; }
  .welcome { bottom: 9%; }
}