/* A vivid cartographic canvas with contours, routes and shooting spots. */
.home-page,
.release-page,
.legal-document {
  background-color: #0b1321;
}

.home-page::before,
.release-page::before,
.legal-document::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 540px at 0% 0%, #548ce866, transparent 75%),
    radial-gradient(ellipse 48% 720px at 105% 50%, #5be0c34d, transparent 74%),
    radial-gradient(ellipse 65% 400px at 15% 100%, #5e8fea59, transparent 76%),
    radial-gradient(ellipse 40% 320px at 95% 100%, #83e8d23b, transparent 75%),
    linear-gradient(145deg, #15263d 0%, #0b1423 48%, #15283a 100%);
}

.home-page::after,
.release-page::after,
.legal-document::after {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 1;
  background: url('assets/background-contours.svg') center top / 100% auto repeat-y;
  mask-image: linear-gradient(90deg, #000, #0009 36%, #0009 64%, #000);
  -webkit-mask-image: linear-gradient(90deg, #000, #0009 36%, #0009 64%, #000);
  will-change: auto;
}

.home-hero--slideshow {
  position: relative;
  isolation: isolate;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  border-radius: 24px;
  background: #0b0f1a;
}

.hero-background__layer,
.hero-background__layer img,
.hero-background__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-background__layer {
  display: block;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}

.hero-background__layer.is-active { opacity: 1; }
.hero-background__layer img {
  display: block;
  object-fit: cover;
  object-position: 58% center;
}

.hero-background__shade {
  background:
    linear-gradient(90deg, #081527eb, #0815279e 44%, #08152726 100%),
    linear-gradient(180deg, #0b0f1a18 55%, #0b0f1a 100%);
}

.container > main > .home-hero--slideshow {
  padding-inline: 40px;
  padding-bottom: 64px;
}

.container > main > .home-hero--slideshow .hero-copy > p { color: #e0e8f2; }
.home-hero--slideshow .hero-eyebrow,
.home-hero--slideshow .download-label { color: #edf2fa; }
.home-hero--slideshow .mock::before { display: none; }

/* Use the same standalone logo at every screen size. */
.home-page .container > header .logo-badge,
.release-page .container > header .logo-badge {
  width: 80px;
  height: 80px;
  flex-basis: 80px;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.home-page .container > header .logo-icon,
.release-page .container > header .logo-icon { width: 100%; height: 100%; }
.home-page .container > header .logo > span,
.release-page .container > header .logo > span { display: none; }


@media (min-width: 701px) and (max-width: 920px) {
  .container > main > .home-hero--slideshow { padding-inline: 24px; }
}

@media (max-width: 700px) {
  .home-hero--slideshow .hero-background__layer img {
    object-fit: cover;
    object-position: var(--hero-mobile-focus, 50% 0%);
  }
  .home-hero--slideshow .hero-background__shade {
    background:
      linear-gradient(180deg, #081527b8, #08152780 30%, #08152726 58%, #0b0f1ae6 100%),
      linear-gradient(90deg, #08152726, transparent 70%);
  }
  /* Center the copy above the full-width app composition on mobile. */
  .home-page .container {
    padding: calc(20px + var(--safe-top, 0px)) 16px calc(24px + var(--safe-bottom, 0px));
  }
  .home-page .container > header { padding-bottom: 20px; }
  .home-page .container > header .logo-badge {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .container > main > .home-hero--slideshow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'eyebrow' 'heading' 'description' 'phone' 'download';
    row-gap: 24px;
    min-height: 0;
    padding: 36px 20px 28px;
  }
  .home-hero--slideshow .hero-copy {
    display: contents;
  }
  .home-hero--slideshow .hero-eyebrow {
    grid-area: eyebrow;
    justify-content: center;
    text-align: center;
    gap: 6px;
    margin-bottom: -6px;
    font-size: 10px;
    letter-spacing: .1em;
  }
  .home-hero--slideshow .hero-eyebrow::before { flex-shrink: 0; }
  .container > main > .home-hero--slideshow h1 {
    grid-area: heading;
    text-align: center;
    font-size: clamp(30px, 9vw, 48px);
  }
  .home-hero--slideshow .headline-ending { white-space: nowrap; }
  .home-hero--slideshow .hero-emoji { margin-left: 0; transform: translate(-2px, -2px); }
  .container > main > .home-hero--slideshow .hero-copy > p {
    grid-area: description;
    min-width: 0;
    max-width: 400px;
    margin: -8px auto 0;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
  }
  .home-hero--slideshow .mock { align-self: center; }
  .home-hero--slideshow .home-download { min-width: 0; text-align: center; }
  .home-hero--slideshow .download-label { font-size: 12px; }
  .home-hero--slideshow .home-download .badges { justify-content: center; margin-inline: auto; }
  .home-hero--slideshow .download-pointer { margin-inline: auto; }
}

@media (max-width: 370px) {
  .container > main > .home-hero--slideshow { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-background__layer { transition: none; }
}