/* ==========================================================
   PROCESS
========================================================== */

.process-section{
    background:var(--section-lightgray);
}

.process-timeline{
    position:relative;
    max-width:1100px;
    margin:5rem auto 0;
}

/* ==========================================
   TIMELINE SPINE
========================================== */

.timeline-spine{
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:24px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
    z-index:1;
    justify-content:space-between;
    gap:6px;
}

.timeline-pixel{
    width:4px;
    height:4px;
    border-radius:1px;
    background:rgba(37,99,235,.18);
    opacity:.35;

    transition:
        background .25s ease,
        opacity .25s ease,
        transform .25s ease;
}

.timeline-pixel.active{
    background:var(--primary);
    opacity:1;
}

.timeline-pixel.complete{
    background:var(--primary);
    opacity:1;
}

.timeline-item{
    position:relative;
    width:50%;
    margin-bottom:4rem;
}

.timeline-item.active h3{
    color:var(--primary);
}

.timeline-item.active .timeline-divider{
    width:120px;
    background:var(--primary);
}

.timeline-item.left{
    padding-right:90px;
    text-align:right;
}

.timeline-item.right{
    margin-left:50%;
    padding-left:90px;
}

.timeline-node{
    position:absolute;
    top:0;
    z-index:5;
}

.timeline-item.left .timeline-node{
    right:-10px;
}

.timeline-item.right .timeline-node{
    left:-10px;
}

.timeline-marker{
    width:18px;
    height:18px;
    border-radius:6px;
    background:var(--primary);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
    padding:2px;
    transition:
        transform .35s cubic-bezier(.175,.885,.32,1.275),
        background .35s ease;

   transform-origin:center center;
}

.timeline-marker.is-blooming{
    transform:scale(1.25);
    /*animation:markerBloom .38s cubic-bezier(.175,.885,.32,1.275);*/
    animation:markerBloom .42s cubic-bezier(.175,.885,.32,1.275);
}

@keyframes markerBloom{

    0%{
        transform:scale(1);
    }

    35%{
        transform:scale(1.30);
    }

    65%{
        transform:scale(.92);
    }

    100%{
        transform:scale(1);
    }

}

.timeline-marker span{
    background:white;
    border-radius:1px;
    opacity:0;
}

.timeline-card{
    position:relative;
    background: var(--section-lighter);
    border:1px solid rgba(15,23,42,.06);
    border-radius:var(--radius-lg);
    padding:2rem;
    transition:var(--transition-base);
}

.timeline-card h3{
    font-size:1.5rem;
    margin-bottom:1rem;
    color:var(--color-dark);
    transition:var(--transition-base);
}

.timeline-card p{
    margin:0;
    color:var(--color-muted);
    line-height:1.8;
}

.timeline-divider{
    width:var(--timeline-divider);
    height:2px;
    background:#dbe5f1;
    margin:1rem 0 1.5rem;
    transition:var(--transition-base);
}

.timeline-item.left .timeline-divider{
    margin-left:auto;
}

.timeline-item.active .timeline-card{
    border-color:rgba(37,99,235,.12);
    box-shadow:var(--shadow-md);
}
.timeline-item.active h3{
    color:var(--primary);
}
.timeline-item.active p{
    color:var(--dark);
}
.timeline-item.active .timeline-divider{
    width:var(--timeline-divider-active);
    background:var(--primary);
}
.timeline-item.active .timeline-marker{
    background:var(--primary);
}
.timeline-item.complete h3{
    color:var(--primary);
}

.timeline-item.complete .timeline-divider{
    width:120px;
    background:var(--primary);
}

@media (max-width:991.98px){

    .timeline-spine{
        left:24px;
    }

    .timeline-item{
        width:100%;
        margin-left:0;
        padding-left:70px;
        padding-right:0;
        text-align:left;
        margin-bottom: 3rem;
    }

    .timeline-item.right{
        margin-left:0;
        padding-left: 70px;
    }

    .timeline-item.left{
        text-align: left;
    }

    .timeline-node{
        left:14px !important;
        right:auto !important;
    }

    .timeline-divider{
        margin-left:0 !important;
    }

}

@media (max-width:767.98px){


}