/* ============================================================
   Origin — v5: origins section, discover invitation, rail
   ============================================================ */

/* ---------- discover invitation (bottom right, hero only) ---------- */
.discover {
  position: absolute;
  right: clamp(18px, 4vw, 46px);
  bottom: var(--space-8);
  text-align: right;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--faint);
  transition: opacity 800ms var(--ease);
  pointer-events: none;
}
.discover .em { color: var(--muted); }
.discover.gone { opacity: 0; }

/* ---------- the rail ---------- */
#rail {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
#rail.show { opacity: 1; pointer-events: auto; }
#rail button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#rail button::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--faint);
  transition: height 400ms var(--ease), background-color 300ms var(--ease), border-radius 400ms var(--ease);
}
#rail button:hover::before { background: var(--accent-soft); }
#rail button.active::before {
  height: 22px;
  border-radius: 3px;
  background: var(--accent);
}
#rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- origins: text left, the form assembles right ---------- */
.origins { position: relative; height: 440svh; }
.origins-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 8vw;
}
.origins-text h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.origin-phrase {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.2;
  color: var(--accent-deep);
  margin: var(--space-2) 0 0;
  min-height: 2.5em;
  max-width: 12ch;
  transition: opacity 260ms var(--ease), filter 260ms var(--ease), transform 380ms var(--ease);
}
.origin-phrase.out {
  opacity: 0;
  filter: blur(9px);
  transform: translateY(12px);
}

/* the coda keeps its place after the forms */
.coda-section { text-align: center; }
.coda-section .coda {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 34ch;
  text-wrap: balance;
}
.coda-section .coda strong { color: var(--ink); font-weight: 500; }

@media (max-width: 700px) {
  .origins-stage {
    align-items: flex-end;
    padding-bottom: 10svh;
  }
  .origin-phrase { min-height: 3.6em; }
  .discover { right: var(--space-4); bottom: var(--space-6); }
  #rail { right: 6px; gap: 10px; }
}