/*
 * Bridge between the Bitgold site shell (main.css) and the hero island
 * (hero.css). The hero now sits below the sticky site header instead of
 * overlaying it, so it takes the header height out of its own height and
 * keeps a comfortable amount of air at the top.
 */

.btg-hero {
  min-height: max(calc(100svh - var(--header-height, 74px)), 640px);
  padding-top: clamp(28px, 4vh, 56px);
}

@media (max-width: 900px) {
  .btg-hero {
    min-height: max(calc(100svh - var(--header-height, 68px)), 700px);
  }
}

@media (max-width: 640px) {
  .btg-hero {
    min-height: max(calc(100svh - var(--header-height, 68px)), 800px);
    padding-top: 18px;
  }
}

@media (max-width: 640px) and (max-height: 820px) {
  .btg-hero {
    min-height: max(calc(100svh - var(--header-height, 68px)), 760px);
  }
}

/* --------------------------------------------------------------------------
   Link layer: one SVG over the whole hero, so planets that orbit far from the
   brand core (the ambient planets and the ones drifting out of the stage)
   still get a link back to it.
   -------------------------------------------------------------------------- */

.btg-hero__links {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Distant links stay quiet until you interact with their planet. */
.gravity-link.is-far {
  stroke-width: 1.1;
  stroke-dasharray: 1.5 8;
  opacity: 0.2;
}

.gravity-glow.is-far {
  stroke-width: 7;
  opacity: 0.04;
}

.gravity-node-ring.is-far {
  opacity: 0.26;
}

.gravity-node.is-far {
  opacity: 0.55;
}

.gravity-packet.is-far {
  opacity: 0.6;
}

.gravity-packet-trail.is-far {
  opacity: 0;
}

.gravity-arrow.is-far {
  opacity: 0.1;
}

/* Planet click: the planet flares, its link turns to solid gold and a pulse
   travels back into the brand core. */

.btg-hero.is-over-planet {
  cursor: pointer;
}

.gravity-link.is-hit {
  stroke: rgb(255, 233, 178) !important;
  stroke-width: 2.8;
  stroke-dasharray: 1 0;
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(255, 228, 168, 0.95));
}

.gravity-glow.is-hit {
  stroke: rgb(255, 228, 168) !important;
  stroke-width: 16;
  opacity: 0.3;
}

.gravity-node-ring.is-hit {
  stroke: rgb(255, 236, 190) !important;
  opacity: 1;
}

.gravity-node.is-hit,
.gravity-packet.is-hit,
.gravity-packet-trail.is-hit {
  fill: rgb(255, 240, 202) !important;
  opacity: 1;
}

.gravity-burst {
  fill: none;
  stroke-width: 1.4;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 228, 168, 0.8));
  pointer-events: none;
}

@media (max-width: 720px) {
  .gravity-link.is-far {
    stroke-width: 1;
    opacity: 0.16;
  }

  .gravity-glow.is-far {
    stroke-width: 5;
    opacity: 0.03;
  }
}

/* --------------------------------------------------------------------------
   Four-item asset strip in the hero footer
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .btg-metrics {
    gap: clamp(16px, 1.9vw, 30px);
  }

  .btg-metric {
    min-width: 74px;
  }
}

/* The infrastructure rail needs the room the fourth metric takes; drop it
   before the footer row starts to crowd. */
@media (max-width: 1400px) {
  .btg-hero__footer .focus-rail {
    display: none;
  }
}

/* Four long labels no longer fit on one line on phones; go 2 x 2. */
@media (max-width: 640px) {
  .btg-metrics {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  .btg-metric {
    min-width: 0;
  }

  .btg-metric + .btg-metric::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Content frame: the copy column defines the left edge, the brand core the
   right edge. The four-value strip and the site header logo align to it.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .btg-hero__footer {
    width: var(--hero-frame-width, 100%);
    margin-right: auto;
    margin-left: var(--hero-frame-left-inner, 0px);
  }

  /* The strip already has to hold four figures plus the stamp. */
  .btg-hero__footer .focus-rail {
    display: none;
  }

  /* A slightly tighter site header so its logo can sit on the copy edge. */
  .home-page .site-header__inner {
    gap: 18px;
  }

  .home-page .nav-link {
    padding: 0 10px;
  }

  .home-page .nav-toggle {
    width: 26px;
  }

  .home-page .button--compact {
    padding-inline: 22px;
  }
}

/*
 * The site header's logo shares the hero copy's left edge. This is computed
 * rather than scripted so it always lands, and mirrors the hero layout:
 *   gutter + copy offset + hero-inner centring - header-inner centring
 * (hero gutter clamp(24px, 4.4vw, 72px), copy offset clamp(64px, 11vw, 200px),
 *  hero inner max 1640px, header inner max 1460px).
 * Below 1320px the nav would run out of room, so the header stays as it is.
 */
@media (min-width: 1320px) {
  .home-page .site-header__inner {
    padding-left: calc(
      clamp(24px, 4.4vw, 72px) +
      clamp(64px, 11vw, 200px) +
      max(0px, (100% - 2 * clamp(24px, 4.4vw, 72px) - 1640px) / 2) -
      max(0px, (100% - 1460px) / 2) +
      16px
    );
  }
  /* The mark's long left offset is applied inline from hero.js, where it can
     stop at the window edge instead of running off-screen. */
}

/* --------------------------------------------------------------------------
   Partners marquee: full-bleed logo strip that sits flush on the footer
   -------------------------------------------------------------------------- */

.home-page .section--partners {
  padding-bottom: 0;
}

.home-page .section--partners .section__inner {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* Keep the heading on the same content grid as the other sections
   (Philosophy, Uses, …) even though the strip itself is full-bleed. */
.home-page .section--partners .section-heading {
  max-width: none;
  padding-inline: max(
    var(--page-gutter),
    calc((100% - var(--page-width)) / 2 + var(--page-gutter))
  );
}

.home-page .section--partners .logo-wall {
  width: 100%;
}