/* The landing: the first screen and the ride. */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.landing .nav { position: fixed; transition: opacity 0.4s var(--ease); }
.landing .nav[data-dim] { opacity: 0; pointer-events: none; }
.landing .nav[data-dim]:focus-within { opacity: 1; pointer-events: auto; }

.ride-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
.ride-on .ride-canvas { display: block; }
.ride { position: relative; z-index: 1; }

/* ---------- first screen ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  padding-inline: calc(var(--gutter) + clamp(0px, 3vw, 48px)) var(--gutter);
  align-items: center;
}
.ride-on .hero-track { height: 230vh; }
.ride-on .hero { position: sticky; top: 0; height: 100vh; height: 100svh; }
.hero-copy { width: 100%; max-width: 720px; margin-top: -3vh; }
.hero-line { color: rgba(255, 255, 255, 0.78); font-size: var(--t-lg); line-height: 1.4; margin-bottom: clamp(36px, 6.4vh, 64px); }
.hero-art { align-self: stretch; margin: 15vh -1vw 6vh 2vw; }

.job-form { width: 100%; }
.job-line { position: relative; border-bottom: 1px solid var(--line-strong); padding-bottom: clamp(14px, 2.4vh, 24px); }
.job-line:focus-within { border-bottom-color: rgba(255, 255, 255, 0.7); }
.job-input, .job-mirror {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  font-family: var(--voice); font-style: italic; font-weight: 500; font-size: var(--t-voice); line-height: 1.24; letter-spacing: -0.012em;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4;
}
.job-mirror { display: none; min-height: calc(2 * 1.24em); }
.job-input { resize: none; outline: none; min-height: calc(2 * 1.24em); caret-color: var(--ink); }
.job-input::selection { background: rgba(255, 255, 255, 0.9); color: #000; }
.js .job-mirror { display: block; pointer-events: none; }
.js .job-input { position: absolute; inset: 0; height: calc(100% - clamp(14px, 2.4vh, 24px)); min-height: 0; color: transparent; overflow: hidden; }
.job-caret { display: inline-block; width: 0.06em; min-width: 2px; height: 0.95em; margin-left: 0.06em; background: var(--ink); vertical-align: -0.12em; }
.job-line:focus-within .job-caret { visibility: hidden; }

.job-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 22px; }
.try-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding-top: 14px; font-size: 15px; }
.try-label { color: var(--ink-3); margin-right: -4px; }
.try { background: none; border: 0; padding: 0; color: rgba(255, 255, 255, 0.72); cursor: pointer; transition: color 0.2s; }
.try:hover, .try[aria-pressed='true'] { color: var(--ink); }
.btn-send { flex: none; }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--ink-3); font-size: var(--t-xs); }
.scroll-cue i { display: block; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.4); }
.send-copy { display: none; }

/* ---------- stops ---------- */
.stop { position: relative; padding-block: clamp(56px, 10vh, 120px); }
.stop + .stop { border-top: 1px solid var(--line); }
.ride-on .stop-turn { border-top: 0; }
.stop-copy { display: grid; gap: 18px; align-content: start; }
.stop-copy > * { max-width: 560px; }
.stop-title { font-size: var(--t-3xl); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.stop-text { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.55; }
.stop-note { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.55; }
.stop-job { font-size: var(--t-2xl); line-height: 1.3; color: var(--ink); }

.rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; font-size: var(--t-md); }
.rules li { padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.rules li:first-child { border-top: 1px solid var(--line); }
.limits { margin-top: 6px; font-size: var(--t-md); }
.limits > dt, .limits > dd { transition: color 0.3s var(--ease); }
.fee-choices { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.fee-choices li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fee-choices li:first-child { border-top: 1px solid var(--line); }
.fork-public, .fork-private { font-size: var(--t-md); }

/* With scripts: each stop is a stretch of scroll, its words hold still while the scene moves. */
.ride-on .stop:not(.stop-turn) { height: var(--len, 180vh); padding: 0; border: 0; }
.ride-on .stop:not(.stop-turn) .stop-copy {
  position: sticky; top: 0; height: 100vh; height: 100svh; align-content: center;
  opacity: var(--o, 0); transform: translateY(var(--y, 0px)); will-change: opacity, transform;
}
.ride-on .stop-travel { --len: 150vh; }
.ride-on .stop-understood { --len: 200vh; }
.ride-on .stop-limits { --len: 200vh; }
.ride-on .stop-fork { --len: 210vh; }
.ride-on .stop-arrival { --len: 180vh; }
.ride-on .stop-done { --len: 240vh; }
.ride-on .stop-done.scene-flight { --len: 340vh; }
.ride-on .stop-fee { --len: 200vh; }
.ride-on .stop-copy > * { max-width: 470px; }
.ride-on .send-copy { display: grid; gap: 14px; position: absolute; left: calc(var(--gutter) + clamp(0px, 3vw, 48px)); top: 50%; transform: translateY(calc(-50% + var(--y, 0px))); max-width: 470px; opacity: var(--o, 0); pointer-events: none; }
.ride-on .rules li, .ride-on .limits > dt, .ride-on .limits > dd, .ride-on .fee-choices li { transition: opacity 0.35s var(--ease), color 0.35s var(--ease); }
.ride-on .rules li[data-off], .ride-on .fee-choices li[data-off] { opacity: 0.18; }
.ride-on .limits > [data-off] { color: rgba(255, 255, 255, 0.2); }

/* ---------- your turn ---------- */
.stop-turn { padding-block: clamp(120px, 22vh, 220px) clamp(80px, 14vh, 140px); }
.turn { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-inline: calc(var(--gutter) + clamp(0px, 3vw, 48px)) var(--gutter); max-width: none; }
.turn-copy { display: grid; gap: 22px; }
.turn-copy .job-form { margin-top: 18px; }
.turn-copy .token-full { margin-top: 18px; }
.turn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; }
.turn-stats { margin-top: 28px; }
.activity { align-self: end; max-width: 480px; justify-self: end; width: 100%; position: relative; z-index: 1; }
.activity-title { font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); margin-bottom: 8px; }
.activity .feed-item { font-size: var(--t-sm); }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: 42vh auto; align-items: start; padding-inline: var(--gutter); }
  .hero-art { grid-row: 1; margin: calc(var(--nav-h) - 8px) 0 0; }
  .hero-copy { grid-row: 2; padding-top: 0; }
  .hero-line { font-size: var(--t-md); margin-bottom: 22px; }
  .job-row { margin-top: 16px; }
  .try-row { gap: 6px 18px; font-size: 14px; padding-top: 10px; }
  .btn-send { width: 50px; height: 50px; }
  .scroll-cue { bottom: 12px; }
  .ride-on .stop:not(.stop-turn) .stop-copy { align-content: end; padding-bottom: 9vh; }
  .ride-on .stop-copy > * { max-width: none; }
  .ride-on .send-copy { top: auto; bottom: 9vh; transform: translateY(var(--y, 0px)); right: var(--gutter); }
  .stop-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .stop-text { font-size: var(--t-md); }
  .turn { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .activity { justify-self: stretch; max-width: none; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .hero { grid-template-rows: 34vh auto; }
}

/* Reduced motion: the same words, the scene as still frames. */
@media (prefers-reduced-motion: reduce) {
  .ride-on .stop:not(.stop-turn) .stop-copy { transform: none; }
}

/* the plain line of links under the last screen's buttons */
.turn-read { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; margin-top: var(--s-5, 20px); max-width: 46ch; }
.turn-read .link { color: var(--ink-1, #fff); }