/* ==========================================================================
   PERPETUA – milestones.css
   --------------------------------------------------------------------------
   The interactive "Milestones" road on the milestones page: a vertical mars-red
   S-curve running down the page like a winding road, styled with the same
   "measured ground" language as the landing page's horizon line (a thin
   line with survey ticks), a small robot marker — the exact walker from the
   landing-page hero, reusing its own gait CSS from style.css — that runs to
   whichever node is clicked, and a detail card. Used by that page only, so it lives in
   its own file rather than the shared style.css. Uses the same design
   tokens (colours, type, spacing, easing) defined in css/style.css.
   ========================================================================== */

/* The hero here is the plain sub-page one (.hero--page.hero--compact, same
   as team.html and partners.html): dawn band and sunrise glow.
   Everything below it is the site's ordinary light ground, closed by the
   shared dusk band — so this file only has to style the road itself. */

/* Progressive enhancement: the interactive road only appears once JS has
   run (script.js sets the .js class on <html> synchronously); otherwise the
   plain fallback list carries the content. */
.milestones__interactive { display: none; }
.js .milestones__interactive { display: block; }
.js .milestones__fallback { display: none; }

.milestones__fallback {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: clamp(2rem, 4vw, 3rem);
}
.milestones__fallback-date {
  display: block;
  margin-bottom: 0.5rem;
  font: 500 var(--step--2) / 1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.milestones__fallback h3 {
  font: 400 var(--step-1) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.milestones__fallback p { color: var(--ink-soft); }
@media (max-width: 36em) {
  .milestones__fallback { grid-template-columns: 1fr; }
}

/* -- Section shell ------------------------------------------------------- */

/* The section is the page's only one, so it carries the shared `section--dusk`
   surface from style.css: sand under the hero, paper to read the road on, and
   the dusk band back into the footer at the bottom. Nothing to paint here. */
.section--milestones {
  overflow: clip;
  /* the walker's gait keyframes (in style.css) read --gait from an
     ancestor; the hero defines it for itself, so this section needs its
     own copy to animate the reused robot the same way. */
  --gait: 1.4s;
}
.section--milestones > * {
  position: relative;
  z-index: 1;
}

/* -- Layout: road on the left, detail card sticking alongside it -------- */

.milestones__layout {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.milestones__road-wrap {
  margin-inline: auto;
}
.milestones__road {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (min-width: 64em) {
  .milestones__layout {
    display: flex;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .milestones__road-wrap {
    flex: 0 0 auto;
    /* sized so the SVG's user-unit scale roughly matches the hero's own
       --walker-h, so the reused robot renders at close to the same size */
    width: min(28rem, 42%);
  }
  .milestone-card {
    flex: 1 1 0;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
@media (max-width: 63.99em) {
  .milestones__road-wrap {
    max-width: 28rem;
  }
}

/* -- Road: the mars-red route + the ground's measured-line treatment ---- */

.milestones__path {
  fill: none;
  stroke-linecap: round;
}
.milestones__path--base {
  stroke: var(--accent);
  stroke-opacity: 0.3;
  stroke-width: 5;
}
.milestones__path--progress {
  stroke: var(--accent);
  stroke-width: 5;
  filter: drop-shadow(0 1px 2px rgba(140, 59, 50, 0.35));
}
.milestones__arrow {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.milestones__road.is-revealed .milestones__arrow {
  opacity: 1;
}
/* survey ticks along the route, added by JS: the same idea as the hero's
   horizon line (a measured line of short perpendicular marks), bent to
   follow the curve instead of running straight. */
.milestones__ticks line {
  stroke: var(--midnight);
  stroke-opacity: 0.28;
  stroke-width: 1.5;
}

/* -- Milestone nodes -------------------------------------------------------- */

.milestone-node {
  cursor: pointer;
  outline: none;
}
.milestone-node__halo {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.milestone-node__dot {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 3;
  transition: fill 0.25s var(--ease-out), stroke-width 0.25s var(--ease-out), r 0.25s var(--ease-out);
}
.milestone-node__date {
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-soft);
  transition: fill 0.25s var(--ease-out);
}

.milestone-node:not(.milestone-node--minor):hover .milestone-node__halo,
.milestone-node:not(.milestone-node--minor):focus-visible .milestone-node__halo {
  opacity: 0.22;
  transform: scale(1.15);
}
.milestone-node:not(.milestone-node--minor):hover .milestone-node__dot,
.milestone-node:not(.milestone-node--minor):focus-visible .milestone-node__dot {
  stroke-width: 4;
}
.milestone-node:not(.milestone-node--minor):focus-visible .milestone-node__dot {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* All the not-yet-reached milestones: small static markers, not buttons —
   only "Sep. 26" (the one thing that's actually happened) stays fully
   interactive, above, unchanged. Their date keeps the same size as
   Sep. 26's; what sets them apart is the small title + description
   beside it (below), since there's no click here to reveal a card. */
.milestone-node--minor {
  cursor: default;
}
.milestone-node--minor .milestone-node__dot {
  stroke-width: 2;
}

/* Title beside a minor milestone's date, laid out with normal HTML text
   wrapping via <foreignObject>. */
.milestone-node__info-box {
  overflow: visible;
}
.milestone-node__info {
  font-family: var(--font-sans);
  text-wrap: pretty;
}
.milestone-node__info-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-soft);
}

.milestone-node.is-active .milestone-node__halo {
  opacity: 0.35;
  animation: milestone-pulse 2.4s var(--ease-out) infinite;
}
.milestone-node.is-active .milestone-node__dot {
  fill: var(--accent);
  stroke: var(--paper);
}
.milestone-node.is-active .milestone-node__date {
  fill: var(--ink);
}

@keyframes milestone-pulse {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50%      { opacity: 0.08; transform: scale(1.55); }
}

/* -- The small robot marker: the exact landing-page walker --------------- */

/* .walker (body, legs, joints, gait animation) is fully defined in
   style.css and reused verbatim in the markup here. On this light ground
   its own midnight fill is the right one, so nothing needs overriding —
   the eye, sky panel, gait, blink, resting pose and reduced-motion
   fallback all come for free. */
.milestones__robot {
  pointer-events: none;
}

/* -- Detail card ------------------------------------------------------------ */

.milestone-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  min-height: 12rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(247, 238, 225, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.milestone-card__media {
  overflow: hidden;
  border-radius: 3px;
}
.milestone-card__media img,
.milestone-card__media .media-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  object-fit: cover;
}
.milestone-card__media .media-placeholder {
  border-color: var(--line);
  background: var(--paper-2);
  color: var(--ink-faint);
}

/* Each photo is a real <button> so it's click- and keyboard-activatable
   to open the full-screen lightbox (see js/milestones.js). */
.milestone-card__photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.milestone-card__photo img {
  transition: transform 0.4s var(--ease-out);
}
.milestone-card__photo:hover img,
.milestone-card__photo:focus-visible img {
  transform: scale(1.04);
}
.milestone-card__photo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A milestone with more than one photo (e.g. Sep. 26's launch photos)
   shows a small 2-up gallery grid instead of one image. */
.milestone-card__media--gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.milestone-card__media--gallery .milestone-card__photo img {
  aspect-ratio: 3 / 2;
}
@media (max-width: 26em) {
  .milestone-card__media--gallery {
    grid-template-columns: 1fr;
  }
}
.milestone-card__title {
  margin-top: 0.5rem;
  font: 400 var(--step-2) / 1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.milestone-card__desc {
  margin-top: 0.75rem;
  max-width: 34em;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.milestone-card.is-updating .milestone-card__media,
.milestone-card.is-updating .milestone-card__body {
  opacity: 0;
  transform: translateY(6px);
}
.milestone-card__media,
.milestone-card__body {
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .milestone-node.is-active .milestone-node__halo { animation: none; }
  .milestone-card.is-updating .milestone-card__media,
  .milestone-card.is-updating .milestone-card__body { opacity: 1; transform: none; }
}


/* -- Full-screen photo lightbox -------------------------------------------- */

body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 500;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: rgba(10, 16, 24, 0.92);
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
  transition: transform 0.25s var(--ease-out);
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 501;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(247, 238, 225, 0.3);
  border-radius: 50%;
  background: rgba(29, 49, 69, 0.6);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(200, 111, 58, 0.35);
  border-color: var(--copper);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.lightbox__close {
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
}
.lightbox__nav--prev {
  left: clamp(0.5rem, 3vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--next {
  right: clamp(0.5rem, 3vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__nav--next:hover { transform: translateY(-50%) translateX(2px); }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 36em) {
  .lightbox__close,
  .lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img { transition: none; }
}