/* ============================================================
   "The Universe" — a scattered constellation of feature nodes
   orbiting a glowing sun, at every screen size. The orbit radii and
   node pill sizing scale down for narrow viewports in universe.js/
   the mobile override below, rather than falling back to a plain
   list — see the (removed) 780px gate note in universe.js for why.
   ============================================================ */
.universe {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  text-align: center;
}
.universe h2 { max-width: 34em; margin-left: auto; margin-right: auto; }

/* Louder than a normal section eyebrow (which is a small label-sized
   line) but clearly a step below the hero H1 — this is the section's
   own headline moment, not just a tag above the real heading. */
.eyebrow--universe {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e8ecf4;
  background: linear-gradient(135deg, #b9c2ff, #6c5ce7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5em;
}

#universe-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.universe > *:not(#universe-canvas) { position: relative; z-index: 1; }
/* Defensive: guarantee nodes always paint above the caption box even
   if an orbit ever drifts near it, regardless of DOM order. !important
   is deliberate here — :not(#universe-canvas) above carries an ID's
   worth of specificity, so a plain class rule can't win against it. */
.universe__nodes { z-index: 2 !important; }

/* Positions are absolute at every width — driven continuously by
   universe.js (orbiting the sun), not fixed CSS coordinates. The
   container's height scales down for narrow viewports since the
   orbit radii shrink to fit (see universe.js's measure()). */
.universe__nodes {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  position: relative;
  height: clamp(320px, 88vw, 420px);
}
.universe__node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* Pill size is deliberately small here — kept in sync with
   MOBILE_PILL_HALF in universe.js, which uses this exact size to
   guarantee no two orbiting pills can ever overlap (see that file's
   header comment). Making these bigger without also updating
   universe.js's collision math would reopen that gap. */
.universe__node a,
.universe__node button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  max-width: 80px;
  background: #10162663;
  border: 1px solid #1a2033;
  border-radius: 999px;
  padding: 0.45em 0.6em;
  color: #e8ecf4;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
}
.universe__node a:hover,
.universe__node a:focus-visible,
.universe__node button:hover,
.universe__node button:focus-visible {
  border-color: #6c5ce780;
}

.universe__node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle, #ffe9a8, #ffc247);
  box-shadow: 0 0 8px 2px rgba(255, 194, 71, 0.55);
}
.universe__node--progress .universe__node-dot {
  background: radial-gradient(circle, #b9c2ff, #6c5ce7);
  box-shadow: 0 0 6px 1px rgba(108, 92, 231, 0.5);
}
.universe__node--locked .universe__node-dot {
  background: #2a3247;
  box-shadow: none;
}
.universe__node--locked a,
.universe__node--locked button {
  opacity: 0.65;
}
.universe__node-lock {
  font-size: 0.7em;
  margin-left: auto;
  color: #6b7386;
}

/* One fixed-position, fixed-size frosted caption box below the node
   area — every node's description populates the same space, rather
   than a tooltip that floats near whichever node you're on (which
   read as "way too far away" once nodes started orbiting). Same
   frosted-glass treatment as .hero__lead for a consistent theme. */
.universe__caption {
  margin: 2rem auto 0;
  max-width: 640px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(10, 14, 23, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(108, 92, 231, 0.35);
  border-radius: 20px;
  padding: 1.25rem 1.75rem;
}
.universe__caption p {
  margin: 0;
  color: #eef1f8;
  font-size: 0.95rem;
  line-height: 1.5;
}
.universe__caption-status {
  color: #ffc247;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.4em;
}

/* More room at this width — bigger pills than mobile, but still capped
   (kept in sync with DESKTOP_PILL_HALF in universe.js's collision math —
   see the comment on the base rule above). The two longest labels wrap
   to a second line rather than the cap being lifted entirely. */
@media (min-width: 780px) {
  .universe { min-height: 480px; }
  .universe__node a,
  .universe__node button {
    max-width: 176px;
    white-space: normal;
    font-size: 0.88rem;
    padding: 0.6em 1.1em;
  }
}

/* ---- Mobile tap-to-select interaction ----
   On coarse-pointer devices (touch screens) the visitor taps once to
   select a node and again to enter it. Selected state: orbit pauses
   (handled in universe.js), pill scales up with a cyan glow, caption
   shows a "Tap again to enter" prompt for navigable nodes.

   Transition on the pill itself (not the <li>, which already carries
   translate(-50%,-50%)) so the scale origin is the pill's own centre.
   z-index on the <li> ensures the expanded pill paints above siblings. */
@media (pointer: coarse) {
  .universe__node > a,
  .universe__node > button {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease,
                opacity 0.22s ease;
  }
  .universe__node.is-touch-selected {
    z-index: 10;
  }
  .universe__node.is-touch-selected > a,
  .universe__node.is-touch-selected > button {
    transform: scale(2.1);
    border-color: #00d4ff;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.25), 0 0 20px rgba(0, 212, 255, 0.45);
    opacity: 1; /* override the locked-node 0.65 opacity when selected */
  }
  .universe__tap-again {
    display: inline-block;
    margin-top: 0.6em;
    color: #00d4ff;
    font-weight: 700;
    font-size: 0.88em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  #universe-canvas { display: none; }
}