/**
 * TradePacer visual identity — progression & controlled momentum.
 * Subtle path/node language reused across lifecycle, dividers, and process UI.
 * Prefer existing brand colors; avoid neon / heavy motion.
 */

/* --- Reusable motif primitives --- */
.pacer-path {
    display: block;
    height: 2px;
    width: 100%;
    border: 0;
    background: var(--progress-path-soft);
}

.pacer-path--strong {
    background: var(--progress-path);
}

.pacer-path--on-dark {
    background: var(--progress-path-on-dark);
}

.pacer-node {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--progress-node);
    box-shadow: 0 0 0 3px var(--progress-node-ring);
    vertical-align: middle;
    flex-shrink: 0;
}

.pacer-node--active {
    background: var(--progress-node-active);
    box-shadow: 0 0 0 3px rgb(3 40 106 / 0.18);
}

.pacer-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pacer-steps__connector {
    width: clamp(0.75rem, 2vw, 1.5rem);
    height: 1px;
    margin-inline: 0.2rem;
    background: var(--progress-path);
    flex-shrink: 0;
}

/* --- Section rhythm: progress dividers --- */
.section + .section--surface,
.section--surface + .section,
.section + .section--dark,
.home-showcase + .home-showcase {
    border-top: 0;
    box-shadow: inset 0 2px 0 0 transparent;
    background-image: var(--progress-path-soft);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: top center;
}

.section--surface + .section--surface {
    background-image: var(--progress-path-soft);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: top center;
}

/* --- Eyebrows: small progress node --- */
.section-heading__eyebrow,
.home-showcase__eyebrow,
.company-hero__eyebrow,
.pricing-hero__eyebrow,
.home-final-cta__eyebrow,
.problem-solution__eyebrow {
    position: relative;
}

.section-heading__eyebrow::before,
.home-showcase__eyebrow::before,
.pricing-hero__eyebrow::before,
.home-final-cta__eyebrow::before,
.problem-solution__eyebrow::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--progress-node);
    box-shadow: 0 0 0 3px var(--progress-node-ring);
    vertical-align: 0.05em;
}

.company-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 0 3px rgb(194 160 55 / 0.22);
    vertical-align: 0.05em;
}

/* --- Hero lifecycle path --- */
.home-hero-lifecycle__marker {
    background: var(--progress-node);
    box-shadow: 0 0 0 3px var(--progress-node-ring);
}

.home-hero-lifecycle__connector {
    background: var(--progress-path-on-dark);
    height: 2px;
    border-radius: 1px;
}

.home-hero-lifecycle__item:hover .home-hero-lifecycle__marker,
.home-hero-lifecycle__link:focus-visible .home-hero-lifecycle__marker {
    background: #fff;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
}

/* Subtle advance on first paint (respects reduced motion via token override) */
@media (prefers-reduced-motion: no-preference) {
    .home-hero-lifecycle__connector {
        transform-origin: left center;
        animation: pacer-draw var(--progress-motion) both;
        animation-delay: 180ms;
    }

    .home-hero-lifecycle__item:nth-child(1) .home-hero-lifecycle__connector { animation-delay: 120ms; }
    .home-hero-lifecycle__item:nth-child(2) .home-hero-lifecycle__connector { animation-delay: 200ms; }
    .home-hero-lifecycle__item:nth-child(3) .home-hero-lifecycle__connector { animation-delay: 280ms; }
    .home-hero-lifecycle__item:nth-child(4) .home-hero-lifecycle__connector { animation-delay: 360ms; }
    .home-hero-lifecycle__item:nth-child(5) .home-hero-lifecycle__connector { animation-delay: 440ms; }
    .home-hero-lifecycle__item:nth-child(6) .home-hero-lifecycle__connector { animation-delay: 520ms; }
}

@keyframes pacer-draw {
    from {
        transform: scaleX(0);
        opacity: 0.35;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* --- Journey lifecycle path uses shared tokens --- */
.lifecycle.is-enhanced .lifecycle__stages::before {
    background: var(--progress-path-on-dark);
    transition: transform var(--progress-motion);
}

.lifecycle__index {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12);
}

.lifecycle__stage.is-active .lifecycle__index {
    box-shadow: 0 0 0 3px rgb(194 160 55 / 0.28);
}

.lifecycle__connector {
    background: var(--progress-path-on-dark);
}

/* --- Problem → solution directional flow --- */
.problem-solution__arrow {
    color: var(--color-primary);
    opacity: 0.85;
}

.problem-solution__stage-connector {
    background: var(--progress-path);
    height: 2px;
}

.problem-solution__stage-label {
    position: relative;
}

.problem-solution__stage-label::before {
    content: '';
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--progress-node);
    box-shadow: 0 0 0 2px var(--progress-node-ring);
    vertical-align: 0.1em;
}

/* --- Showcase feature steps as status nodes --- */
.home-showcase__features li::before {
    background: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px rgb(3 40 106 / 0.22);
}

.home-showcase__link {
    position: relative;
}

.home-showcase__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 0;
    height: 2px;
    background: var(--progress-path);
    transition: width var(--transition-base);
}

.home-showcase__link:hover::after,
.home-showcase__link:focus-visible::after {
    width: 100%;
}

/* Module-to-module transition rail between consecutive showcases */
.home-showcase + .home-showcase::before {
    content: none;
}

/* --- Additional / team / pricing process accents --- */
.additional-capabilities__card,
.team-solutions__card,
.about-audience__card {
    position: relative;
}

.additional-capabilities__card::before,
.team-solutions__card::before,
.about-audience__card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: var(--progress-path-soft);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.additional-capabilities__card:hover::before,
.additional-capabilities__card:focus-visible::before,
.team-solutions__card:hover::before,
.team-solutions__card:focus-within::before,
.about-audience__card:hover::before,
.about-audience__card:focus-visible::before {
    opacity: 1;
}

/* --- About lifecycle track --- */
.about-lifecycle__connector {
    background: var(--progress-path);
}

.about-lifecycle__index {
    color: var(--color-primary);
}

.about-lifecycle__phase:hover .about-lifecycle__index,
.about-lifecycle__phase:focus-visible .about-lifecycle__index {
    color: var(--color-gold);
}

@media (min-width: 900px) {
    .about-lifecycle__phase {
        background-image: var(--progress-path-soft);
        background-repeat: no-repeat;
        background-size: 100% 2px;
        background-position: top left;
        background-color: var(--color-surface);
    }
}

/* --- Trust / final CTA already use path language; align tokens --- */
.trust-strip::before {
    background: var(--progress-path);
}

.home-final-cta {
    position: relative;
}

.home-final-cta::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--progress-path-on-dark);
    opacity: 0.85;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-lifecycle__connector {
        animation: none !important;
        transform: none;
        opacity: 1;
    }

    .lifecycle.is-enhanced .lifecycle__stages::before {
        transition: none;
    }

    .home-showcase__link::after {
        transition: none;
    }
}