/* ============================================================
   SITE PROGRESS — vertical scroll path
   ============================================================ */

.site-progress {
    position: fixed;
    top: 12vh;
    right: 3%;
    bottom: 12vh;

    width: 80px;

    pointer-events: auto;
    z-index: 100;

    --sp-track: var(--charcoal-25);
    --sp-fill: var(--charcoal, #2b2b2b);
    --sp-node-size: 8px;

    /*
     * Hidden by default. JS adds .sp-visible once the user
     * has actually scrolled. The media query below handles
     * the small-screen case separately.
     */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.site-progress.sp-visible {
    opacity: 1;
}


/* ============================================================
   STANDARD TRACK
   ============================================================ */

.sp-track,
.sp-fill,
.sp-knob {
    left: 50%;
}


/* the faint full-length guide line */

.sp-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);

    background: var(--sp-track);
    border-radius: 2px;
}


/* the solid line that grows as you scroll */

.sp-fill {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 0%;
    transform: translateX(-50%);

    background: var(--sp-fill);
    border-radius: 2px;

    transition: height 0.08s linear;
}


/* marker riding at the current scroll position — solid, no pulse */

.sp-knob {
    position: absolute;
    left: 50%;
    top: 0%;
    width: 12px;
    height: 12px;
    transform:
        translate(
            calc(-50% + var(--sp-twang-x, 0px)),
            -50%
        );
    background: var(--sp-fill);
    border-radius: 50%;

    transition: top 0.08s linear;
    z-index: 5;
}


/* ============================================================
   TWANG OVERLAY
   ============================================================ */

.sp-twang-svg {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    opacity: 0;
}


.sp-twang-track,
.sp-twang-fill {
    fill: none;

    stroke-width: 2;

    vector-effect: non-scaling-stroke;

    stroke-linecap: round;
}


.sp-twang-track {
    stroke: var(--sp-track);
}


.sp-twang-fill {
    stroke: var(--sp-fill);
}


/*
 * ------------------------------------------------------------
 * ACTIVE TWANG
 * ------------------------------------------------------------
 */

.sp-twang-svg.sp-twang-active {
    opacity: 1;
}


/*
 * Hide the ordinary straight versions while the curved
 * versions are being displayed.
 */

.site-progress:has(
    .sp-twang-svg.sp-twang-active
) .sp-track,

.site-progress:has(
    .sp-twang-svg.sp-twang-active
) .sp-fill {
    opacity: 0;
}


/* ============================================================
   SECTION MARKERS
   ============================================================ */

.sp-node {
    position: absolute;
    left: 50%;

    width: var(--sp-node-size);
    height: var(--sp-node-size);

    transform:
        translate(
            calc(-50% + var(--sp-twang-x, 0px)),
            -50%
        );

    border-radius: 50%;

    background: #fff;


    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


/* ============================================================
   SECTION LABELS
   ============================================================ */

.sp-node-label {
    position: absolute;

    right: 50%;
    top: 50%;

    transform: translate(-6px, -50%);

    white-space: nowrap;

    padding: 6px 10px;

    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;

    color: var(--charcoal);
    background: #d8ae7f;

    border: 1px solid var(--charcoal);
    border-radius: 999px;

    text-decoration: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.25s ease,
        background 0.2s ease,
        color 0.2s ease;

    isolation: isolate;
}


/*
 * ------------------------------------------------------------
 * INVISIBLE LABEL HITBOX
 * ------------------------------------------------------------
 *
 * Keeps the visible pill small while giving it a much larger
 * mouse target.
 */

.sp-node-label::before {
    content: '';

    position: absolute;

    inset: -15px -50px;

    z-index: -1;
}


/*
 * ------------------------------------------------------------
 * HOVER THE SCROLLER
 * ------------------------------------------------------------
 *
 * The entire scroller becomes the interaction area rather
 * than requiring the user to hit the tiny nodes.
 */

.site-progress:hover .sp-node-label,
.site-progress:focus-within .sp-node-label {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-14px, -50%);
}


/*
 * ------------------------------------------------------------
 * LABEL HOVER
 * ------------------------------------------------------------
 */

.sp-node-label:hover {
    background: var(--charcoal);
    color: var(--white);
}


/*
 * ------------------------------------------------------------
 * KEYBOARD ACCESSIBILITY
 * ------------------------------------------------------------
 */

.sp-node-label:focus-visible {
    outline: 2px solid var(--sage-dark);
    outline-offset: 3px;
}


/* ============================================================
   ONE-SHOT PING
   ============================================================ */

.sp-node.sp-node--ping::after {
    content: '';

    position: absolute;
    inset: -2px;

    border-radius: 50%;
    border: 2px solid currentColor;

    animation: sp-ping 0.6s ease-out forwards;

    z-index: -1;
}



@keyframes sp-ping {

    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }

}


/* ============================================================
   SMALLER SCREENS
   ============================================================ */

@media (max-width: 1500px) {

    .site-progress {
        display: none;
    }

}

/* ============================================================
   DARK MODE — SITE PROGRESS
   ============================================================ */

@media (prefers-color-scheme: dark) {

    .site-progress {
        --sp-track: rgba(252, 252, 252, 0.50);
    }


}