/* ==========================================================================
   BISUN POWER — MOTION SYSTEM ("Current Trace")
   Phase 1 only: Verify Module (see verify.css) + Factory-to-Rooftop Timeline.
   Every rule here traces to the approved Motion Design System spec.
   Additive only — does not alter any existing layout, spacing, or color
   token; only introduces animated states on top of what already exists.
   ========================================================================== */

/* ---------- Timeline: connecting line scroll-fill ----------
   The existing .bp-vtimeline::before line is repurposed to fill
   top-to-bottom as the user scrolls, via a JS-set --bp-tl-progress
   custom property (0–1), read from IntersectionObserver thresholds —
   never a raw scroll listener. transform-only, no layout shift. */
.bp-vtimeline::before {
  transform-origin: top;
  transform: scaleY(var(--bp-tl-progress, 0));
  transition: transform 0.05s linear;
}

/* ---------- Timeline: marker activation ----------
   Default state (before scroll-activation): outline only.
   On .is-active (added by JS as each marker enters view): fills solid,
   Medium timing, Arrival easing — "locking into place." */
.bp-vt-marker {
  background: transparent !important;
  border: 2px solid #18A558;
  color: #18A558 !important;
  transition: background-color 0.4s cubic-bezier(.16,1,.3,1),
              color 0.4s cubic-bezier(.16,1,.3,1),
              border-color 0.4s cubic-bezier(.16,1,.3,1);
}
.bp-vt-marker.is-active {
  background: #18A558 !important;
  border-color: #18A558;
  color: #fff !important;
}

/* ---------- Reduced motion (mandatory, not optional) ----------
   Line and every marker render fully resolved immediately — this
   matches the site's original pre-motion appearance exactly, so
   reduced-motion users see the same design that shipped before
   this system existed. */
@media (prefers-reduced-motion: reduce) {
  .bp-vtimeline::before {
    transform: none;
    transition: none;
  }
  .bp-vt-marker {
    background: #18A558 !important;
    border-color: #18A558;
    color: #fff !important;
    transition: none;
  }
}