/* 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 the thing worth keeping, so this block
 * closes every page the same way: canvas underneath, type on top, and a hard
 * background so it occludes the fixed particle stage on the experience page. */

.terrafoot {
  position: relative;
  z-index: 10;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  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);
}

/* The page above shouldn't stop at a ruled line — it should sink into the
   landscape. Also hides the near edge of the point field. */
.terrafoot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 26%;
  background: linear-gradient(to bottom, var(--bg) 12%, rgba(4, 7, 15, 0));
  z-index: 2;
  pointer-events: none;
}

/* 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%);
  background: radial-gradient(
    ellipse at center,
    rgba(122, 194, 255, 0.5) 0%,
    rgba(32, 139, 255, 0.26) 26%,
    rgba(15, 74, 168, 0.1) 52%,
    rgba(4, 7, 15, 0) 74%
  );
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}

.terrafoot__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms ease;
}
.terrafoot.is-ready .terrafoot__gl {
  opacity: 1;
}

/* No WebGL: the gradient sky alone is a perfectly good footer, so nothing here
   depends on the canvas arriving. */
.terrafoot.is-flat .terrafoot__sky {
  opacity: 0.7;
}

/* 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);
}

/* ------------------------------------------------------------------ links */

.terrafoot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 34px);
  padding-bottom: clamp(18px, 3vw, 30px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.terrafoot__links a {
  position: relative;
  padding-bottom: 3px;
  transition: color 200ms ease;
}
.terrafoot__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--blue-soft);
  transition: right 260ms ease;
}
.terrafoot__links a:hover,
.terrafoot__links a:focus-visible {
  color: #fff;
}
.terrafoot__links a:hover::after,
.terrafoot__links a:focus-visible::after {
  right: 0;
}

/* -------------------------------------------------------------- wordmark */

/* SVG rather than a heading: textLength pins the word to the exact width of the
   block at every viewport, which is what made the original read as a nameplate
   instead of centred type floating in a box. */
.terrafoot__mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.terrafoot__mark text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 100px;
  fill: #fff;
}

.terrafoot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: clamp(10px, 1.6vw, 18px);
  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;
}

@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__links {
    gap: 8px 18px;
    font-size: 9.5px;
  }
  .terrafoot__legal {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}