/* Globe component — pair with assets/globe/globe.js.
   Any element with a `data-globe` attribute auto-mounts a globe canvas.

   This file currently holds both the component's own styles AND the
   hero-specific layout rules. Kept together on purpose so everything
   globe-related lives in one place; can be split later. */


/* --- Component defaults --- */

[data-globe] {
  pointer-events: none;
}

[data-globe] canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* --- Hero integration --- */

.section--hero {
  overflow: hidden;
  isolation: isolate;
}

.hero__globe {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__globe canvas {
  width: max(100vw, 100vh);
  height: max(100vw, 100vh);
  position: relative;
  top: 15%;
  left: 30%;
}

.section--hero > *:not(.hero__globe) {
  position: relative;
  z-index: 1;
}