/* "Drift into focus" hero title: the scene drawn by drift-scene.js at the headline's own size. */
/*
 * With the product demo gone the hero keeps a full first screen, so the photo is
 * framed as before and the copy stays on the sky above the trees.
 */
body.home-page .hero.hero--drift {
  min-height: calc(100vh - 2 * var(--ac-gutter)) !important;
  min-height: calc(100svh - 2 * var(--ac-gutter)) !important;
}

@media (max-width: 767px) {
  body.home-page .hero.hero--drift {
    min-height: calc(100vh - 12px) !important;
    min-height: calc(100svh - 12px) !important;
  }
}

/*
 * One title, one lede, one action, set as a group in the open sky under the navigation;
 * the launch film (hero-film.css) follows it over the trees.
 */
body.home-page .hero--drift {
  --drift-size: clamp(3rem, 9.2vw, 9.5rem);
}

body.home-page .hero--drift .hero-copy {
  margin: clamp(40px, 9vh, 96px) auto 0 !important;
  padding: 0 var(--ac-pad-x) !important;
}

/*
 * On wider screens the group hangs from the navigation instead of centring in the window:
 * the gap above the letters stays about 0.7 of the type size on any window height.
 */
@media (min-width: 768px) {
  body.home-page .hero--drift .hero-copy {
    margin: calc(0.42 * var(--drift-size)) auto 0 !important;
  }
}

body.home-page .hero--drift .hero-sub {
  max-width: 42rem !important;
  margin: clamp(22px, 2.4vw, 32px) auto 0 !important;
  font-size: clamp(1.125rem, 1.45vw, 1.375rem) !important;
  line-height: 1.45 !important;
}

body.home-page .hero--drift .hero-actions {
  margin-top: clamp(28px, 3vw, 40px) !important;
}

body.home-page .hero--drift .btn-primary {
  min-height: 56px !important;
  padding: 0 28px 0 24px !important;
  gap: 10px !important;
  border-radius: 18px !important;
  font-size: 1.0625rem !important;
}

body.home-page .hero--drift .btn-primary__icon svg {
  width: 19px !important;
  height: 19px !important;
}

/* One line, so the title box is exactly the resting word; the scene scales with this size. */
body.home-page .hero .drift-title {
  position: relative;
  max-width: none !important;
  font-size: var(--drift-size) !important;
  line-height: 1.04 !important;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* The heading text stays for assistive tech and is the fallback without WebGL2 or JavaScript. */
.drift-title[data-state="loading"] .drift-title__text,
.drift-title[data-state="running"] .drift-title__text {
  color: transparent;
}

.drift-title__canvas {
  position: absolute;
  z-index: 0;
  display: block;
  background: var(--drift-sky, transparent);
  font-family: "Geist", system-ui, sans-serif;
  /*
   * Clouds enter from below and the left. Fade the canvas edges so they never show a seam,
   * and close the lower edge just under the word so they gather there instead of crossing the lede.
   */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 25%, #000 57%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(180deg, transparent, #000 25%, #000 57%, transparent 72%);
  mask-composite: intersect;
}

.drift-title[data-state="fallback"] .drift-title__canvas {
  display: none;
}

/* Keep the lede and the action above the canvas the clouds rise through. */
body.home-page .hero--drift .hero-sub,
body.home-page .hero--drift .hero-actions {
  position: relative;
  z-index: 1;
}

/* On the photo the 500-weight links wash out against the sky; set them heavier and a touch larger. */
.navbar-hero .nav-links a,
.navbar-sticky .nav-links a {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* The skip link parks just above the viewport; keep its shadow off the page until it is focused. */
.skip-link:not(:focus) {
  box-shadow: none;
}