/* Decide — coming-soon page.
   Drenched dark green: the surface IS the brand. The bright green full stop
   is the mark — a decision, made. */

:root {
  --bg:         oklch(0.17 0.030 135);
  --bg-deep:    oklch(0.135 0.026 135);
  --surface:    oklch(0.215 0.032 135);
  --ink:        oklch(0.965 0.012 130);
  --muted:      oklch(0.80 0.035 130);
  --faint:      oklch(0.62 0.040 132);
  --green:      oklch(0.86 0.155 130);   /* the full stop, the taken route */
  --green-soft: oklch(0.86 0.155 130 / 0.35);
  --on-green:   oklch(0.20 0.050 135);
  --line:       oklch(0.34 0.045 133);
  --amber:      oklch(0.87 0.095 85);    /* selection + rare warm moment */
  --focus:      oklch(0.86 0.155 130 / 0.85);

  --font-display: "Jost", "Futura", system-ui, sans-serif;
  --font-ui: "Jost", "Futura", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
  min-height: 100svh;
  background:
    radial-gradient(120% 90% at 78% 46%, oklch(0.20 0.034 135) 0%, var(--bg) 46%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--on-green); }

/* ---------- frame ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 68rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
}

.top { padding-top: 0.25rem; }

.wordmark {
  font-family: "Jost", var(--font-ui);
  font-weight: 300;
  font-size: 1.4375rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
}

.stop { color: var(--green); }

.wordmark .stop { font-weight: 600; }

/* ---------- hero ---------- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 5rem);
  max-width: 36rem;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8.5vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__title .line1,
.hero__title .line2 {
  display: block;
  animation: rise 0.7s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.hero__title .line2 { animation-delay: 0.09s; }

.hero__sub {
  margin-top: clamp(1.5rem, 3vh, 2rem);
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  text-wrap: pretty;
  animation: rise 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.18s both;
}

/* ---------- signup ---------- */

.signup {
  margin-top: clamp(2rem, 4.5vh, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  max-width: 30rem;
  animation: rise 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.27s both;
}

.signup__input {
  flex: 1 1 14rem;
  min-height: 3.25rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--ink);
  font: 500 1rem/1 var(--font-ui);
  transition: border-color 0.2s ease;
}

.signup__input::placeholder { color: var(--faint); }

.signup__input:hover { border-color: oklch(0.44 0.05 133); }

.signup__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: transparent;
}

.signup__btn {
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--green);
  color: var(--on-green);
  font: 600 1rem/1 var(--font-ui);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1), background 0.2s ease;
}

.signup__btn:hover { background: oklch(0.90 0.16 130); }
.signup__btn:active { transform: scale(0.98); }

.signup__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.signup__btn[disabled] { opacity: 0.7; cursor: default; }

.signup__status {
  min-height: 1.5rem;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: var(--green);
}

.signup__status.is-error { color: var(--amber); }

.hero__note {
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  font-size: 0.9375rem;
  color: var(--faint);
  animation: rise 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.36s both;
}

/* ---------- footer ---------- */

.bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--faint);
}

.bottom__aside { font-style: italic; font-family: var(--font-display); }

/* ---------- routing lines ---------- */

.routes {
  position: fixed;
  inset: 0 0 0 auto;
  height: 100vh;
  width: min(58vw, 760px);
  z-index: 0;
  pointer-events: none;
}

.route {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
  animation: draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.route--faint { stroke: var(--line); }

.route--taken {
  stroke: var(--green);
  stroke-width: 2;
  animation-delay: 0.35s;
  filter: drop-shadow(0 0 6px var(--green-soft));
}

.route-dot {
  fill: var(--green);
  animation: appear 0.4s ease-out 1.5s both;
}

.route-halo {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  opacity: 0;
  animation: halo 3.2s cubic-bezier(0.22, 1, 0.36, 1) 2s infinite;
}

/* ---------- animation ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { stroke-dashoffset: 900; }
  to   { stroke-dashoffset: 0; }
}

@keyframes appear {
  from { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; }
  to   { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; }
}

@keyframes halo {
  0%   { opacity: 0.7; transform: scale(1); transform-origin: center; transform-box: fill-box; }
  60%  { opacity: 0;   transform: scale(2.6); transform-origin: center; transform-box: fill-box; }
  100% { opacity: 0;   transform: scale(2.6); transform-origin: center; transform-box: fill-box; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .line1,
  .hero__title .line2,
  .hero__sub,
  .signup,
  .hero__note,
  .route,
  .route-dot { animation: none; }
  .route-halo { animation: none; opacity: 0; }
}

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  /* On phones the routes live in the top band, converging behind the empty
     space between wordmark and headline — never across the copy. */
  .routes {
    inset: 0 0 auto auto;
    width: 100vw;
    height: 38vh;
    opacity: 0.55;
  }

  .hero { max-width: none; }

  .bottom { justify-content: center; text-align: center; }
}

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}