/* HERO — title text, tether rope, astronaut */
/* ---------- HERO ---------- */
#hero {
  position: relative;
  text-align: center;
  min-height: 85vh;   /* room for the astronaut to float */
}

#tetherLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#tetherSvg {
  overflow: visible;   /* the rope starts up inside the ship, above the hero's top edge */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

#tetherPath {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

#character {
  position: absolute;
  width: 130px;              /* height follows the drawing proportions (~129px) */
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  z-index: 5;
}

#character:active { cursor: grabbing; }

.astro-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;     /* the #character box takes the drag, not the image */
  user-select: none;
  -webkit-user-drag: none;
}

#heroText {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

#heroName {
  font-size: clamp(32px, 6vw, 56px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-stroke: 10px #000;
  paint-order: stroke fill;

}

#heroRole {
  color: #fff;
  font-weight: 500;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  font-size: clamp(16px, 2.2vw, 22px);
}

/* star-dot eyes that watch the astronaut (js/eyes.js) */
#heroEyes {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
}