/* Homepage: hero, feature sections, device frame, closing. */

/* Hero */

.hero {
  --mark-w: clamp(150px, 17vw, 228px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100svh - 88px), 980px);
  padding: clamp(112px, 15vh, 168px) 16px clamp(112px, 14vh, 160px);
  overflow: clip;
  text-align: center;
}

.hero-mark {
  position: relative;
  flex: none;
  width: var(--mark-w);
  aspect-ratio: 608 / 462;
}

/* The stage is larger than the mark so the opening grid has room; its center
   is the mark's center, and it never affects layout. */
.hero-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mark-w) * 8 / 3);
  height: calc(var(--mark-w) * 2);
  overflow: visible;
  pointer-events: none;
  translate: -50% -50%;
}

.hero-title {
  margin-top: clamp(48px, 7vh, 72px);
  font-size: clamp(40px, 7.4vw, 100px);
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.hero-lede {
  margin-top: clamp(20px, 2.4vw, 28px);
  color: var(--muted);
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.4;
}

.hero .store-badge {
  --badge-height: clamp(48px, 4.2vw, 56px);
  margin-top: clamp(36px, 4vw, 48px);
}

/* Intro, set by home.js: the page starts blank and the script reveals it.
   If the script never takes over, everything still appears. */
.intro .hero-stage,
.intro .hero-reveal,
.intro .site-header,
.intro .hero ~ *,
.intro .site-footer {
  opacity: 0;
}

.intro:not(.intro-running) :is(.hero-stage, .hero-reveal, .site-header, .hero ~ *, .site-footer) {
  animation: intro-failsafe 400ms ease 2.5s forwards;
}

.intro-running .hero-stage {
  opacity: 1;
}

/* Full-screen layer for the opening grid; removed once the mark forms. */
.intro-pieces {
  position: fixed;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.intro-skip :is(.hero-reveal, .site-header, .hero ~ *, .site-footer) {
  transition: opacity 400ms ease, translate 400ms ease;
}

@keyframes intro-failsafe {
  to {
    opacity: 1;
  }
}

/* Feature sections */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
  width: min(1120px, 100% - 64px);
  margin: 0 auto;
  padding: clamp(96px, 11vw, 160px) 0;
}

.feature-copy {
  max-width: 500px;
}

.feature-flip .feature-copy {
  order: 2;
}

.feature h2 {
  font-size: clamp(36px, 3.9vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}

.feature p {
  max-width: 30ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Device frame. Sizes are relative to the phone's width so the frame keeps
   its proportions at every scale. */

.phone {
  justify-self: center;
  width: clamp(264px, 27vw, 368px);
  margin: 0;
  container-type: inline-size;
}

.phone-frame {
  position: relative;
  padding: 1.1cqw;
  border-radius: 17.8cqw;
  background: linear-gradient(150deg, #e4e6e9 0%, #b4b8bd 14%, #9a9ea4 50%, #b9bdc2 86%, #e8eaed 100%);
  box-shadow:
    inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.7),
    inset 0 0 0 0.45cqw rgba(0, 0, 0, 0.12),
    0 1.5cqw 3cqw -1cqw rgba(15, 23, 42, 0.18),
    0 12cqw 24cqw -8cqw rgba(15, 23, 42, 0.26);
}

.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.4cqw solid #050506;
  border-radius: 16.7cqw;
  background: #ffffff;
}

/* Side buttons: action and volume on the left, side button on the right. */
.phone-frame::before,
.phone-frame::after {
  position: absolute;
  width: 0.9cqw;
  content: "";
}

.phone-frame::before {
  top: 36cqw;
  left: -0.75cqw;
  height: 50cqw;
  border-radius: 0.6cqw 0 0 0.6cqw;
  background: linear-gradient(
    to bottom,
    #a3a7ac 0 7cqw,
    transparent 7cqw 16cqw,
    #a3a7ac 16cqw 31cqw,
    transparent 31cqw 35cqw,
    #a3a7ac 35cqw 50cqw
  );
}

.phone-frame::after {
  top: 58cqw;
  right: -0.75cqw;
  height: 24cqw;
  border-radius: 0 0.6cqw 0.6cqw 0;
  background: #a3a7ac;
}

/* Closing */

.closing {
  display: grid;
  justify-items: center;
  gap: clamp(36px, 4vw, 48px);
  padding: clamp(120px, 15vw, 208px) 16px clamp(128px, 16vw, 224px);
  text-align: center;
}

.closing .store-badge {
  --badge-height: 56px;
}

.closing h2 {
  font-size: clamp(44px, 6.6vw, 88px);
  letter-spacing: -0.045em;
  line-height: 1;
}

@media (max-width: 820px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 48px;
    width: min(560px, 100% - 32px);
    padding: 80px 0;
    text-align: center;
  }

  .feature-flip .feature-copy {
    order: 0;
  }

  .feature p {
    margin-inline: auto;
  }

  .phone {
    width: min(320px, 78vw);
  }
}