/* ============================================================
   Hero Globe — scoped component styles
   Every rule is namespaced under .hero-globe so nothing here
   can collide with existing theme styles, and vice versa.
   ============================================================ */

/* ---- Section shell ---- */
.hero-globe {
  position: relative;
  width: 100%;
  min-height: 560px;
  height: 74vh;
  overflow: hidden;
  background:
    radial-gradient(82% 118% at 77% 47%, #2c6c61a0 0%, transparent 60%),
    radial-gradient(120% 130% at 84% 50%, #347667 0%, #2c6356 42%, #265649 72%, #214d42 100%);
}

/* ---- Globe (anchored right, left stays open for content) ---- */
.hero-globe__globe-wrap {
  position: absolute;
  top: 50%;
  right: -1%;
  transform: translateY(-50%);
  height: 96%;
  aspect-ratio: 1 / 1;
  z-index: 2;
}

.hero-globe__globe-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Soft atmospheric halo — gradient + gaussian blur so edges are never sharp. */
.hero-globe__globe-wrap::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    transparent 48%,
    rgba(74, 175, 148, 0.22) 65%,
    rgba(74, 175, 148, 0.08) 80%,
    transparent 100%
  );
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}

/* SVG group targeted by JS — ID is unique per page (one hero per page) */
.hero-globe #globe {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

/* ---- Heat-particle canvas (sits between globe and text) ---- */
.hero-globe #heat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

/* ---- Left content zone ---- */
.hero-globe__content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: min(50%, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 0 32px 0 clamp(28px, 6vw, 104px);
  z-index: 6;
  /* text dissolves toward the centre, where heat particles pass through */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,0.5) 96%, rgba(0,0,0,0.28) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0,0,0,0.5) 96%, rgba(0,0,0,0.28) 100%);
}

.hero-globe__content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,22,18,0.55) 0%, rgba(7,22,18,0.18) 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

/* ---- Eyebrow label ---- */
.hero-globe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff2e2e;
}

.hero-globe__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #FF0000;
  border-radius: 2px;
}

/* ---- Text block: wordmark + lead constrained to h1 natural width ---- */
/*
 * width:min-content makes the block exactly as wide as its narrowest
 * possible layout.  The h1 has white-space:nowrap so its min-content =
 * max-content = "NOR CAN GEO" natural width.  The lead (white-space:normal)
 * wraps within that same width automatically — no <br> tags needed.
 */
.hero-globe__main-block {
  width: min-content;
  max-width: 100%; /* safety on very small viewports */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Wordmark (NOR CAN GEO / EXCHANGE) ---- */
/* display:grid forces h1 and the EXCHANGE sub-span into the same column track,
   giving both pixel-identical left/right bounds (same technique as footer). */
.hero-globe__wordmark {
  display: grid;
  gap: 5px;
  /* Single tuning knob for glyph side-bearing compensation (see span:first/last rules below) */
  --hero-letter-bearing: 0px;
}

.hero-globe__content h1 {
  color: #fff;
  font-weight: 650;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 34px rgba(0,0,0,0.5);
  white-space: nowrap; /* stays one line at all sizes — sets the shared container width */
  margin-left: -3px;
}

/* EXCHANGE row — flex space-between pins first/last letter to container edges */
.hero-globe__wordmark-sub {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 100% of .hero-globe__wordmark = h1 natural width */
  color: #9fe7dd;
  font-weight: 500;
  font-size: clamp(17px, 2.15vw, 30px);
  line-height: 1.4;
  text-shadow: 0 1px 20px rgba(0,0,0,0.4);
}

/*
 * Glyph side-bearing compensation.
 *
 * The span box edges are flush with h1 via the grid layout, but the visible
 * ink of "E" sits slightly inside its span box (left/right side-bearing of the
 * glyph in Nunito 800).  Pulling the first span left and the last span right
 * by --hero-letter-bearing nudges the E ink to sit directly under the N / O ink
 * of the h1 above it.
 *
 * TUNING: adjust --hero-letter-bearing (defined on the parent .hero-globe__wordmark)
 * until both glyph edges look optically flush.  Typical range: 2–6 px at hero size.
 */
.hero-globe__wordmark-sub span:first-child {
  margin-left: calc(-1 * var(--hero-letter-bearing));
}

.hero-globe__wordmark-sub span:last-child {
  margin-right: calc(-1 * var(--hero-letter-bearing));
}

/* ---- Lead paragraph ---- */
.hero-globe__lead {
  color: #fff;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  font-weight: 400;
  white-space: normal;
  text-shadow: 0 1px 18px rgba(0,0,0,0.45);
}

/* ---- Funding / partnership line ---- */
.hero-globe__funding {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 4px;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}

.hero-globe__funding::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  background: #FF0000;
  box-shadow: 0 0 10px 1px rgba(255,0,0,0.5);
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .hero-globe__content {
    width: 78%;
  }

  .hero-globe__content::before {
    background: linear-gradient(90deg, rgba(7,22,18,0.72), rgba(7,22,18,0.3));
  }

  .hero-globe__globe-wrap {
    height: 78%;
    right: -18%;
  }
}

/* ---- Entrance animation ---- */
@keyframes heroGlobeContentIn {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Globe keyframes must carry translateY(-50%) in both states to preserve vertical centring. */
@keyframes heroGlobeWrapIn {
  from { transform: translateY(-50%) translateX(110%); opacity: 0; }
  to   { transform: translateY(-50%) translateX(0);    opacity: 1; }
}

.hero-globe__content {
  animation: heroGlobeContentIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-globe__globe-wrap {
  animation: heroGlobeWrapIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-globe__content,
  .hero-globe__globe-wrap {
    animation: none;
  }
}