/* Dot journey: starts in the hero. Loaded after the site CSS. */

.journey__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.journey__poster { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
html:not(.js) .journey__poster { display: block; }

/* Hero, now the journey's first beat. Visible at once: no scroll-reveal delay. */
.beat--hero { position: relative; min-height: calc(100svh - var(--above, calc(var(--nav-h, 64px) + 1px))); justify-content: center; text-align: center; }
.hero__in {
  position: relative; z-index: 2; width: 100%; max-width: 62rem; margin-inline: auto;
  animation: hero-in .9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__in .eyebrow { color: var(--mute-dark); }
.hero__in h1 {
  margin-top: 1.5rem; font-size: var(--step-display); font-weight: 300;
  letter-spacing: -.045em; line-height: 1.08; color: var(--paper);
  text-shadow: 0 0 2.5rem #0b0d10;
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }
.hero__cta .alink { color: var(--paper); }
.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 2;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  text-align: center; color: var(--mute-dark);
}
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The progress rail waits until the story proper begins. */
.journey.in-hero .journey__rail,
.journey.leaving .journey__rail { opacity: 0; pointer-events: none; }
/* While it is hidden it is also out of the keyboard's way (Tab went to seven invisible links first). */
.journey__rail { visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.journey.live:not(.in-hero):not(.leaving) .journey__rail { visibility: visible; transition-delay: 0s; }
/* A rail link lands its step filling the screen, as scrolling to it does (cancels the header's scroll
   padding, which pushed the step's buttons under the rail). */
.journey__flow > .beat { scroll-margin-top: calc(-1 * (var(--nav-h, 64px) + .5rem)); }
/* Small links get a finger-sized hit area without changing the layout. */
.journey__rail a, .journey .alink { position: relative; }
.journey__rail a::after, .journey .alink::after { content: ""; position: absolute; inset: -.6rem -.25rem; }

/* Reduced motion: keep the stage and draw still frames, one per beat. */
@media (prefers-reduced-motion: reduce) {
  .journey__stage { position: sticky; height: 100svh; }
  .journey__flow { margin-top: -100svh; }
  .journey__canvas { display: block; }
  .hero__in { animation: none; }
}

/* ?t=…&shot=1: headless screenshot mode (see journey-core.js). */
html.jshot .announce, html.jshot .foot, html.jshot .trail, html.jshot main > section:not(.journey) { display: none; }
html.jshot .journey__stage { position: fixed; inset: 0; height: 100vh; background: var(--void); }
html.jshot .journey__flow > .beat { display: none; }
html.jshot *, html.jshot *::before, html.jshot *::after { transition: none !important; animation-duration: 0s !important; }
html.jshot .journey__flow > .beat.is-shot { display: flex; position: fixed; inset: 0; z-index: 3; min-height: 100vh; }