/* Galactism — Start page.
   One map is held in place while short texts scroll over it; the sections that follow are ordinary flow.
   Colors and type come from site.css. */

/* ---------- the pull-back ---------- */
.journey { position: relative; z-index: 1; background: var(--void); }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--void); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#earth { pointer-events: none; opacity: 0; transition: opacity 1.6s ease-out; }
#earth.on { opacity: 1; }
.steps { position: relative; margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.step { min-height: 100vh; display: flex; align-items: center; padding: 0 clamp(1rem, 5vw, 4.5rem); }
.step-hero { min-height: 100vh; min-height: 100svh; }
.step-last { min-height: 120vh; }

.cap {
  pointer-events: auto; width: min(25.5rem, 100%);
  padding: 1.3rem 1.5rem 1.4rem;
  background: rgba(10, 10, 15, 0.76); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-left: 1px solid var(--ember-dim);
}
.cap h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.55rem, 2.5vw, 1.95rem); line-height: 1.18; letter-spacing: 0.01em; color: var(--parchment); margin: 0 0 0.7rem; text-wrap: balance; }
.cap p { font-size: 1.04rem; line-height: 1.7; color: var(--bone); margin: 0 0 0.8rem; }
.cap p:last-child { margin-bottom: 0; }
.cap .fine { font-size: 0.9rem; line-height: 1.55; color: var(--ash); }
/* the one line that says what the blue on the map is */
.cap .keyline { display: flex; align-items: baseline; gap: 0.6rem; color: var(--parchment); }
.cap .keyline .swatch { width: 0.7rem; height: 0.7rem; position: relative; top: 0.05rem; box-shadow: 0 0 8px var(--machine); }
.cap .go, .claims .go { margin-top: 0.2rem; font-size: 1.02rem; }
.cap-quote blockquote { font-family: var(--display); font-weight: 300; font-style: italic; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.45; color: var(--ember-glow); margin: 1.1rem 0 0.9rem; }

/* hero: the wordmark beside the inner planets */
.hero-block { pointer-events: auto; max-width: 31rem; }
.start .hero-title { font-size: clamp(2.3rem, 4.6vw, 4.2rem); letter-spacing: 0.2em; text-indent: 0; margin: 0 0 1.7rem; animation-delay: 0.15s; animation-duration: 1.8s; }
.start .hero-line { margin: 0 0 1.8rem; animation-delay: 0.9s; animation-duration: 1.4s; }
.start .hero-epigraph { max-width: none; margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.55; animation-delay: 1.2s; animation-duration: 1.6s; }
.hero-second { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.12rem, 1.9vw, 1.36rem); line-height: 1.5; color: var(--ember-glow); max-width: 30rem; margin: 1.1rem 0 0; opacity: 0; animation: breatheIn 1.6s ease-out 1.7s forwards; }
.hero-block { text-shadow: 0 0 18px rgba(10, 10, 15, 0.9), 0 0 4px rgba(10, 10, 15, 0.8); }
.hero-cue { display: flex; align-items: center; gap: 0.85rem; margin: 2.8rem 0 0; font-family: var(--display); font-weight: 500; font-size: 1.12rem; letter-spacing: 0.08em; color: var(--ember-glow); opacity: 0; animation: breatheIn 1.6s ease-out 2.6s forwards; }
.hero-cue-line { display: block; width: 1px; height: 36px; background: linear-gradient(to bottom, var(--ember), transparent); animation: cueDrift 3s ease-in-out 3.5s infinite; }
@keyframes cueDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* instruments on the map */
.hud { position: absolute; inset: 0; pointer-events: none; font-variant-numeric: lining-nums tabular-nums; }
.scalebar { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; color: var(--ash); font-size: 0.88rem; text-shadow: 0 0 6px var(--void), 0 0 2px var(--void); }
.scalebar-rule { display: block; width: 100px; height: 6px; border: 1px solid rgba(212, 208, 200, 0.6); border-top: 0; }
.clock { position: absolute; right: clamp(0.6rem, 2.2vw, 1.4rem); top: calc(var(--nav-h) + 1rem); display: flex; flex-direction: column; align-items: flex-end; padding: 0.6rem 0.8rem 0.65rem; background: rgba(10, 10, 15, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.clock[hidden], .clock-split[hidden], .clock-note[hidden], .key[hidden] { display: none; }
.clock-note { color: var(--bone); font-size: 0.98rem; margin-top: 0.55rem; }
.clock-split { display: flex; flex-direction: column; align-items: inherit; }
/* before the first launch the same corner says what the blue lights are */
.key { position: absolute; right: clamp(1rem, 3vw, 2rem); top: calc(var(--nav-h) + 1.5rem); display: flex; align-items: center; gap: 0.5rem; color: var(--bone); font-size: 0.98rem; text-shadow: 0 0 8px var(--void), 0 0 2px var(--void); }
.clock-time { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: var(--parchment); }
.clock-sub { color: var(--ash); font-size: 0.84rem; margin-top: 0.3rem; }
.clock-row { display: flex; align-items: center; gap: 0.45rem; color: var(--bone); font-size: 0.98rem; margin-top: 0.55rem; }
.clock-row + .clock-row { margin-top: 0.15rem; }
.clock-row b { font-weight: 400; color: var(--parchment); min-width: 3.4ch; text-align: right; }
.swatch { width: 0.62rem; height: 0.62rem; border-radius: 50%; display: inline-block; flex: none; }
.sw-h { background: var(--human); } .sw-m { background: var(--machine); }

@media (max-width: 899px) {
  .step { padding: 0 0.85rem; }
  .cap { width: 100%; padding: 1.1rem 1.15rem 1.2rem; }
  .step-hero { align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 9vh; padding-bottom: 9svh; }
  .start .hero-title { letter-spacing: 0.17em; text-indent: 0.17em; margin-bottom: 1.2rem; }
  .start .hero-line { margin: 0 auto 1.3rem; }
  .start .hero-epigraph { margin: 0 auto; }
  .hero-second { margin: 0.7rem auto 0; max-width: 19rem; }
  .hero-cue { justify-content: center; margin-top: 1.7rem; }
  .hero-cue-line { height: 26px; }
  .scalebar { bottom: auto; top: calc(var(--nav-h) + 0.8rem); right: 0.85rem; font-size: 0.82rem; }
  .scalebar-rule { height: 5px; }
  .clock { right: auto; left: 0.5rem; top: calc(var(--nav-h) + 0.45rem); align-items: flex-start; padding: 0.4rem 0.6rem 0.45rem; }
  .clock-time { font-size: 1.5rem; }
  .clock-sub { font-size: 0.78rem; margin-top: 0.15rem; }
  .clock-row { font-size: 0.9rem; margin-top: 0.3rem; }
  .clock-sub:last-child { display: none; }
  .clock-note { font-size: 0.9rem; margin-top: 0.3rem; }
  .key { right: auto; left: 0.85rem; top: calc(var(--nav-h) + 0.8rem); font-size: 0.9rem; }
}

/* ---------- after the map ---------- */
.after { position: relative; z-index: 1; max-width: 62rem; margin: 0 auto; padding: clamp(4.5rem, 11vw, 8.5rem) clamp(1.25rem, 4vw, 2rem) 0; }
.after-head { max-width: 40rem; margin: 0 0 2.6rem; }
.after .section-heading { text-align: left; margin: 0 0 1.2rem; }
.after-head p { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.22rem, 2.4vw, 1.48rem); line-height: 1.6; color: var(--ash); margin: 0; }

.claims { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.claims li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.9rem 3rem; padding: 2rem 0 2.1rem; border-bottom: 1px solid var(--line-soft); }
.claims h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 1.9rem); line-height: 1.2; letter-spacing: 0.01em; color: var(--parchment); margin: 0; text-wrap: balance; }
.claims p { font-size: clamp(1.03rem, 1.9vw, 1.12rem); line-height: 1.8; color: var(--bone); margin: 0 0 0.7rem; }
.claims p:last-child { margin-bottom: 0; }

.after-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.9rem; margin: 2.8rem 0 0; }
.after-actions.center { justify-content: center; }
.after-actions .quiet { font-size: 1.05rem; }

.after-question { max-width: 46rem; text-align: center; }
blockquote.question { font-family: var(--display); font-weight: 300; font-style: italic; font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.42; color: var(--ember-glow); margin: 0 auto 2.6rem; text-wrap: balance; }
.after-text { max-width: 36rem; margin: 0 auto; text-align: left; }
.after-text p { font-size: clamp(1.05rem, 2vw, 1.14rem); line-height: 1.85; color: var(--bone); margin: 0 0 1.4rem; }

/* the turn from the map to the argument: one column of plain text under its heading */
.after-push .after-text, .after-unknown { max-width: 40rem; margin: 0; }
.after-unknown { margin-top: 2.6rem; }
.after-unknown p { color: var(--ash); margin: 0; }
.after-unknown strong { font-weight: 500; color: var(--ember-glow); }

.toc.index { max-width: 46rem; }
.toc.index a { grid-template-columns: 10.5rem 1fr; }
.toc.index .toc-a { max-width: none; text-align: left; font-size: 1rem; }
@media (max-width: 560px) { .toc.index a { grid-template-columns: 1fr; } }
.start .footer { padding-top: 6rem; }

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

@media (max-width: 720px) {
  .claims li { grid-template-columns: 1fr; padding: 1.6rem 0 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue, .hero-second { animation: none; opacity: 1; }
  #earth { transition: none; }
  .hero-cue-line { animation: none; }
}