/* -------------------------------------------------------
   Connectors under .hero-home-buttons-wrap-col
   1px #DBE2F0 lines + swimmer
   Baseline (no elbows) — single source of truth
   ------------------------------------------------------- */

/* Root variables */
:root {
    /* line stroke */
    --stroke: #DBE2F0;
    --stroke-w: 1px;

    /* swimmer */
    --swim: #1a73e8;
    --swim-glow: 8px;

    /* total overlay height */
    --h: 800px;

    /* raise the bottom rail by this much (0 = full height) */
    --shorten: 0px;

    /* global sub‑pixel nudge so swimmer sits exactly on 1px lines */
    --swim-nudge-x: -0.5px;
    --swim-nudge-y: 0px;
}

/* Global offset you are using */
.connectors {
    margin-top: 80px;
}

/* Wrapper positioning */
.hero-home-buttons-wrap-col {
    position: relative;
}

/* Overlay grid */
.hero-home-buttons-wrap-col .connectors {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--h);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    pointer-events: none;
}

/* Bottom rail */
.hero-home-buttons-wrap-col .connectors .connector-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--shorten);
    height: var(--stroke-w);
    background: var(--stroke);
}

/* Connector shell */
.hero-home-buttons-wrap-col .connectors .connector {
    position: relative;
}

/* Shared stroke segment base */
.hero-home-buttons-wrap-col .connectors .connector .seg {
    position: absolute;
    background: var(--stroke);
    border-radius: 999px;
}

/* seg1 */
.hero-home-buttons-wrap-col .connectors .connector .seg1 {
    left: calc(50% + var(--ox, 0px));
    top: 0;
    width: var(--stroke-w);
    height: calc(var(--v1) * 1px);
    transform: translateX(-0.5px);
}

/* seg2 */
.hero-home-buttons-wrap-col .connectors .connector .seg2 {
    left: calc(50% + var(--ox, 0px));
    top: calc(var(--v1) * 1px);
    width: calc(var(--len) * 1px);
    height: var(--stroke-w);
    transform-origin: 0 50%;
    transform: translateX(-0.5px) rotate(var(--rot));
}

/* seg3 */
.hero-home-buttons-wrap-col .connectors .connector .seg3 {
    left: calc(50% + var(--ox, 0px) + var(--dx) * 1px);
    top: calc((var(--v1) + var(--dv)) * 1px);
    width: var(--stroke-w);
    /* height: calc((var(--v2) * 1px) - var(--shorten)); */
    height: max(0px, calc((var(--v2) * 1px) - var(--shorten)));

    transform: translateX(-0.5px);
}

/* Swimmer dot — centered on its transform with a slight nudge */
/* Swimmer dot — centered via translate(-50%,-50%); animate left/top to follow the lines exactly */
.hero-home-buttons-wrap-col .connectors .connector .swimmer {
    position: absolute;
    left: calc(50% + var(--ox, 0px));
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--swim);
    box-shadow: 0 0 var(--swim-glow) var(--swim);
    will-change: left, top;
    transform: translate(calc(-50% + var(--swim-nudge-x)), calc(-50% + var(--swim-nudge-y)));
    animation: connector-swim 3s linear infinite;
    animation-delay: var(--delay, 0s);
}

/* Single canonical keyframes — path points match seg endpoints */
/* Animate left/top so percentages resolve against the connector column, not the dot */
@keyframes connector-swim {
    0% {
        opacity: 0;
        left: calc(50% + var(--ox, 0px) + var(--dx) * 1px);
        top: calc((var(--v1) + var(--dv) + var(--v2)) * 1px - var(--shorten));
    }

    5% {
        opacity: 1;
        left: calc(50% + var(--ox, 0px));
        top: 0px;
    }

    35% {
        left: calc(50% + var(--ox, 0px));
        top: calc(var(--v1) * 1px);
    }

    65% {
        left: calc(50% + var(--ox, 0px) + var(--dx) * 1px);
        top: calc((var(--v1) + var(--dv)) * 1px);
    }

    100% {
        left: calc(50% + var(--ox, 0px) + var(--dx) * 1px);
        top: calc((var(--v1) + var(--dv) + var(--v2)) * 1px - var(--shorten));
    }
}


/* -------------------------------------------------------
   Instance geometry (1↔5 mirror, 2↔4 mirror, 3 straight)
   Ensure v1 + dv + v2 = 800 so lines meet the rail.
   ------------------------------------------------------- */

/* Line 1 */
.hero-home-buttons-wrap-col .connectors .c1 {
    grid-column: 1;
    --v1: 245;
    --dx: 360;
    --dv: 210;
    --len: 416.77;
    --v2: 345;
    --rot: 30.26deg;
}

/* Line 2 */
.hero-home-buttons-wrap-col .connectors .c2 {
    grid-column: 2;
    --v1: 255;
    --len: 215.89;
    --rot: 30.26deg;
    --dx: 186.47;
    --dv: 108.79;
    --v2: 436.21;
    /* --delay: .4s; */
}

/* Line 3 (straight) */
.hero-home-buttons-wrap-col .connectors .c3 {
    grid-column: 3;
    --v1: 800;
    --dx: 0;
    --dv: 0;
    --len: 0;
    --v2: 0;
    --rot: 0deg;
    /* --delay: .8s; */
}

/* Line 4 (mirror of 2) */
.hero-home-buttons-wrap-col .connectors .c4 {
    grid-column: 4;
    --v1: 255;
    --len: 215.89;
    --rot: 149.74deg;
    /* 180 - 30.26 */
    --dx: -186.47;
    /* left */
    --dv: 108.79;
    --v2: 436.21;
    /* --delay: 1.2s; */
}

/* Line 5 (mirror of 1) */
.hero-home-buttons-wrap-col .connectors .c5 {
    grid-column: 5;
    --v1: 245;
    --dx: -360;
    /* left */
    --dv: 210;
    --len: 416.77;
    --v2: 345;
    --rot: 149.74deg;
    /* 180 - 30.26 */
    /* --delay: 1.6s; */
}

.hero-home-buttons-wrap-col .connectors .c1, .hero-home-buttons-wrap-col .connectors .c5 {
    --delay: 0.2;
}
.hero-home-buttons-wrap-col .connectors .c2, .hero-home-buttons-wrap-col .connectors .c4 {
    --delay: 1;
    
}

.hero-home-buttons-wrap-col .connectors .c3 {
    --delay: 2;
}

/* Safety: hide any legacy elbow elements still in DOM */
.hero-home-buttons-wrap-col .connectors .connector .elbow {
    display: none !important;
}