/* scenes/journey.css: the roadmap as a journey through the galaxy (agent R, round 2, R2-10).
   Owns: the /roadmap/ page body (.jr: the sticky sky, the head over it, the stops list built
   by frag_roadmap_columns, the HUD that js/scenes/journey.js adds) and the homepage teaser
   (.jr-teaser: the flight box, the next stops from frag_roadmap_counts, the destination line
   from frag_ea_strip).

   Two layouts, one list:
   - BASE (no JS, reduced motion, and the list's accessible shape): a vertical flight path.
     The establishing shot sits behind the head and fades out; the stops run down a lit line,
     each with its planet node, a big month and year, and a TARGET/ONGOING tag.
   - JOURNEY (JS + motion allowed): the sky is sticky behind the whole list, one stop per
     screen, cards alternating sides (odd stops left, the planet then flies by on the right).
     journey.js adds .is-flying to .jr and .is-active / .is-passed to the stops. */

:root {
  --jr-amber: var(--amber);
  --jr-line: rgba(var(--star-rgb), 0.28);
  --jr-card-bg: rgba(var(--void-rgb), 0.74);
}

/* ================================================================ base: the flight path */

.jr { position: relative; isolation: isolate; }
.jr-sky {
  position: absolute; left: 0; right: 0; top: 0; height: min(100vh, 900px); z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.jr-scene { position: absolute; inset: 0; background: var(--void); }
.jr-scene > .scene-poster { object-fit: cover; object-position: 50% 45%; }
.jr-head { position: relative; z-index: 1; }
.jr-head .page-lede { max-width: 40rem; }
.jr-cue { display: none; }

.jr-route {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + 3rem);
}
/* the flight path: lit from today, fading toward the far stops */
.jr-route::before {
  content: ""; position: absolute; top: 2.2rem; bottom: 3rem; left: calc(var(--gutter) + 0.95rem); width: 2px;
  background: linear-gradient(to bottom, var(--jr-amber), rgba(var(--machine-rgb), 0.55) 45%, rgba(var(--star-rgb), 0.18));
}
.jr-stops { display: grid; }
.jr-here, .jr-stop { position: relative; padding: 1.6rem 0 2.4rem; }
.jr-card { position: static; max-width: 40rem; }
.jr-node {
  position: absolute; left: -2.55rem; top: 2.25rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--jr-hue, var(--star));
  box-shadow: 0 0 0 4px var(--void), 0 0 14px var(--jr-hue, var(--star));
}
.jr-here .jr-node { --jr-hue: var(--saurian); }
.jr-stop.is-target .jr-node, .jr-stop.is-ongoing .jr-node {
  background: var(--void); border: 2px dashed var(--jr-hue, var(--star)); box-shadow: 0 0 0 4px var(--void);
}
.jr-stop.is-goal .jr-node {
  left: -2.75rem; top: 2.3rem; width: 22px; height: 22px; border-radius: 2px; transform: rotate(45deg);
  background: var(--jr-amber); box-shadow: 0 0 0 5px var(--void), 0 0 26px rgba(var(--machine-rgb), 0.9);
}

.jr-kicker {
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--star-rgb), 0.72);
}
.jr-num { color: var(--jr-amber); font-weight: 700; }
.jr-col::before { content: "·"; margin-right: 0.7em; color: rgba(var(--star-rgb), 0.4); }
.jr-pulse {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--saurian);
  box-shadow: 0 0 10px var(--saurian);
}
.jr-when { margin-top: 0.55rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; }
.jr-when time {
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em;
  font-size: min(clamp(2.1rem, 4.2vw, 3.6rem), 8.6vw); line-height: 0.95; color: var(--ink);
}
.jr-tag {
  display: inline-block; padding: 0.32rem 0.55rem 0.28rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--star); border: 1px dashed rgba(var(--star-rgb), 0.6); line-height: 1;
}
.jr-title { margin-top: 0.85rem; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.jr-detail { margin-top: 0.5rem; color: var(--ink-2); font-size: 1.04rem; max-width: 30rem; }

.jr-here .jr-when time { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--saurian); }
.jr-stop.is-goal .jr-when time { color: var(--jr-amber); font-size: min(clamp(2.8rem, 6vw, 5.2rem), 11vw); text-shadow: 0 0 34px rgba(var(--machine-rgb), 0.45); }
.jr-stop.is-goal .jr-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

/* ================================================================ journey: flying */

@media (prefers-reduced-motion: no-preference) {
  /* Q2: the negative margin sits on the head, not the sky, so the sky's margin box is a full
     screen tall and the sticky is pushed out with the end of the list. With it on the sky, the
     sky never left and sat behind the footer (planet and ship under the footer text). */
  .js .jr-sky {
    position: sticky; top: 0; height: 100vh; margin-bottom: 0; z-index: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  /* Q2: the sky's exit edge melts into the page instead of cutting straight across */
  .js .jr::after {
    /* spans the list's end: dark exactly where the sky stops, then eases back to the starfield */
    content: ""; position: absolute; left: 0; right: 0; bottom: -26vh; height: 60vh; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(var(--void-rgb), 0.8) 44%, rgba(var(--void-rgb), 0.96) 57%, rgba(var(--void-rgb), 0.55) 75%, transparent);
  }
  .js .jr-head {
    margin-top: -100vh;
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--head-h) + 3rem); padding-bottom: 6rem;
  }
  /* keep the title readable over the establishing shot */
  .js .jr-head::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 0; right: 20%; top: 0; bottom: 0;
    background: radial-gradient(ellipse 60% 55% at 45% 55%, rgba(var(--void-rgb), 0.72), transparent 72%);
  }
  .js .jr-cue {
    display: flex; align-items: center; gap: 0.9rem; margin-top: 2.6rem;
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--star-rgb), 0.7);
  }
  .js .jr-cue-line { position: relative; width: 1px; height: 40px; overflow: hidden; background: rgba(var(--star-rgb), 0.18); }
  .js .jr-cue-line::after {
    content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
    background: var(--jr-amber); animation: jr-cue 2.2s var(--ease-quart) infinite;
  }

  .js .jr-route { padding: 0 var(--gutter) 30vh; max-width: none; pointer-events: none; }
  .js .jr-route::before, .js .jr-node { display: none; }
  .js .jr-stops { display: block; }
  .js .jr-here, .js .jr-stop {
    min-height: 92vh; padding: 0; display: flex; align-items: center;
    max-width: var(--wrap); margin: 0 auto;
  }
  .js .jr-stop:nth-child(even) { justify-content: flex-end; }
  .js .jr-here { min-height: 100vh; }

  .js .jr-card {
    position: relative; pointer-events: auto;
    width: min(31rem, 42vw); max-width: none;
    padding: 1.5rem 1.7rem 1.65rem;
    background: linear-gradient(180deg, var(--jr-card-bg), rgba(var(--void-rgb), 0.58));
    border: 1px solid var(--hair);
    border-left: 2px solid var(--jr-hue, var(--star));
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out), border-color 400ms;
  }
  .js .jr-card::before {              /* HUD corner ticks */
    content: ""; position: absolute; inset: -1px; pointer-events: none; --tk: 10px;
    background:
      linear-gradient(var(--tick), var(--tick)) right top / var(--tk) 1px no-repeat,
      linear-gradient(var(--tick), var(--tick)) right top / 1px var(--tk) no-repeat,
      linear-gradient(var(--tick), var(--tick)) right bottom / var(--tk) 1px no-repeat,
      linear-gradient(var(--tick), var(--tick)) right bottom / 1px var(--tk) no-repeat;
  }
  .js .jr-stop:nth-child(even) .jr-card { border-left: 1px solid var(--hair); border-right: 2px solid var(--jr-hue, var(--star)); text-align: right; }
  .js .jr-stop:nth-child(even) .jr-card::before {
    background:
      linear-gradient(var(--tick), var(--tick)) left top / var(--tk) 1px no-repeat,
      linear-gradient(var(--tick), var(--tick)) left top / 1px var(--tk) no-repeat,
      linear-gradient(var(--tick), var(--tick)) left bottom / var(--tk) 1px no-repeat,
      linear-gradient(var(--tick), var(--tick)) left bottom / 1px var(--tk) no-repeat;
  }
  .js .jr-stop:nth-child(even) .jr-kicker, .js .jr-stop:nth-child(even) .jr-when { justify-content: flex-end; }
  .js .jr-stop:nth-child(even) .jr-detail { margin-left: auto; }
  .js .jr-here .jr-card { --jr-hue: var(--saurian); width: auto; padding: 1.1rem 1.5rem 1.2rem; }
  .js .jr-stop.is-goal .jr-card {
    width: min(38rem, 48vw);
    border-color: rgba(var(--machine-rgb), 0.55);
    background: linear-gradient(180deg, rgba(var(--void-rgb), 0.8), rgba(var(--void-rgb), 0.62));
    box-shadow: 0 0 60px -20px rgba(var(--machine-rgb), 0.5);
  }

  /* while the sky flies, only the stop at the centre is in focus */
  .jr.is-flying .jr-card { opacity: 0.2; transform: translateY(18px) scale(0.985); }
  .jr.is-flying .is-active > .jr-card { opacity: 1; transform: none; }
  .jr.is-flying .is-passed > .jr-card { opacity: 0.12; transform: translateY(-18px) scale(0.985); }
  .jr.is-flying .jr-stop.is-active .jr-when time { animation: jr-date 900ms var(--ease-out) both; }
}
@keyframes jr-cue { from { top: -40%; } to { top: 100%; } }
@keyframes jr-date { from { letter-spacing: 0.12em; opacity: 0; } to { letter-spacing: -0.005em; opacity: 1; } }

/* phones: the card rides at the bottom, the planet flies by above it */
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  .js .jr-here, .js .jr-stop { align-items: flex-end; padding-bottom: 9vh; min-height: 96vh; }
  .js .jr-stop:nth-child(even) { justify-content: flex-start; }
  .js .jr-card, .js .jr-stop.is-goal .jr-card { width: 100%; padding: 1.2rem 1.2rem 1.3rem; }
  .js .jr-stop:nth-child(even) .jr-card { text-align: left; border-right: 1px solid var(--hair); border-left: 2px solid var(--jr-hue, var(--star)); }
  .js .jr-stop:nth-child(even) .jr-kicker, .js .jr-stop:nth-child(even) .jr-when { justify-content: flex-start; }
  .js .jr-stop:nth-child(even) .jr-detail { margin-left: 0; }
  .js .jr-head { justify-content: flex-start; padding-top: calc(var(--head-h) + 4.5rem); }
  .js .jr-head::before { left: 0; right: 0; background: linear-gradient(to bottom, rgba(var(--void-rgb), 0.55), rgba(var(--void-rgb), 0.2) 70%, transparent); }
}

/* ================================================================ the HUD (journey.js) */

.jr-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.jr-tag3d, .jr-month {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  font-family: var(--font-mono); text-transform: uppercase; white-space: nowrap;
}
.jr-tag3d {
  font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink);
  padding: 0.3rem 0.5rem 0.25rem; border-left: 1px solid var(--jr-hue, var(--star));
  background: linear-gradient(90deg, rgba(var(--void-rgb), 0.6), transparent);
}
.jr-tag3d.is-left { border-left: 0; border-right: 1px solid var(--jr-hue, var(--star)); background: linear-gradient(270deg, rgba(var(--void-rgb), 0.6), transparent); }
.jr-tag3d b { color: var(--jr-hue, var(--star)); margin-right: 0.35em; }
.jr-tag3d.is-goal { color: var(--jr-amber); font-size: 0.78rem; }
.jr-month { font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(var(--star-rgb), 0.62); }
.jr-month.is-year { font-size: 0.9rem; font-weight: 700; color: var(--star); letter-spacing: 0.24em; }

/* the rail: the year of travel on the right edge */
.jr-rail {
  position: absolute; right: clamp(16px, 2.6vw, 44px); top: calc(var(--head-h) + 12vh); bottom: 14vh; width: 2px;
  opacity: 0; transition: opacity 600ms var(--ease-out);
  --p: 0;
}
.jr-rail.is-on { opacity: 1; }
.jr-rail-track, .jr-rail-fill { position: absolute; left: 0; top: 0; width: 1px; }
.jr-rail-track { bottom: 0; background: rgba(var(--star-rgb), 0.2); }
.jr-rail-fill { height: calc(var(--p) * 100%); width: 2px; left: -0.5px; background: linear-gradient(to bottom, rgba(var(--machine-rgb), 0.3), var(--jr-amber)); box-shadow: 0 0 10px rgba(var(--machine-rgb), 0.6); }
.jr-rail-tick { position: absolute; right: 0; top: calc(var(--y) * 100%); width: 5px; height: 1px; background: rgba(var(--star-rgb), 0.35); }
.jr-rail-tick.is-major { width: 9px; background: rgba(var(--star-rgb), 0.7); }
.jr-rail-tick[data-label]::after {
  content: attr(data-label); position: absolute; right: 16px; top: -0.45rem;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; white-space: nowrap; color: rgba(var(--star-rgb), 0.5);
}
.jr-rail-dot {
  position: absolute; left: 1px; top: calc(var(--y) * 100%);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  border: 1px solid var(--jr-hue, var(--star)); background: var(--void);
  pointer-events: auto; cursor: pointer; transition: background 300ms, box-shadow 300ms, transform 200ms;
}
.jr-rail-dot:hover { transform: scale(1.4); }
.jr-rail-dot.is-passed { background: var(--jr-hue, var(--star)); box-shadow: 0 0 10px var(--jr-hue, var(--star)); }
.jr-rail-dot.is-goal { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 1px; transform: rotate(45deg); border-color: var(--jr-amber); }
.jr-rail-dot.is-goal.is-passed { background: var(--jr-amber); }
.jr-rail-dot.is-here { border-color: var(--saurian); background: var(--saurian); }
.jr-rail-now {
  position: absolute; left: 0; top: calc(var(--p) * 100%);
  transform: translate(calc(-100% - 18px), -50%);
  padding: 0.3rem 0.5rem 0.25rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--on-amber); background: var(--jr-amber); white-space: nowrap;
}
@media (max-width: 899px) {
  /* phones and tablets: the rail runs across the top, under the header */
  .jr-rail { left: 16px; right: 16px; top: calc(var(--head-h) + 12px); bottom: auto; width: auto; height: 2px; }
  .jr-rail-track { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .jr-rail-fill { height: 2px; top: -0.5px; left: 0; width: calc(var(--p) * 100%); }
  .jr-rail-tick { right: auto; top: 0; left: calc(var(--y) * 100%); width: 1px; height: 5px; }
  .jr-rail-tick.is-major { height: 8px; width: 1px; }
  .jr-rail-tick[data-label]::after { display: none; }
  .jr-rail-dot { top: 0; left: calc(var(--y) * 100%); margin: -4px 0 0 -4.5px; }
  .jr-rail-dot.is-goal { margin: -6px 0 0 -6.5px; }
  .jr-rail-now { left: calc(var(--p) * 100%); top: 14px; transform: translateX(calc(var(--p) * -100%)); font-size: 0.6rem; }
  .jr-month:not(.is-year) { display: none; }
}
@media (max-width: 699px) {
  .jr-tag3d { display: none; }
}

/* ================================================================ homepage teaser */

.jr-teaser {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.jr-teaser-view { position: relative; }
.jr-teaser-view .jr-scene { position: relative; inset: auto; }
.jr-hitlink { position: absolute; inset: 0; z-index: 4; }
.jr-teaser-k { margin-bottom: 1rem; }
.jr-next { display: grid; border-top: 1px solid var(--hair); }
.jr-next-item {
  position: relative; padding: 1rem 0 1.05rem 1.1rem; border-bottom: 1px solid var(--hair);
}
.jr-next-item::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; bottom: 1.2rem; width: 2px; background: var(--jr-hue, var(--star));
  box-shadow: 0 0 10px var(--jr-hue, var(--star));
}
.jr-next-when { display: flex; align-items: center; gap: 0.7rem; color: rgba(var(--star-rgb), 0.8); }
.jr-next-when time { color: var(--ink); font-weight: 700; }
.jr-next-when .jr-tag { font-size: 0.55rem; padding: 0.24rem 0.4rem 0.2rem; }
.jr-next-title { display: block; margin-top: 0.3rem; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.jr-dest {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.2rem 1rem;
  margin-top: 1.4rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid rgba(var(--machine-rgb), 0.45);
  background: linear-gradient(90deg, rgba(var(--machine-rgb), 0.1), transparent 80%);
}
.jr-dest-k { grid-row: 1; color: var(--jr-amber); }
.jr-dest strong { grid-row: 2; grid-column: 1 / -1; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.jr-dest-when {
  grid-row: 1 / span 2; grid-column: 2; justify-self: end; align-self: center;
  font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; text-transform: uppercase; color: var(--jr-amber);
}
@media (max-width: 899px) { .jr-teaser { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .jr-dest { grid-template-columns: 1fr; }
  .jr-dest-when { grid-row: 3; grid-column: 1; justify-self: start; margin-top: 0.4rem; }
}