/* Public homepage — scoped, design-system-token-based.
   Ported from the approved `desktop-homepage` prototype: a horizontal
   journey-map top nav (the stork glides to the active node and faces its
   direction of travel) above one scrolling page of sections. Colors, spacing,
   type, radii, and shadows all come from the vendored DS tokens
   (/static/design-system/styles.css); a few map geometry values are bespoke. */

:root { --hp-top-h: 116px; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--hp-top-h);
}

.hp-body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
}

/* Skip link — first in tab order, revealed on focus. */
.hp-skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 40;
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  transition: top var(--duration-fast) var(--ease-standard);
}
.hp-skip:focus { top: var(--space-3); color: var(--color-ink); }

/* ---- Sticky top journey-map nav ---- */
.hp-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  height: var(--hp-top-h);
  padding: 0 var(--space-8);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}

.hp-top__brand { height: 24px; flex-shrink: 0; }

.hp-map {
  position: relative;
  flex: 1;
  height: 100%;
  /* JS enhancement writes these as you scroll; these are the at-rest defaults
     (first node active) so the map is correct with JS disabled. */
  --stork-left: 5%;
  --done-width: 0%;
}

.hp-map__line {
  position: absolute;
  top: 56%;
  left: 5%;
  right: 5%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--color-line);
}
.hp-map__line--done {
  right: auto;
  width: var(--done-width);
  background: var(--color-accent);
  transition: width 0.45s var(--ease-standard);
}

.hp-map__node {
  position: absolute;
  top: 56%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.hp-map__node:hover { color: inherit; }
.hp-map__node[data-index="0"] { left: 5%; }
.hp-map__node[data-index="1"] { left: 23%; }
.hp-map__node[data-index="2"] { left: 41%; }
.hp-map__node[data-index="3"] { left: 59%; }
.hp-map__node[data-index="4"] { left: 77%; }
.hp-map__node[data-index="5"] { left: 95%; }

.hp-map__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-line);
  transition: background 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard),
    box-shadow 0.2s var(--ease-standard);
}

.hp-map__label {
  position: absolute;
  top: 16px;
  font-size: var(--text-xs);
  color: var(--color-mute);
  white-space: nowrap;
  transition: color 0.2s var(--ease-standard);
}

.hp-map__node[data-state="done"] .hp-map__dot { background: var(--color-accent); border-color: var(--color-accent); }
.hp-map__node[data-state="done"] .hp-map__label { color: var(--color-ink-soft); }
.hp-map__node[data-state="now"] .hp-map__dot { border-color: var(--color-accent); box-shadow: var(--ring-accent); }
.hp-map__node[data-state="now"] .hp-map__label { color: var(--color-ink); font-weight: var(--weight-semibold); }
.hp-map__node:hover .hp-map__label { color: var(--color-ink); }
.hp-map__node:focus-visible .hp-map__dot { box-shadow: var(--ring-accent); }

/* The stork rides above the line to the active node, facing its travel direction. */
.hp-stork {
  position: absolute;
  top: 56%;
  left: var(--stork-left);
  width: 46px;
  margin-top: -40px;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.5s var(--ease-standard);
}
.hp-stork svg {
  width: 46px;
  height: auto;
  display: block;
  transition: transform 0.25s var(--ease-standard);
  filter: drop-shadow(0 4px 5px rgba(31, 26, 20, 0.16));
}
.hp-stork svg path { fill: var(--color-accent-deep); }
.hp-stork[data-face="left"] svg { transform: scaleX(-1); }

/* ---- Scrolling content ---- */
.hp-content { display: block; }

.hp-section {
  min-height: calc(100vh - var(--hp-top-h));
  scroll-margin-top: var(--hp-top-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-12) clamp(40px, 8vw, 120px);
}
.hp-section:nth-child(even) { background: var(--color-cream-deep); }
.hp-section__inner { max-width: 680px; }

/* Hero */
.hp-hero__head {
  font-family: var(--font-body);
  font-size: var(--text-4xl);
  line-height: 1.05;
  margin: var(--space-2) 0 var(--space-3);
}
.hp-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 48ch;
  margin-inline: auto;
  line-height: var(--leading-normal);
}
.hp-hero__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Buttons lean on the DS .btn / .btn--primary; only the inline arrow is bespoke. */
.hp-btn__arrow { width: 20px; height: 20px; flex-shrink: 0; }
/* A clear, instant keyboard focus ring on both CTAs. An outline is used (not a
   box-shadow) because .btn animates box-shadow, and .btn--primary's own
   box-shadow would otherwise mask a box-shadow focus ring. */
.hp-btn:focus-visible { outline: 3px solid var(--color-accent-deep); outline-offset: 2px; }

/* Stage sections */
.hp-section__head { font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-3); }
.hp-section__body { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 50ch; margin-inline: auto; line-height: var(--leading-normal); }

.hp-points {
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto 0;
  width: fit-content;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hp-points li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink-soft); }
.hp-points__check { width: 18px; height: 18px; color: var(--color-accent-deep); flex-shrink: 0; }

/* Closing CTA */
.hp-cta__card {
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  text-align: center;
  background: var(--gradient-accent);
  color: var(--color-paper);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}
.hp-cta__card h2 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.hp-cta__card p { margin: 0 auto var(--space-6); max-width: 46ch; }
.hp-cta__card .btn { background: var(--color-paper); color: var(--color-accent-deep); }
.hp-cta__card .btn:hover { filter: none; background: var(--color-paper); }

/* ---- Responsive ----
   The prototype is desktop-first. Below the map's label width, drop the labels
   (dots + stork remain); below the map's own width, drop the map entirely so
   the top bar is just the brand — no horizontal overflow at any width. */
@media (max-width: 900px) {
  .hp-map__label { display: none; }
}
@media (max-width: 680px) {
  :root { --hp-top-h: 64px; }
  .hp-top { gap: var(--space-4); padding: 0 var(--space-5); }
  .hp-map { display: none; }
}

/* Motion is a first-class, opt-out state: the stork glide, done-line growth,
   node transitions, and smooth scroll all stand down under reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hp-skip,
  .hp-map__line--done,
  .hp-map__dot,
  .hp-map__label,
  .hp-stork,
  .hp-stork svg { transition: none; }
}