/* Scroll Path Draw — original.
   An SVG line draws itself along scroll (stroke-dashoffset), a glowing node rides
   the path, and staged milestone labels light up as they are reached.
   Every selector is scoped to .byq-gem--scroll-path-draw-01. */

.byq-gem--scroll-path-draw-01 {
  font-family: var(--byq-font-sans);
  color: var(--byq-fg);
  --spd-glow: rgba(197, 239, 87, 0.55); /* lime-tinted glow for shadows */
}

/* ---- Scroll runway + pinned stage ---- */
.byq-gem--scroll-path-draw-01__track {
  height: 340vh; /* the scrub distance */
}

.byq-gem--scroll-path-draw-01__stage {
  height: 100vh;
  min-height: 40rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* ---- Visualisation frame — sits directly on the dark background ----
   Width-capped (never height-capped) so the box keeps the exact 900:460
   viewBox ratio and the %-positioned stops line up with the SVG path. */
.byq-gem--scroll-path-draw-01__viz {
  position: relative;
  width: 100%;
  max-width: min(68rem, calc(62vh * 900 / 460));
  aspect-ratio: 900 / 460;
  margin-inline: auto;
  overflow: visible;
}

.byq-gem--scroll-path-draw-01__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* gradient stops (set here so SVG picks up brand tokens reliably) */
.byq-gem--scroll-path-draw-01__grad-a { stop-color: var(--byq-accent-lime); }
.byq-gem--scroll-path-draw-01__grad-b { stop-color: var(--byq-accent-solar); }

/* faint dotted full route under the drawn line */
.byq-gem--scroll-path-draw-01__ghost {
  stroke: var(--byq-fg);
  stroke-opacity: 0.14;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 12;
}

/* the animated line — JS sets dasharray/dashoffset to the true path length */
.byq-gem--scroll-path-draw-01__line {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--spd-glow));
}

/* glowing node that rides the path; hands over to the end dot on arrival */
.byq-gem--scroll-path-draw-01__node {
  fill: var(--byq-accent-lime);
  stroke: var(--byq-card);
  stroke-width: 3;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ---- Milestone stops — the anchor point IS the on-curve point ---- */
.byq-gem--scroll-path-draw-01__stops {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.byq-gem--scroll-path-draw-01__stop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0.34;
  filter: saturate(0.4);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* dot centred exactly on the path so the line runs through it */
.byq-gem--scroll-path-draw-01__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.9rem;
  height: 0.9rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--byq-card);
  border: 2px solid var(--byq-depth);
  box-shadow: 0 0 0 4px rgba(4, 4, 4, 0.04);
  transition:
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* labels sit on the clear side of the line: below the dot by default… */
.byq-gem--scroll-path-draw-01__label {
  position: absolute;
  top: 0.8rem;
  left: -0.45rem;
  white-space: nowrap;
  font-family: var(--byq-font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* …and crowning the dot on crest/finish stops, where above is the clear side */
.byq-gem--scroll-path-draw-01__stop--up .byq-gem--scroll-path-draw-01__label {
  top: auto;
  bottom: 0.9rem;
  left: 0;
  transform: translateX(-50%);
}

/* lit state — applied by JS when the drawn line reaches the stop */
.byq-gem--scroll-path-draw-01__stop.is-lit {
  opacity: 1;
  filter: saturate(1);
}
.byq-gem--scroll-path-draw-01__stop.is-lit .byq-gem--scroll-path-draw-01__dot {
  background: var(--byq-accent-lime);
  border-color: var(--byq-accent-lime);
  box-shadow: 0 0 0 5px rgba(197, 239, 87, 0.2), 0 0 16px var(--spd-glow);
}
.byq-gem--scroll-path-draw-01__stop--end.is-lit .byq-gem--scroll-path-draw-01__dot {
  background: var(--byq-accent-solar);
  border-color: var(--byq-accent-solar);
  box-shadow: 0 0 0 5px rgba(255, 205, 51, 0.22), 0 0 16px rgba(255, 205, 51, 0.55);
}

/* dark palette: soften the neutral shadow ring for contrast */
.dark .byq-gem--scroll-path-draw-01__dot {
  box-shadow: 0 0 0 4px rgba(246, 243, 236, 0.05);
}

/* ---- Reduced motion: show the finished state, no scrub drama ---- */
@media (prefers-reduced-motion: reduce) {
  .byq-gem--scroll-path-draw-01__track {
    height: auto;
  }
  .byq-gem--scroll-path-draw-01__stage {
    height: auto;
    min-height: 0;
  }
  .byq-gem--scroll-path-draw-01__stop {
    transition: none;
  }
}

/* ---- Narrower viewports ---- */
@media (max-width: 720px) {
  .byq-gem--scroll-path-draw-01__label {
    font-size: 1rem;
  }
}