/* =========================================================================
   Earth hero (home page) — adapted from the "3D Earth scroll" concept:
   a textured globe that turns as you scroll, under oversized solid-white sector
   titles; hovering a title opens a description bar.
   ========================================================================= */

.eh { position: relative; margin-inline: 12px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }

.eh__top, .eh__foot { position: relative; z-index: 3; padding-inline: clamp(24px, 5vw, 72px); }
.eh__top { display: flex; justify-content: space-between; gap: 16px; padding-top: clamp(22px, 3vw, 36px); }
.eh__top h1 { font-weight: 400; }

/* ---------- Stage: globe + titles ---------- */
/* min-height (not height) + titles in the flow: the stage grows if the list ever needs more room
   (eight rows on a large screen, or long titles wrapping onto two lines on phones) */
.eh__stage {
  position: relative; min-height: min(60vw, 920px); padding-block: min(4vw, 72px);
  display: flex; align-items: center; justify-content: center;
}
.eh__earth { position: absolute; inset: 0; z-index: 0; }
.eh__earth canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.eh__earth.is-ready canvas { opacity: 1; }
.eh__placeholder {
  position: absolute; top: 50%; left: 50%; height: 87%; width: auto; max-width: none;
  translate: -50% -50%; transition: opacity 1.2s ease; pointer-events: none;
}
.eh__earth.is-ready .eh__placeholder { opacity: 0; }

.eh__titles { position: relative; width: 100%; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .28); }
.eh__row { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.eh__link { position: relative; display: block; padding-left: 8%; outline-offset: -3px; }
.eh__title, .eh__desc-title {
  font-family: var(--f-sans); font-weight: 600; text-transform: uppercase; letter-spacing: -.02em;
  font-size: min(7vw, 124px); line-height: min(6.6vw, 117px);
}
.eh__title { position: relative; display: inline-block; }
/* titles are solid white (the grey ghost copy stays in the markup but is never shown) */
.eh__fill { position: relative; z-index: 2; display: inline-block; color: #FFFFFF; }
.eh__ghost { display: none; }

/* hover / focus description bar */
.eh__desc {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 4%;
  padding-inline: 8% 6%; background: #FFFFFF; color: #141414;
  clip-path: inset(50% 0 50%); transition: clip-path .4s var(--ease-out);
}
.eh__desc-title { flex-shrink: 0; white-space: nowrap; color: var(--red); }
.eh__desc-text { flex-shrink: 0; width: 34%; font-size: clamp(13px, 1.05vw, 17px); font-weight: 600; line-height: 1.35; }
.eh__row--static .eh__link { cursor: default; }
/* a title too long to sit beside its description is set smaller in the bar only (earth.js measures) */
.eh__link:hover .eh__desc, .eh__link:focus-visible .eh__desc { clip-path: inset(0 0 0 0); }

/* ---------- Foot ---------- */
.eh__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 56px;
  padding-bottom: clamp(28px, 5vw, 64px);
}

/* ---------- Phones / touch ---------- */
@media (max-width: 760px) {
  .eh__stage { min-height: 118vw; padding-block: 8vw; }
  .eh__title, .eh__desc-title { font-size: 11.5vw; line-height: 10.8vw; }
  .eh__link { padding-left: 6%; }
}
@media (max-width: 760px), (hover: none) {
  .eh__desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eh__desc { transition: none; }
}