/*==================================================
ENGINEERING TIMELINE
==================================================*/

.timeline-section{

    padding:140px 8%;

    background:#050505;

    position:relative;

    overflow:hidden;

}

.git-timeline{

    position:relative;

    max-width:1100px;

    margin:80px auto 0;

    padding-left:70px;

}

/* Vertical Git Line */

.git-timeline::before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(

        to bottom,

        rgba(255,212,0,.9),

        rgba(255,212,0,.15)

    );

}

/* Commit */

.commit{

    position:relative;

    margin-bottom:70px;

    opacity:.45;

    transform:translateY(40px);

    transition:.6s;

}

/* Active Commit */

.commit.active{

    opacity:1;

    transform:translateY(0);

}

/* Git Node */

.commit-dot{

    position:absolute;

    left:-63px;

    top:20px;

    width:18px;

    height:18px;

    background:#FFD400;

    border-radius:50%;

    box-shadow:

        0 0 0 6px rgba(255,212,0,.08),

        0 0 25px rgba(255,212,0,.6);

}

/* Card */

.commit-content{

    background:#111;

    border:1px solid rgba(255,212,0,.12);

    border-radius:20px;

    padding:35px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

/* Hover */

.commit-content:hover{

    transform:translateX(10px);

    border-color:#FFD400;

    box-shadow:

        0 0 40px rgba(255,212,0,.18);

}

/* Scan Line */

.commit-content::before{

    content:"";

    position:absolute;

    top:0;

    left:-180px;

    width:180px;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,212,0,.15),

        transparent

    );

}

.commit-content:hover::before{

    animation:scan 1.5s linear;

}

@keyframes scan{

    from{

        left:-180px;

    }

    to{

        left:120%;

    }

}

/* Year */

.commit-year{

    color:#FFD400;

    font-size:.8rem;

    letter-spacing:3px;

    margin-bottom:15px;

}

/* Title */

.commit-content h3{

    font-size:2rem;

    margin-bottom:15px;

}

/* Description */

.commit-content p{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:30px;

}

/* Tech Badges */

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tech-stack span{

    padding:8px 16px;

    border:1px solid rgba(255,212,0,.18);

    border-radius:40px;

    color:#FFD400;

    font-size:.8rem;

    transition:.3s;

}

.tech-stack span:hover{

    background:#FFD400;

    color:#000;

}

/* Responsive */

@media(max-width:768px){

.git-timeline{

    padding-left:45px;

}

.commit-dot{

    left:-38px;

}

.commit-content{

    padding:25px;

}

.commit-content h3{

    font-size:1.5rem;

}

}
/*====================================
PROJECT DETAILS
====================================*/


.project-info h4{

    margin-top:30px;

    margin-bottom:12px;

    color:#FFD400;

    font-size:.75rem;

    letter-spacing:3px;

}


.project-info p{

    color:#ccc;

    line-height:1.8;

}


.impact{

    border-left:3px solid #FFD400;

    padding-left:20px;

}



.architecture{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:20px;

}


.architecture div{

    background:#080808;

    border:1px solid rgba(255,212,0,.12);

    padding:18px;

    border-radius:12px;

    color:#ddd;

    font-size:.9rem;

    transition:.3s;

}


.architecture div:hover{

    border-color:#FFD400;

    transform:translateY(-5px);

}


@media(max-width:700px){

.architecture{

grid-template-columns:1fr;

}

}