/* ==========================================================================
   The endless ride — home page only.
   One vertical line runs the whole page. A train sits fixed at mid-screen;
   the track fills white up to it, stations light as it passes, and the page
   loops back to the departure when it runs out.

   Without JS every segment is drawn and every station lit (--f: 1, .lit).
   JS adds html.ride-on, which dims what hasn't been reached yet.
   ========================================================================== */

.ride {
  --rail: clamp(2.75rem, 6vw, 4.5rem);   /* column the line runs in */
  --dot: 0.875rem;
  --dot-y: 0.7rem;                        /* station marker aligns with first text line */
  position: relative;
}

/* --------------------------------------------------------------------------
   Stations
   -------------------------------------------------------------------------- */

.st {
  --f: 1;
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.st > .body { grid-column: 2; min-width: 0; }

/* track: dim rail underneath, white fill on top, scaled by --f */
.trk {
  position: absolute;
  left: calc(var(--dot) / 2);
  top: 0;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
}
.trk::before,
.trk::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  border-left: var(--w, 2px) var(--style, solid) var(--rule-strong);
  transform: translateX(-50%);
}
.trk::after {
  border-left-color: var(--ink);
  /* clip, not scale, so dotted segments keep their dots while filling */
  clip-path: inset(0 -4px calc((1 - var(--f)) * 100%) -4px);
}
.st:first-child > .trk { top: calc(-1 * clamp(2rem, 6vw, 4rem)); }

.st.origin  { --style: dotted; }
.st.systems { --w: 6px; }

/* station marker */
.st > .mk {
  position: absolute;
  left: 0;
  top: var(--dot-y);
  width: var(--dot);
  height: var(--dot);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
  transform: translateY(-50%);
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  z-index: 1;
}
.st.transfer > .mk { height: 1.75rem; top: calc(var(--dot-y) - 0.4375rem); transform: none; border-radius: 999px; }
.st.terminus > .mk,
.st.hub > .mk {
  width: 1.375rem;
  height: 1.375rem;
  left: -0.25rem;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--ink);
}

/* lit = the train has passed */
.st.lit > .mk { background: var(--ink); }
.st.hub.lit > .mk, .st.terminus.lit > .mk { background: var(--ink); }

html.ride-on .st:not(.lit) > .mk { border-color: var(--rule-strong); }
html.ride-on .st .body { transition: color 0.4s var(--ease-out), opacity 0.4s var(--ease-out); }
html.ride-on .st:not(.lit) .body { opacity: 0.66; }

/* --------------------------------------------------------------------------
   Station content
   -------------------------------------------------------------------------- */

.st time,
.st .yr {
  display: block;
  font-family: var(--mono);
  font-stretch: 75%;
  font-weight: 500;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
}

.st h3 {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.st .role { color: var(--ink-2); margin-top: 0.25rem; }
.st p { color: var(--ink-2); max-width: 62ch; }
.st h3 + p { margin-top: 0.5rem; }

.st.timeline .body {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  gap: 0.25rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
}
.st.timeline time { margin-bottom: 0; }

/* hubs open a section of the line */
.st.hub .body > h2,
.st.terminus .body > h2 {
  font-family: var(--mono);
  font-stretch: 75%;
  font-weight: 500;
  font-size: clamp(2.5rem, 7.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.st.hub .body > p { margin-top: 1rem; }
.st.hub .body > .more { margin-top: 1rem; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
}
.more:hover { text-decoration-color: var(--ink); }
.more svg { width: 1.1rem; transition: transform 0.3s var(--ease-out); }
.more:hover svg { transform: translateX(0.3rem); }

.st .here { margin-top: 1rem; }

.st .stack { margin-top: 0.75rem; }

/* --------------------------------------------------------------------------
   Photos — unmasked as the train reaches them
   -------------------------------------------------------------------------- */

.ride-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: 2rem;
}
.ride-photos .proof { --r: 1; }
.ride-photos .proof:nth-child(even) { margin-top: clamp(2rem, 8vw, 6rem); }
.ride-photos .proof .frame {
  clip-path: inset(0 0 calc((1 - var(--r)) * 100%) 0);
}

/* --------------------------------------------------------------------------
   Coffee
   -------------------------------------------------------------------------- */

.st .spec { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Contact — the end of the line
   -------------------------------------------------------------------------- */

.st.terminus .contacts { margin-top: 1.5rem; }

.loop-note {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.loop-note svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   The train — fixed at mid-screen, over the line
   -------------------------------------------------------------------------- */

.train {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 5;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.train.on { opacity: 1; }

.train .car {
  display: block;
  /* two square-ended cars and a coupling: nothing in the legend uses this shape */
  width: 0.875rem;
  height: 2.5rem;
  background: linear-gradient(var(--ink) 0 44%, var(--bg) 44% 56%, var(--ink) 56% 100%);
  outline: 3px solid var(--bg);
  flex-shrink: 0;
}

/* the prompt in the top bar is the readout: it shows where the train is */
.wordmark {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.pwd { font-weight: inherit; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .pwd.flip { display: inline-block; animation: flip 0.32s var(--ease-out); }
}
@keyframes flip {
  from { clip-path: inset(100% 0 0 0); transform: translateY(0.3em); }
  to   { clip-path: inset(0); transform: none; }
}

/* --------------------------------------------------------------------------
   Loop clone
   -------------------------------------------------------------------------- */

.ride-clone { pointer-events: none; }

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .ride { --rail: 2.25rem; }
  .st .contacts li { margin-bottom: 0.5rem; }
  .st .contacts a { flex-direction: column; gap: 0; }
  .st .contacts a .v { overflow-wrap: anywhere; }
  .wordmark.has-pwd .who { display: none; }
  .st.timeline .body { grid-template-columns: 1fr; }
  .st.timeline time { margin-bottom: 0.5rem; }
  .ride-photos { grid-template-columns: 1fr; }
  .ride-photos .proof:nth-child(even) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ride-photos .proof .frame { clip-path: none; }
  html.ride-on .st .body,
  .st > .mk { transition-duration: 0.01s; }
}

/* the departure fills the screen so the loop clone can stand in for it seamlessly */
.hero { min-height: 100svh; align-content: center; padding-block: clamp(3rem, 8vw, 6rem); }
.ride { margin-top: clamp(2rem, 6vw, 4rem); }

.st.terminus > .trk { bottom: auto; height: var(--dot-y); }

.st.terminus .meta { margin-top: 1.5rem; }

/* the who-wrapper is a span too; keep the name white like every other page */
.wordmark .who { color: var(--ink); }
.wordmark .who span { color: var(--ink-3); }