/* ==========================================================================
   globe.css
   Interactive client globe. Loaded only by gtm.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11b. Interactive client globe
   -------------------------------------------------------------------------- */
.globe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
}

/* No card treatment — the globe sits directly on the section so it reads as
   part of the page rather than a pasted-in white panel. */
.globe__stage {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  background: transparent;
  padding: 0;
}

.globe__canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  /* The globe owns every gesture that starts on it, so a vertical drag rotates
     rather than scrolling the page away. The stage is inset from the viewport
     on small screens (see the 620px block) to leave a scrollable gutter. */
  touch-action: none;
}
.globe__canvas.is-grabbing { cursor: grabbing; }

.globe__controls {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.globe__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.globe__btn:hover { background: rgba(12, 21, 32, 0.06); color: var(--crimson); }
.globe__btn:active { transform: scale(0.92); }
.globe__btn--home svg { transition: transform 0.5s var(--ease); }
.globe__btn--home:hover svg { transform: rotate(180deg); }

/* Once the split stacks, the globe gets the full column width and sits above
   the copy, so it is big enough to actually grab and spin. Constraining it to a
   narrow strip beside the text left it too small to use on a phone.

   The canvas takes every touch gesture (touch-action: none in .globe__canvas)
   so a vertical drag rotates instead of scrolling the page away. The globe is
   square, so on a phone it covers well under half the screen — there is always
   page above and below it to scroll from. */
@media (max-width: 900px) {
  .globe {
    /* Nudge the whole block above the copy even if the markup order changes. */
    order: -1;
  }
  .globe__stage {
    max-width: 100%;
  }
}