@keyframes paths-march {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24.2; }
}

@keyframes path-dot-flicker {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 45, 150, 0); }
  20% { opacity: .2; }
  40% { opacity: 1; }
  55% { opacity: .4; }
  75% { opacity: 1; box-shadow: 0 0 0 6px rgba(255, 45, 150, .18); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 45, 150, 0); }
}

.paths {
  position: relative;
  background: var(--grey, #d6d6d6);
  color: var(--ink, #0b0b0c);
  width: 100%;
}

.paths__pin {
  position: relative;
}

.paths__track {
  position: relative;
  width: 100%;
}

.paths__origin {
  width: 120px;
  color: var(--ink, #0b0b0c);
}

.paths__mark {
  display: block;
  width: 100%;
  height: auto;
}

.paths__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}



.path-stop {
  position: relative;
  padding-left: 40px;
  margin: 0;
}

.path-stop__num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--pink, #ff2d96);
  margin: 0;
}

.path-stop__title {
  font-family: Figtree, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink, #0b0b0c);
  margin: 6px 0 10px;
}

.path-stop__text {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.5;
  color: var(--muted, #545459);
  margin: 0;
}

/* ---------- Phones / reduced motion (default: stacked, vertical) ---------- */

.paths__track::before {
  content: "";
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 19px;
  width: 0;
  border-left: 3px dotted var(--pink, #ff2d96);
  pointer-events: none;
}

.path-stop::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pink, #ff2d96);
  transform: translateX(-50%);
}

.paths__pin .paths__origin {
  margin: 0 0 24px 0;
  padding: 0;
}

/* Reduced motion: everything visible, no flicker, no marching dots */

@media (prefers-reduced-motion: reduce) {
  .paths__lines path {
    animation: none;
  }
  .path-stop {
    opacity: 1;
    transform: none;
  }
  .path-stop::before {
    animation: none;
  }
}

/* ---------- Desktop with motion ---------- */

@media (min-width: 901px) {
  @media (prefers-reduced-motion: no-preference) {

    .paths {
      position: relative;
    }

    .paths__pin {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    .paths__track {
      position: relative;
      height: 100vh;
      will-change: transform;
    }

    .paths__track::before {
      display: none;
    }

    .paths__origin {
      position: absolute;
      top: 54%;
      transform: translateY(-50%);
      left: max(var(--gutter, 32px), (100vw - var(--max, 1280px)) / 2 + var(--gutter, 32px));
      width: clamp(140px, 13vw, 200px);
      margin: 0;
      color: var(--ink, #0b0b0c);
      z-index: 2;
    }

    .paths__mark {
      width: 100%;
      height: auto;
    }

    .paths__lines {
      position: absolute;
      inset: 0;
      overflow: visible;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }

    /* Each outcome is a boarding-pass ticket. The route runs into the punched
       notch on its left edge, level with the perforation. */
    .path-stop {
      position: absolute;
      width: clamp(300px, 25vw, 380px);
      margin: 0;
      padding: 26px 28px 22px;
      background: var(--grey-2, #e2e2e4);
      border-radius: 6px;
      opacity: 0;
      transition: opacity 700ms var(--ease-expo, cubic-bezier(.16, 1, .3, 1));
      z-index: 1;
    }
    .path-stop > * {
      transform: translateY(10px);
      transition: transform 700ms var(--ease-expo, cubic-bezier(.16, 1, .3, 1));
    }
    .path-stop.is-on { opacity: 1; }
    .path-stop.is-on > * { transform: none; }
    .path-stop::before { content: none; }

    .path-stop.is-on.path-stop--flicker::before {
      animation: path-dot-flicker 420ms steps(1, end) 1;
    }


  }
}

/* ---------- Phones: override to auto height, stacked ---------- */

@media (max-width: 900px) {
  .paths {
    height: auto !important;
    padding: clamp(32px, 8vw, 64px) var(--gutter, 20px);
  }
  .paths__track::before { left: 12px; top: 150px; }
  .path-stop { padding-left: 40px !important; }
  .path-stop::before { left: 12px !important; top: 10px !important; transform: translateX(-50%) !important; }
  .paths__pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .paths__track {
    height: auto !important;
    transform: none !important;
  }
  .paths__origin {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 120px !important;
    margin: 0 0 24px 0 !important;
  }
  .paths__lines {
    display: none;
  }
  .path-stop {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    margin: 0 0 40px 0 !important;
  }
  .path-stop--above,
  .path-stop--below,
  .path-stop--above.is-on,
  .path-stop--below.is-on {
    transform: none !important;
  }
}

/* Reduced motion: force stacked / static layout regardless of width */

@media (prefers-reduced-motion: reduce) {
  .paths {
    height: auto !important;
  }
  .paths__pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .paths__track {
    height: auto !important;
    transform: none !important;
    width: 100% !important;
  }
  .paths__origin {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 120px !important;
    margin: 0 0 24px 0 !important;
  }
  .paths__lines {
    display: none;
  }
  .paths__track::before {
    display: block;
  }
  .path-stop {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    padding-left: 40px !important;
    margin: 0 0 40px 0 !important;
  }
  .path-stop--above,
  .path-stop--below,
  .path-stop--above.is-on,
  .path-stop--below.is-on {
    transform: none !important;
  }
  .path-stop::before,
  .path-stop.is-on.path-stop--flicker::before {
    animation: none !important;
    left: -28px !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
  }
}
/* The logo the paths come out of is black, so the pink dots read against it */
.paths .paths__origin .mark { color: var(--ink, #0b0b0c); fill: currentColor; }

/* ---------- Tickets: shared parts ---------- */
.path-stop__list {
  position: relative;
  list-style: none;
  margin: 20px -28px 0;
  padding: 16px 28px 0;
  border-top: 2px dashed rgba(11, 11, 12, .22);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pink, #ff2d96);
}
.path-stop__list::before { content: "Includes"; flex-basis: 100%; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted, #545459); }
/* the punched notches at each end of the perforation */
.path-stop__list::after { content: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .path-stop__list::after {
    content: "";
    position: absolute;
    left: -13px; right: -13px; top: -14px;
    height: 26px;
    background:
      radial-gradient(circle at 13px 13px, var(--grey, #d6d6d6) 12px, transparent 12.5px) left / 26px 26px no-repeat,
      radial-gradient(circle at 13px 13px, var(--grey, #d6d6d6) 12px, transparent 12.5px) right / 26px 26px no-repeat;
    pointer-events: none;
  }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .path-stop__list { margin: 14px 0 0; padding: 12px 0 0; }
}