body.coming-soon-surface {
  min-block-size: 100dvh;
  overflow: auto;
  background: #f7f1e7;
}

.coming-soon-shell {
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  min-block-size: 100svh;
  overflow: hidden;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 78% 45%, rgb(255 255 255 / 90%) 0 11rem, transparent 31rem),
    #f7f1e7;
  color: var(--color-navy);
}

.parcel-plan {
  position: absolute;
  inset: -4%;
  z-index: -2;
  inline-size: 108%;
  block-size: 108%;
  fill: rgb(255 255 255 / 24%);
  stroke: rgb(16 38 83 / 11%);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  animation: parcel-drift 24s ease-in-out infinite alternate;
}

.parcel-plan path:nth-child(even) {
  fill: rgb(255 255 255 / 44%);
}

.coming-soon-header,
.coming-soon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.coming-soon-header {
  opacity: 0;
  animation: launch-rise 700ms 80ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.coming-soon-logo {
  display: block;
  inline-size: clamp(8rem, 12vw, 11rem);
  block-size: auto;
}

.coming-soon-footer {
  font-family: var(--font-meta);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.coming-soon-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(23rem, .68fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 9rem);
  inline-size: min(100%, 82rem);
  margin: auto;
  padding-block: clamp(3rem, 8vh, 6rem);
}

.coming-soon-copy {
  max-inline-size: 45rem;
}

.launch-status {
  display: flex;
  align-items: center;
  gap: .65rem;
  opacity: 0;
  color: var(--color-coral-dark);
  font-family: var(--font-meta);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: launch-rise 650ms 180ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.launch-status span {
  inline-size: .58rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-coral);
  box-shadow: 0 0 0 .32rem rgb(250 117 84 / 14%);
}

.coming-soon-copy h1 {
  max-inline-size: 100%;
  margin-block-start: 1.25rem;
  opacity: 0;
  font-size: clamp(3rem, 5.3vw, 5rem);
  line-height: .9;
  letter-spacing: -.035em;
  animation: launch-rise 760ms 260ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.coming-soon-title-line {
  display: block;
}

.coming-soon-title-line.is-neighbors {
  white-space: nowrap;
  text-wrap: nowrap;
}

.coming-soon-intro {
  max-inline-size: 35rem;
  margin-block-start: clamp(1.5rem, 4vh, 2.6rem);
  opacity: 0;
  color: var(--color-navy-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  text-wrap: pretty;
  animation: launch-rise 700ms 360ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.coming-soon-note {
  margin-block-start: 1rem;
  opacity: 0;
  color: var(--color-muted);
  font-family: var(--font-meta);
  font-size: .7rem;
  line-height: 1.6;
  animation: launch-rise 700ms 430ms cubic-bezier(.2, .75, .25, 1) forwards;
}

.neighborhood-mark {
  --mark-opacity: 1;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  inline-size: min(32vw, 27rem);
  min-inline-size: 23rem;
  aspect-ratio: 1;
  opacity: 0;
  transform: scale(.94) rotate(-2deg);
  animation: mark-arrive 900ms 300ms cubic-bezier(.18, .8, .2, 1) forwards;
}

.parcel-corner {
  border: .35rem solid rgb(255 255 255 / 72%);
  box-shadow: 0 1.5rem 4rem rgb(16 38 83 / 8%);
}

.parcel-corner.is-mint {
  border-radius: 3.2rem 1.2rem 4.5rem 1.2rem;
  background: #8dd1b5;
}

.parcel-corner.is-gold {
  border-radius: 1.2rem 3.2rem 1.2rem 4.5rem;
  background: #ffc85e;
}

.parcel-corner.is-violet {
  border-radius: 1.2rem 4.5rem 1.2rem 3.2rem;
  background: #aa91df;
}

.parcel-corner.is-blue {
  border-radius: 4.5rem 1.2rem 3.2rem 1.2rem;
  background: #72afe7;
}

.beacon-ring {
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  box-shadow:
    0 0 0 1rem rgb(255 255 255 / 70%),
    0 0 0 1.1rem rgb(250 117 84 / 12%);
  animation: beacon-breathe 3.6s ease-in-out infinite;
}

.beacon-pin {
  position: absolute;
  inset: 29% 35% 25%;
  inline-size: 30%;
  overflow: visible;
  filter: drop-shadow(0 .8rem 1rem rgb(233 95 64 / 24%));
  fill: var(--color-coral);
}

.beacon-pin circle {
  fill: #fff;
}

.coming-soon-footer {
  justify-content: flex-end;
  opacity: 0;
  color: var(--color-muted);
  animation: launch-rise 650ms 520ms cubic-bezier(.2, .75, .25, 1) forwards;
}

@keyframes launch-rise {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mark-arrive {
  from { opacity: 0; transform: scale(.94) rotate(-2deg); }
  to { opacity: var(--mark-opacity); transform: scale(1) rotate(0); }
}

@keyframes parcel-drift {
  from { transform: translate3d(-.75rem, -.25rem, 0) scale(1.01); }
  to { transform: translate3d(.75rem, .35rem, 0) scale(1.015); }
}

@keyframes beacon-breathe {
  0%, 100% { transform: scale(.96); box-shadow: 0 0 0 .85rem rgb(255 255 255 / 66%), 0 0 0 .95rem rgb(250 117 84 / 9%); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 1.15rem rgb(255 255 255 / 72%), 0 0 0 1.3rem rgb(250 117 84 / 16%); }
}

@media (max-width: 52rem) {
  .coming-soon-shell {
    background:
      radial-gradient(circle at 80% 27%, rgb(255 255 255 / 92%) 0 6rem, transparent 19rem),
      #f7f1e7;
  }

  .coming-soon-hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.5rem;
    padding-block: 2.5rem;
  }

  .coming-soon-copy {
    position: relative;
    z-index: 1;
  }

  .neighborhood-mark {
    --mark-opacity: .38;

    position: absolute;
    inset: 13% -5rem auto auto;
    z-index: 0;
    inline-size: 18rem;
    min-inline-size: 0;
  }

}

@media (max-width: 34rem) {
  .coming-soon-shell {
    min-block-size: 100dvh;
    padding-inline: max(1.1rem, env(safe-area-inset-left)) max(1.1rem, env(safe-area-inset-right));
  }

  .coming-soon-copy h1 {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }

  .coming-soon-intro {
    font-size: 1rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  :where(
    .parcel-plan,
    .coming-soon-header,
    .launch-status,
    .coming-soon-copy h1,
    .coming-soon-intro,
    .coming-soon-note,
    .neighborhood-mark,
    .beacon-ring,
    .coming-soon-footer
  ) {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .neighborhood-mark {
    opacity: var(--mark-opacity);
  }
}

@media (forced-colors: active) {
  .parcel-plan,
  .neighborhood-mark {
    display: none;
  }

  .launch-status span {
    background: CanvasText;
    box-shadow: none;
  }
}