.hero-3d-stage {
  --hero-3d-bg: #0e0e0e;
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 1 / 0.95;
  margin: 0 auto;
  /* pulls the following heading up so it overlaps the lower part of the
     character, per the "name in front of the character" hero layout */
  margin-bottom: -60px;
}

.hero-3d-stage canvas {
  position: absolute;
}

/* Character sits centered and smaller than the stage, leaving a ring of
   empty space around it for the icons to orbit through without ever
   being clipped by the character's silhouette. Adjust this percentage if
   your cropped frames have different padding. */
.hero-3d-character {
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: pointer;
}

/* Icon-orbit canvas fills the whole stage and renders ABOVE the character,
   so icons are always visible circling around it, never hidden behind it. */
.hero-3d-orbit {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Hero name: single line, layered above everything, sitting over the
   lower/chest area of the character per the overlap layout. */
.hero h1 {
  position: relative;
  z-index: 3;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero h1 {
    white-space: normal; /* allow wrap on narrow phones so text doesn't overflow */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d-stage * {
    animation: none !important;
    transition: none !important;
  }
}