/* The Mission Log: the milestone posts as a vertical timeline on the home page.
 * Markup: templates/partials/mission-log.html (the `milestones` list, oldest first, built by
 * ssg/lib/posts.js), included from pages/index.html.
 *
 * Phone: a rail down the left edge with a glowing node per entry. From 64em: the rail moves to the
 * middle and entries alternate sides. Motion is an extra: where the browser supports scroll-driven
 * animation each entry rises into view as it arrives, and everyone else (and anyone who asks for
 * reduced motion) simply sees the finished timeline. Each card is one big tap target: the title
 * link stretches over it.
 */

.mission__more { margin: var(--space-7) 0 0; }

/* Off-screen until scrolled near; the size is a stand-in until first rendered (see crew.css); it is
   the last section, so its estimate only affects the scrollbar, not where an anchor lands. */
.mission { content-visibility: auto; contain-intrinsic-size: auto 125rem; }
@media (min-width: 40em) { .mission { contain-intrinsic-size: auto 145rem; } }
@media (min-width: 64em) { .mission { contain-intrinsic-size: auto 132rem; } }
@media (min-width: 96em) { .mission { contain-intrinsic-size: auto 145rem; } }
.mission-log {
  --rail: 0.25rem;                  /* the line's thickness */
  --node: 1.25rem;                  /* a node's diameter */
  --gap: var(--space-6);            /* rail to card */
  position: relative; margin: var(--space-7) 0 0; padding: 0 0 0 calc(var(--node) + var(--gap)); list-style: none;
}
.mission-log::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc((var(--node) - var(--rail)) / 2); width: var(--rail);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--dusk-violet), var(--dusk-rose) 55%, var(--amber-400));
  box-shadow: 0 0 18px rgb(255 159 61 / 0.35);
}
.mission-log__item { position: relative; }
.mission-log__item + .mission-log__item { margin-top: var(--space-7); }

.mission-log__node {
  position: absolute; top: var(--space-5); left: calc(-1 * (var(--node) + var(--gap)));
  width: var(--node); aspect-ratio: 1; border-radius: 50%;
  background: var(--amber-300); border: 0.25rem solid var(--night-900);
  box-shadow: 0 0 0 0.125rem var(--amber-400), var(--glow-amber);
}
.mission-log__item--next { margin-bottom: 0; }
.mission-log__node--next { background: var(--night-900); box-shadow: 0 0 0 0.125rem var(--dusk-violet); }
.mission-log__next { margin: 0; padding-block: var(--space-3); font: 500 var(--text-sm) / 1.2 var(--font-pixel); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.mission-entry { position: relative; overflow: hidden; }
.mission-entry__cover {
  width: calc(100% + 2 * var(--space-5)); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  background: var(--bg-deep);
}
.mission-entry > picture { display: contents; }
.mission-entry__body { display: grid; gap: var(--space-3); }
.mission-entry__date { margin: 0; font: 600 var(--text-sm) / 1.4 var(--font-pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mission-entry__title { margin: 0; font-size: var(--text-xl); }
.mission-entry__link { color: var(--text); text-decoration: none; }
.mission-entry__link:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
.mission-entry__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mission-entry:has(.mission-entry__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.mission-entry__link:focus-visible { outline-color: transparent; } /* the card carries the ring instead (forced-colours still draws it) */
.mission-entry__summary { margin: 0; color: var(--text-muted); }

/* Wide screens: rail down the middle, entries alternating left and right */
@media (min-width: 64em) {
  .mission-log { --gap: var(--space-7); padding-left: 0; }
  .mission-log::before { left: calc(50% - var(--rail) / 2); }
  .mission-log__item { width: calc(50% - var(--gap) - var(--node) / 2); }
  .mission-log__item:nth-child(even) { margin-left: auto; }
  .mission-log__item:nth-child(odd) .mission-log__node { left: calc(100% + var(--gap)); }
  .mission-log__item:nth-child(even) .mission-log__node { left: calc(-1 * (var(--node) + var(--gap))); }
  .mission-log__item:nth-child(odd) .mission-log__next { text-align: end; }
}

/* Each entry rises into view as it scrolls in (browsers with scroll-driven animation only) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mission-log__item {
      animation: mission-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .mission-log__node--next { animation: mission-pulse 3.5s ease-in-out infinite; }
  }
}
@keyframes mission-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes mission-pulse { 50% { box-shadow: 0 0 0 0.125rem var(--amber-400), var(--glow-amber); } }

@media (forced-colors: active) {
  .mission-log::before { background: CanvasText; box-shadow: none; }
  .mission-log__node { background: CanvasText; border-color: Canvas; box-shadow: none; }
  .mission-log__node--next { background: Canvas; border-color: CanvasText; }
}