/* read.css — the motion system for the formation read.
 *
 * Measured 2026-09-20: 44 people reached /join and 11 reached /assessment.
 * Three in four turned around at the moment of highest intent. The page showed
 * all twenty questions at once, every radio required, on a screen that is a
 * phone 68% of the time. That is a wall, and motion laid over a wall is a wall.
 *
 * So the read is one question at a time, and the motion carries the three things
 * a person needs to know and currently cannot see: where they are, that their
 * choice registered, and that this is going somewhere.
 *
 * TIMING IS DEFINED ONCE. Twenty questions means every duration is paid twenty
 * times, so nothing here delays a choice. Feedback fires on the press. The
 * transition happens after the answer is already recorded.
 */
:root{
  --t-quick: 120ms;   /* feedback: the press landed */
  --t-base:  220ms;   /* state: one question leaving, the next arriving */
  --t-slow:  420ms;   /* progression: the bar, the finish */
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-in:  cubic-bezier(.55,0,1,.45);
  --lift: 10px;       /* primary motion travel */
  --lift-2: 4px;      /* secondary motion travel, deliberately smaller */
}

/* ── progression: where am I ─────────────────────────────────────────── */
.rd-progress{position:sticky;top:0;z-index:5;padding:10px 0 12px;
  background:linear-gradient(to bottom,var(--bg) 70%,transparent)}
.rd-bar{height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.rd-fill{height:100%;width:0;border-radius:2px;background:var(--gold);
  transition:width var(--t-slow) var(--e-out)}
.rd-count{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:8px;font-size:.82rem;color:var(--ink-3)}
.rd-count b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}

/* ── state: a question entering and leaving ──────────────────────────── */
.rd-on .q{display:none}
.rd-on .q.is-live{display:block;animation:rd-enter var(--t-base) var(--e-out) both}
.rd-on .q.is-leaving{display:block;animation:rd-leave var(--t-base) var(--e-in) both;
  pointer-events:none}
@keyframes rd-enter{from{opacity:0;transform:translateY(var(--lift))}
  to{opacity:1;transform:none}}
@keyframes rd-leave{from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(calc(var(--lift) * -1))}}

/* ── feedback: the choice registered ─────────────────────────────────── */
.rd-on .opt-l{transition:border-color var(--t-quick) var(--e-out),
  background var(--t-quick) var(--e-out), transform var(--t-quick) var(--e-out)}
.rd-on .opt-l:active{transform:scale(.988)}
.rd-on .opt-l.is-chosen{border-color:var(--gold);background:var(--slate-ghost);
  animation:rd-chosen var(--t-quick) var(--e-out)}
@keyframes rd-chosen{0%{transform:scale(1)}45%{transform:scale(1.014)}100%{transform:scale(1)}}
/* the others step back, so the chosen one carries more weight than the rest */
.rd-on .opts.has-choice .opt-l:not(.is-chosen){opacity:.55;
  transition:opacity var(--t-base) var(--e-out)}

/* ── state: the preamble recedes once the read is underway ───────────
 * Measured at 375x812: the eyebrow, heading and lede pushed question one to
 * roughly 700px down an 812px screen, and would have done it twenty times.
 * Once the first answer is in, the instructions have done their job.
 */
.rd-on-intro .rd-fade{overflow:hidden;
  transition:max-height var(--t-slow) var(--e-out), opacity var(--t-base) var(--e-in),
             margin var(--t-slow) var(--e-out);
  max-height:60vh;opacity:1}
.rd-on-intro.rd-shrunk .rd-fade{max-height:0;opacity:0;margin-top:0;margin-bottom:0}
.rd-form{margin-top:28px}
/* the section's own padding is part of the preamble once the preamble is gone */
.rd-on-intro{transition:padding var(--t-slow) var(--e-out)}
.rd-on-intro.rd-shrunk{padding-top:10px}
.rd-on-intro.rd-shrunk .rd-form{margin-top:0;transition:margin var(--t-slow) var(--e-out)}

/* ── hierarchy: primary moves further than secondary ─────────────────── */
.rd-nav{display:flex;gap:12px;align-items:center;margin-top:20px}
.rd-back{background:none;border:0;padding:8px 2px;color:var(--ink-3);
  font:inherit;cursor:pointer;transition:transform var(--t-quick) var(--e-out),
  color var(--t-quick) var(--e-out)}
.rd-back:hover{color:var(--ink-2);transform:translateX(calc(var(--lift-2) * -1))}
.rd-on .progressline{animation:rd-enter var(--t-slow) var(--e-out) both}

/* ── the honest reduced-motion path: still one at a time, no travel ──── */
@media (prefers-reduced-motion: reduce){
  .rd-on .q.is-live,.rd-on .q.is-leaving,.rd-on .progressline{animation:none}
  .rd-on .q.is-leaving{display:none}
  .rd-fill{transition:none}
  .rd-on .opt-l,.rd-on .opt-l.is-chosen{transition:none;animation:none}
  .rd-on .opt-l:active{transform:none}
  .rd-on .opts.has-choice .opt-l:not(.is-chosen){transition:none}
  .rd-back:hover{transform:none}
  .rd-on-intro .rd-fade{transition:none}
  .rd-on-intro,.rd-on-intro.rd-shrunk .rd-form{transition:none}
}

/* 2026-11-10 · on a phone the first question's choices began at y=776 of an
   812px screen: the intro took the whole first view. Every later question
   already scrolls itself into place, so this is only about question one. */
@media (max-width:640px){
  .rd-page{padding-top:18px}
  .rd-page h1{font-size:1.85rem;margin:.1em 0 .25em}
  .rd-page > .lede{font-size:1rem;line-height:1.45}
  .rd-page #rd-saves{font-size:.85rem;margin-top:6px}
}