/* 032 Ventures — Globe-Version (ergänzt styles-index.css) */

/* Header bleibt während der Bühne stehen und fährt per JS mit dem Hero-Text raus */
.site-header { position: fixed; will-change: transform; }

.globe-stage { position: relative; height: 320vh; }
.globe-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: pan-y; }

/* Hero-Text: unten links, weiß, wortweises Einblenden */
.globe-hero-text {
  position: absolute; left: var(--pad); right: var(--pad);
  bottom: clamp(64px, 12vh, 130px); z-index: 2; will-change: transform, opacity;
  max-width: 56ch;
}
.globe-hero-text .g-words {
  display: flex; flex-wrap: wrap; margin: 0; color: #fff;
  font-size: clamp(21px, 2.7vw, 36px); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em;
  max-width: 30ch;
}
.globe-hero-text .g-words.sub {
  font-size: clamp(14px, 1.45vw, 18px); font-weight: 400; line-height: 1.6;
  letter-spacing: 0; max-width: 54ch; margin-top: clamp(18px, 2.6vh, 32px);
}
.g-words.static { display: block; } /* ohne Leseanimation: normaler Textfluss, sofort sichtbar */
.g-word { position: relative; display: inline-block; margin-right: 0.26em; }
.g-word .g-base { position: absolute; left: 0; top: 0; opacity: 0.2; color: #fff; }
.g-word .g-top { position: relative; opacity: 0; color: #fff; }

/* Kartentext: erscheint am Ende, zentriert unten */
.globe-map-text {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(40px, 8vh, 96px);
  width: min(64ch, 86vw); text-align: center; color: #fff; z-index: 2; opacity: 0;
  font-size: clamp(16px, 1.9vw, 21px); line-height: 1.5; will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .g-word .g-top { opacity: 1 !important; }
}

@media (max-width: 820px) {
  .globe-stage { height: 260vh; }
  .globe-hero-text .g-words, .globe-hero-text .g-words.sub { max-width: none; }
}