/* The journey line moves (hero, Discover -> Know). Picked by Beau 2026-10-21 (sandbox prototype: journey-line).
   Live: each step's ::before is a static hairline to the next circle, and the steps rise in once on load.
   1. Draw: each segment grows down from its circle, one after another, after the step above has risen.
   2. Arrive: each circle's ring turns gold and sends out one soft ring as the line reaches it.
   3. Signal: then a short gold light travels the whole line every 4.5 s (constant motion, so linear),
      and each circle pings as the light reaches it. Only transform, opacity and a tiny background move.
   Reduced motion: none of this runs; the live static line stays. */
@media (prefers-reduced-motion: no-preference) {
  .nh .nh-step { --nh-jl-cycle: 4.5s; --nh-jl-start: 2.4s; --nh-jl-hop: 0.75s; }
  .nh .nh-step:nth-child(1) { --i: 0; } .nh .nh-step:nth-child(2) { --i: 1; }
  .nh .nh-step:nth-child(3) { --i: 2; } .nh .nh-step:nth-child(4) { --i: 3; }

  /* 1. draw */
  @keyframes nh-jl-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .nh .nh-step:not(:last-child)::before {
    transform-origin: top center;
    animation: nh-jl-draw 0.5s cubic-bezier(0.77, 0, 0.175, 1) both;
    animation-delay: calc(0.55s + var(--i) * 0.5s);
  }

  /* 2. arrive: ring turns gold, one ring goes out */
  @keyframes nh-jl-arrive { from { border-color: var(--nh-line); } to { border-color: var(--nh-gold); } }
  @keyframes nh-jl-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
  .nh .nh-step-icon { animation: nh-jl-arrive 0.35s ease-out both; animation-delay: calc(0.45s + var(--i) * 0.5s); }
  .nh .nh-step-icon::after {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--nh-gold);
    opacity: 0; pointer-events: none;
    animation: nh-jl-ring 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
    animation-delay: calc(0.45s + var(--i) * 0.5s);
  }

  /* 3. signal: a gold band slides down each segment in turn, then the loop waits */
  @keyframes nh-jl-signal {
    0% { background-position: 0 100%; }
    20% { background-position: 0 0%; }
    100% { background-position: 0 0%; }
  }
  .nh .nh-step:not(:last-child)::after {
    content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; pointer-events: none;
    /* a comet: a fading gold tail above a bright head (the head leads, going down) */
    background: linear-gradient(to bottom, transparent 0%, transparent 36%, rgba(212, 166, 78, 0.35) 44%, var(--nh-gold) 50%, #fff1cf 52%, transparent 53%, transparent 100%) no-repeat;
    background-size: 100% 250%;
    filter: drop-shadow(0 0 3px rgba(212, 166, 78, 0.9)) drop-shadow(0 0 7px rgba(212, 166, 78, 0.45));
    background-position: 0 100%;
    animation: nh-jl-signal var(--nh-jl-cycle) linear infinite;
    animation-delay: calc(var(--nh-jl-start) + var(--i) * var(--nh-jl-hop));
  }
  @media (min-width: 900px) { .nh .nh-step:not(:last-child)::after { left: 23px; top: 48px; } }

  /* each circle pings as the light reaches it (circle 1 when the light sets off) */
  @keyframes nh-jl-ping {
    0% { box-shadow: 0 0 0 0 rgba(212, 166, 78, 0); }
    3% { box-shadow: 0 0 0 5px rgba(212, 166, 78, 0.26); }
    11% { box-shadow: 0 0 0 10px rgba(212, 166, 78, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 166, 78, 0); }
  }
  .nh .nh-step .nh-step-icon {
    animation: nh-jl-arrive 0.35s ease-out both, nh-jl-ping var(--nh-jl-cycle) linear infinite;
    animation-delay: calc(0.45s + var(--i) * 0.5s), calc(var(--nh-jl-start) + var(--i) * var(--nh-jl-hop) - 0.05s);
  }
}