/* ---- Hero ---- */

.hero {
  position: relative;
  z-index: 2;
  height: 106vh;
  min-height: 640px;
  padding: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 100px;
  overflow: hidden;
  /* the brand film is white on near-black; the hero takes its ground */
  background: var(--hero-ground, #0B0A09);
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* tall screens: show the whole 16:9 film; its ground runs into the hero's */
@media (max-aspect-ratio: 5/4) {
  .hero-video {
    object-fit: contain;
    /* feather the film's top and bottom edges into the hero's ground */
    /* the 16:9 picture is 56.25vw tall, centred */
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(50% - 28.125vw), #000 calc(50% - 21vw), #000 calc(50% + 21vw), transparent calc(50% + 28.125vw));
    mask-image: linear-gradient(to bottom, transparent calc(50% - 28.125vw), #000 calc(50% - 21vw), #000 calc(50% + 21vw), transparent calc(50% + 28.125vw));
  }
}

/* The film carries the line itself (it ends on "Focused, well-made apps for
   everyday life."), so the headline stays in the page for search and screen
   readers but is not drawn over the picture. */
.hero-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-sound {
  position: absolute;
  right: 24px;
  /* level with the button bar: the page below overlaps the hero's last 165px */
  bottom: 105px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--surface-scrim);
  backdrop-filter: blur(var(--blur-ui));
  -webkit-backdrop-filter: blur(var(--blur-ui));
  cursor: pointer;
}

.hero-sound .hero-sound-waves { display: none; }
.hero-sound[aria-pressed="true"] .hero-sound-waves { display: inline; }
.hero-sound[aria-pressed="true"] .hero-sound-mute { display: none; }

.hero-title {
  margin: 0;
  max-width: 95vw;
}

.hero-title-line {
  display: block;
  overflow: hidden;
}

.hero-title-line > span {
  display: inline-block;
  white-space: nowrap;
}

.hero-title-1 {
  transform: translateY(130px) rotate(2deg);
  transform-origin: 25% 50% 0;
}

.hero-title-2 {
  transform: translateY(100px) rotate(2deg);
  transform-origin: 25% 50% 0;
}

.hero-sub {
  margin: 40px auto 0;
  max-width: 280px;
  color: var(--text-secondary-dark);
  opacity: 0.001;
  transform: translateY(15px);
}

.hero-cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: max-content;
  padding: 4px 4px 4px 16px;
  background: var(--surface-scrim);
  backdrop-filter: blur(var(--blur-ui));
  -webkit-backdrop-filter: blur(var(--blur-ui));
  border-radius: calc(var(--radius-md) * var(--one-if-corner-shape-supported));
  corner-shape: superellipse(1.5);
  opacity: 0.001;
  transform: translateY(15px);
}

.hero-cta .btn {
  height: 42px;
  padding-inline: 16px;
}

.hero-cta-line {
  color: var(--text-secondary-dark);
}


@media (max-width: 809.98px) {
  .hero {
    height: 100vh;
    padding: 0 16px 100px;
    gap: 60px;
  }

  .hero-copy {
    padding: 0;
  }

  .hero-title {
    max-width: 100%;
  }

  .hero-title-line > span {
    white-space: normal;
    max-width: 100%;
  }

  .hero-sub {
    margin-top: 24px;
  }

  .hero-cta {
    width: min(264px, 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
  }

  .hero-cta-line {
    padding: 16px;
    background: var(--surface-scrim);
    backdrop-filter: blur(var(--blur-ui));
    -webkit-backdrop-filter: blur(var(--blur-ui));
    border-radius: calc(var(--radius-md) * var(--one-if-corner-shape-supported));
    text-align: center;
    line-height: 1.2;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-sound {
    top: 21px;
    right: 12px;
    bottom: auto;
  }
}

@media (max-width: 480px) {
  .hero-sub {
    font-size: clamp(14px, 4.6vw, 20px);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.em-serif {
  font-style: italic;
  font-weight: 400;
}

html[lang="ja"] .em-serif {
  font-family: var(--font-serif-jp);
  font-style: normal;
}

html[lang="zh"] .em-serif {
  font-family: var(--font-serif-sc);
  font-style: normal;
}

html[lang="en"] .em-serif {
  font-family: var(--font-serif);
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-1 span,
  .hero-title-2 span,
  .hero-sub,
  .hero-cta {
    transform: none !important;
    opacity: 1 !important;
  }
}