:root {
  --bg-0: #08101c;
  --bg-1: #0a1424;
  --bg-2: #0f1a2e;
  --blue: #58b8e9;
  --blue-bright: #9bd6f5;
  --gold: #f9a826;
  --gold-soft: #ffc24d;
  --gold-bright: #ffd98a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-0);
  overflow: hidden;
  cursor: default;
}

body {
  /* radial cosmos: lighter toward the centre where the hub sits */
  background:
    radial-gradient(120% 120% at 50% 44%, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
}

/* ── Starfield canvas ─────────────────────────── */
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ── Scattered-sunlight beam ──────────────────── */
.beam {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
.ray {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 38vmax;
  height: 200vmax;
  transform-origin: top center;
  transform: translateX(-50%) rotate(24deg);
  background: linear-gradient(
    to bottom,
    rgba(247, 193, 80, 0) 0%,
    rgba(247, 193, 80, 0.06) 30%,
    rgba(155, 210, 243, 0.05) 60%,
    rgba(247, 193, 80, 0) 100%);
  filter: blur(40px);
  opacity: 0;
  animation: beam-breathe 14s ease-in-out infinite;
}
.ray-1 { transform: translateX(-58%) rotate(24deg); width: 30vmax; animation-delay: 0s; }
.ray-2 { transform: translateX(-50%) rotate(24deg); width: 46vmax; animation-delay: -5s; }
.ray-3 { transform: translateX(-42%) rotate(24deg); width: 22vmax; animation-delay: -9s; }

@keyframes beam-breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.6; }
}

/* ── The pale blue dot ────────────────────────── */
.pale-dot {
  position: fixed;
  top: 30%;
  left: 61%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  z-index: 2;
  background: #bfe4ff;
  box-shadow:
    0 0 6px 2px rgba(155, 210, 243, 0.9),
    0 0 18px 6px rgba(102, 179, 230, 0.45);
  animation: dot-twinkle 6s ease-in-out infinite;
}
@keyframes dot-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* ── Orbital hub ──────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  will-change: transform;
}
.mark {
  width: min(64vmin, 540px);
  height: auto;
  overflow: visible;
}

/* Petals: the blue body of the mark, breathing very gently */
.petals {
  opacity: 0.95;
  animation: petal-shimmer 9s ease-in-out infinite;
}
@keyframes petal-shimmer {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}

/* Center diamond — quiet, structural */
.core {
  opacity: 0.55;
  animation: core-breathe 7s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}

/* North ring: decorative anchor */
.ring-static {
  opacity: 0.78;
  animation: ring-breathe 7s ease-in-out infinite;
}
@keyframes ring-breathe {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 0.9; }
}

/* ── Interactive project portals ──────────────── */
.node { cursor: pointer; }
.node .hit { fill: transparent; stroke: none; }

/* The live orange rings: each glows with a slow, staggered pulse */
.node .ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.35s ease, transform 0.45s cubic-bezier(.2,.85,.25,1), opacity 0.35s ease;
  animation: ring-pulse 4.6s ease-in-out infinite;
}
.node:nth-of-type(2) .ring { animation-delay: -1.5s; }
.node:nth-of-type(3) .ring { animation-delay: -3s; }
@keyframes ring-pulse {
  0%, 100% { opacity: 0.8;  transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

/* Hover / focus: the portal brightens, swells, and names itself */
.node:hover .ring,
.node:focus-visible .ring {
  fill: var(--gold-bright);
  transform: scale(1.14);
  animation: none;
}

/* ── Hover labels (resting state stays text-free) ── */
.label {
  fill: var(--blue-bright);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 1px;
  text-anchor: middle;
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.2,.85,.25,1);
  pointer-events: none;
}
.node:hover .label,
.node:focus-visible .label {
  opacity: 1;
  transform: translateY(0);
}

.node:focus { outline: none; }

/* ── Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ray, .pale-dot, .petals, .core, .ring-static, .node .ring {
    animation: none !important;
  }
  .ray { opacity: 0.4; }
  .node .ring { opacity: 1; }
}