/* Hari.is-a.dev - Career Journey Timeline v2 */

:root{
  --bg-card: rgba(20,27,46,.82);
  --border: rgba(255,255,255,.08);
  --accent:#60a5fa;
  --text:#e5e7eb;
  --muted:#94a3b8;
}

#timeline{
  position:relative;
  width:min(1200px,94%);
  margin:5rem auto;
  display:flex;
  flex-direction:column;
  gap:4rem;
}

#timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(var(--accent),rgba(96,165,250,.15));
}

.timeline-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);
  align-items:center;
  position:relative;
}

.timeline-item.left .timeline-card{grid-column:1;}
.timeline-item.right .timeline-card{grid-column:3;}

.timeline-item::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  border:4px solid #0f172a;
  grid-column:2;
  justify-self:center;
  z-index:2;
  box-shadow:0 0 10px rgba(96,165,250,.6);
}

.timeline-card{
  position:relative;
  min-width:0;
  background:var(--bg-card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  transition:.3s;
}

.timeline-card:hover{
  transform:translateY(-6px);
  border-color:rgba(96,165,250,.45);
}

.timeline-card.current{
  border-color:rgba(96,165,250,.65);
}

.timeline-item.left .timeline-card::after,
.timeline-item.right .timeline-card::after{
  content:"";
  position:absolute;
  top:42px;
  width:42px;
  height:2px;
  background:var(--accent);
}

.timeline-item.left .timeline-card::after{right:-42px;}
.timeline-item.right .timeline-card::after{left:-42px;}

.timeline-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.4rem 1rem;
}

.timeline-highlights{
  list-style:none;
  padding:0;
  margin:0 0 1.4rem;
}

.timeline-highlights li{
  display:flex;
  gap:.7rem;
  margin-bottom:.6rem;
}

.highlight-icon{color:var(--accent);font-weight:bold;}

.timeline-tech{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.tech-pill{
  padding:.4rem .75rem;
  border-radius:999px;
  background:rgba(96,165,250,.12);
  color:#dbeafe;
  font-size:.8rem;
}

.project-button{
  margin-top:1.4rem;
  padding:.8rem 1rem;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#08111f;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:900px){
  #timeline::before{left:24px;transform:none;}
  .timeline-item{grid-template-columns:48px minmax(0,1fr);}
  .timeline-item::before{grid-column:1;}
  .timeline-card{grid-column:2 !important;}
  .timeline-card::after{display:none;}
}

@media(max-width:480px){
  #timeline{margin:3rem auto;}
  .timeline-card{padding:20px;}
  .timeline-meta{flex-wrap:wrap;}
}

/* ===============================
   Company Branding
================================= */

.company-block{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:12px;
}

.company-logo{
    width: 54px;
    height:54px;
    object-fit:contain;
    flex-shrink:0;

    filter:brightness(0) invert(1);
    opacity:.8;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.timeline-card:hover .company-logo{
    transform:scale(1.08);
    opacity:1;
}

.company-details{
    display:flex;
    flex-direction:column;
    gap:1px;
}

.timeline-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    color:var(--muted);
    font-size:.92rem;
}

.meta-separator{
    opacity:.6;
}

.timeline-duration{
    font-weight:500;
}

.current-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:auto;

    color:#22c55e;
    font-weight:600;
}

.present-dot{

    width:8px;
    height:8px;

    border-radius:50%;
    background:#22c55e;

    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(34,197,94,.6);
    }

    70%{
        transform:scale(1.15);
        box-shadow:0 0 0 8px rgba(34,197,94,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(34,197,94,0);
    }
}

.timeline-year{
    margin-bottom:10px;
    color:var(--text);
    font-weight:600;
}

.timeline-role{
    margin:0 0 6px;
    line-height:1.2;
}

.timeline-company{
    margin:0 0 8px;
    font-weight:600;
}

.timeline-location{
    margin:0;
    color:var(--muted);
}