/* Reuse Afterglow's type, palette and gradient motion; scope the launch composition. */
.coming-soon {
  --launch-surface: color-mix(in srgb, var(--void), var(--ink) 12%);
  min-height: 100svh;
  padding: 7svh 4.5vw 8.2svh;
  background: var(--launch-surface);
  color: var(--ink);
  display: grid;
}
.coming-soon-frame {
  padding: clamp(10px, 1.85vw, 32px);
  background: var(--vapor);
  background-size: 220% 220%;
  animation: gradient-drift 12s ease-in-out infinite alternate;
  display: grid;
}
.coming-soon-stage {
  position: relative;
  min-height: 70svh;
  background: var(--launch-surface);
  isolation: isolate;
}
.coming-soon-title {
  position: absolute;
  top: 29.8%;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: var(--font-geist-sans), sans-serif;
  font-size: clamp(24px, 6vw, 110px);
  font-weight: 100;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
}
.coming-soon-line { display: block; }
.coming-soon-mobile-hydra { display: none; }
.coming-soon-hydra {
  position: absolute;
  width: 18%;
  height: auto;
  left: 64.2%;
  top: 53.2%;
  z-index: 1;
}
.coming-soon-shadow {
  position: absolute;
  left: 22%;
  top: 75%;
  width: 61%;
  height: 3%;
  border-radius: 50%;
  background: var(--void);
  opacity: .52;
  filter: blur(13px);
  transform: rotate(1deg);
}
@media (max-width: 600px) {
  .coming-soon { padding: 4svh 5vw; }
  .coming-soon-title { top: 22%; left: 7%; width: 86%; font-size: 13.5vw; text-align: left; }
  .coming-soon-word { display: block; }
  .coming-soon-last-word { display: inline-block; position: relative; }
  .coming-soon-hydra { display: none; }
  .coming-soon-mobile-hydra {
    display: block;
    position: absolute;
    width: 34vw;
    max-width: none;
    height: auto;
    left: calc(100% - 7vw);
    top: 78%;
  }
  .coming-soon-shadow {
    left: 3%;
    width: 70%;
    top: calc(22% + 80vw);
    height: 2%;
    filter: blur(9px);
    transform: rotate(1deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-frame { animation: none; }
}