/* Parkur — "coming soon" page. Builds on home.css. */

.soon-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.soon-hero h1 { margin-top: 22px; }

.soon-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0;
  padding: 8px 16px 8px 14px; border-radius: 999px;
  background: var(--clay-soft); color: var(--clay-text);
  font: 600 14px/1.2 var(--sans);
}

/* A quiet heartbeat: something is under way. */
.pulse-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--clay); }
.motion .pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--clay);
  animation: ping 3s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- The course to launch ---------- */

.launch-card {
  max-width: 980px; margin: clamp(52px, 7vw, 84px) auto 0; text-align: left;
  padding: clamp(22px, 3.2vw, 36px); border-radius: 34px;
  background: var(--surface); box-shadow: var(--shadow-l);
}
.launch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.launch-head h2 { margin: 0; font: 500 clamp(22px, 2.4vw, 27px)/1.2 var(--serif); letter-spacing: -0.01em; }
.launch-now { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }

.launch-course { position: relative; padding: 40px 0 38px; }
.launch-course .course-svg { height: clamp(92px, 12vw, 132px); margin: 0; }

.launch-steps { list-style: none; margin: 0; padding: 0; }
.launch-steps li {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  transform: translate(-50%, 0);
  transition: color 0.6s var(--ease), opacity 0.6s var(--ease);
}
.launch-steps li.above { transform: translate(-50%, -100%); }
.launch-steps li.end { transform: translate(calc(-100% + 8px), 0); }
.launch-steps li.done { color: var(--ink-2); }
.launch-steps li.current { color: var(--clay-text); font-weight: 600; }
.js .launch-steps li:not(.placed) { opacity: 0; }
/* Without scripting the steps are simply a row of words. */
html:not(.js) .launch-steps { display: flex; justify-content: space-between; margin-top: 12px; }
html:not(.js) .launch-steps li { position: static; transform: none; }

.launch-foot {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--hairline);
  font-size: 15px; color: var(--ink-2);
}

.soon-promises { margin-top: 36px; }

/* ---------- A first look ---------- */

.peek-section { padding: clamp(32px, 5vw, 64px) 0 0; text-align: center; }
.peek-title { margin: 0 0 28px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.peek-frame {
  height: clamp(320px, 40vw, 460px); overflow: hidden; padding-top: 6px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.peek-frame .phone { box-shadow: inset 0 0 0 1.5px #3B3834, var(--shadow-m); }
.motion .peek-frame .phone { animation: float 9s ease-in-out infinite; }

.soon .site-footer { margin-top: 0; }

@media (max-width: 560px) {
  .launch-steps li { font-size: 12.5px; }
  .soon-promises { grid-template-columns: 1fr; gap: 6px; }
}