/* terrain.css — the dune footer.
 *
 * The old site ended on a wireframe landscape running to a lit horizon with the
 * wordmark across it. That ending is worth keeping, so every content page closes
 * on it. The dunes themselves are the page's own particle field morphing (see
 * terrainProgress in ambient.js) — this file only lays out the type that sits on
 * them, which is why the block is transparent. */

.terrafoot {
  position: relative;
  z-index: 10;
  isolation: isolate;
  overflow: hidden;
  /* Transparent: the dunes are the page's own fixed particle stage showing
     through, not a canvas inside this block. An opaque background here would
     hide the very thing it is framing. */
  background: transparent;
  min-height: clamp(340px, 42vw, 540px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 clamp(14px, 2.4vw, 26px);
  margin-top: clamp(40px, 8vw, 96px);
}

/* No top scrim any more — the landscape runs behind the copy above rather than
   starting at this block's edge, so a band here would slice it in half. */

/* Horizon bloom. The point field stacks additively into a bright line on its
   own, but the original had real atmosphere behind it and the terrain reads as
   flat without it. Sits under the canvas so the dunes silhouette against it. */
.terrafoot__sky {
  position: absolute;
  left: 50%;
  top: 28%;
  width: min(1100px, 86vw);
  aspect-ratio: 3 / 1;
  transform: translate(-50%, -50%);
  /* Driven by custom properties rather than literals: the platform page runs
     red, and a hardcoded gradient here is exactly the kind of thing that gets
     missed and leaves one blue pool at the bottom of an otherwise red page. */
  --sky-core: rgba(122, 194, 255, 0.5);
  --sky-mid: rgba(32, 139, 255, 0.26);
  --sky-far: rgba(15, 74, 168, 0.1);
  --sky-out: rgba(4, 7, 15, 0);
  background: radial-gradient(
    ellipse at center,
    var(--sky-core) 0%,
    var(--sky-mid) 26%,
    var(--sky-far) 52%,
    var(--sky-out) 74%
  );
  filter: blur(6px);
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

/* The nav and legal type sits over the terrain, and on a narrow viewport the
   bright horizon band rides right through it. A scrim anchored to the bottom
   keeps the copy legible without hiding the dunes above it. */
.terrafoot::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to top, var(--bg) 22%, rgba(4, 7, 15, 0));
  z-index: 2;
  pointer-events: none;
}

.terrafoot__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

/* ------------------------------------------------------------------ body */

/* The giant stretched wordmark is gone — it read as a nameplate slapped over the
   dunes rather than a real footer. In its place: a brand lockup, three link
   columns, and a legal bar. Everything stays light type over the transparent
   crest so the particles still show through and announce the block. */
.terrafoot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(30px, 4vw, 48px);
}

.terrafoot__lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.terrafoot__lockup img {
  width: auto;
  height: 34px;
  display: block;
}
.terrafoot__lockup span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.terrafoot__tag {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.terrafoot__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.terrafoot__col h3 {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.terrafoot__col a {
  position: relative;
  font-family: var(--display);
  font-size: 15px;
  color: var(--muted);
  transition: color 200ms ease;
}
.terrafoot__col a:hover,
.terrafoot__col a:focus-visible {
  color: #fff;
}

/* ---------------------------------------------------------------- legal bar */

.terrafoot__base {
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.terrafoot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
.terrafoot__legal a:hover {
  color: var(--blue-soft);
}
.terrafoot__sep {
  opacity: 0.4;
}

/* Between the desktop four-up and the phone stack there is a band where the
   brand column squeezes the three link columns into two words per line. Drop
   the brand onto its own row first and let the links keep full width. */
@media (max-width: 1020px) and (min-width: 721px) {
  .terrafoot__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .terrafoot__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .terrafoot {
    min-height: 420px;
  }
  /* Taller scrim on mobile: the footer is short enough that the nav row lands
     in the horizon band, so the fade has to reach further up to clear it. */
  .terrafoot::after {
    height: 62%;
  }
  .terrafoot__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 28px;
  }
  /* Brand spans the full row above the two link columns. */
  .terrafoot__brand {
    grid-column: 1 / -1;
  }
  .terrafoot__legal {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 420px) {
  .terrafoot__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}