/* ═══════════════════════════════════════════════════════════════════
   EXPERIENCE TIMELINE
═══════════════════════════════════════════════════════════════════ */
#experience{background:var(--bg-2);}
.timeline{position:relative;padding-left:0;}
.timeline-line{
  position:absolute;left:8px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(to bottom,
    transparent,var(--line-2) 8%,var(--line-2) 92%,transparent);
}
.timeline-line-fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:var(--accent);
}
.timeline-item{
  padding-left:3.5rem;padding-bottom:3.5rem;position:relative;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute;left:0;top:.45rem;
  width:17px;height:17px;border-radius:50%;
  background:var(--bg-2);border:2px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  transition:all .4s;
}
.timeline-dot::after{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--accent);transition:transform .4s;transform:scale(0);
}
.timeline-item.is-active .timeline-dot{border-color:var(--accent);box-shadow:0 0 14px rgba(0,212,255,.5);}
.timeline-item.is-active .timeline-dot::after{transform:scale(1);}
.timeline-date{
  font-size:.65rem;letter-spacing:.3em;font-family:var(--font-m);
  color:var(--accent);text-transform:uppercase;margin-bottom:.5rem;
}
.timeline-title{font-size:1.25rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em;}
.timeline-sub{
  font-size:.78rem;color:var(--gray-200);font-family:var(--font-m);
  margin-bottom:.85rem;
}
.timeline-desc{
  font-size:.82rem;color:var(--gray-100);line-height:1.8;
  max-width:62ch;font-family:var(--font-m);
}
.timeline-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem;}
.timeline-tag{
  font-size:.6rem;font-family:var(--font-m);padding:.2rem .55rem;
  background:var(--bg-3);border:1px solid var(--line);color:var(--gray-200);
}

/* Bridge item — connects two Luther King stages with a dashed arc hint */
.timeline-item--bridge{
  padding-bottom:3.5rem;
}
.timeline-item--bridge .timeline-title{
  color:var(--accent);
}
.timeline-item--bridge::before{
  content:'';position:absolute;left:-1px;top:-3.5rem;height:3.5rem;
  width:2px;border-left:2px dashed rgba(0,212,255,.35);
}

/* Parallel items — slightly indented to show concurrent with U-tad */
.timeline-item--parallel{
  padding-left:5rem;
}
.timeline-item--parallel .timeline-dot{
  left:1.5rem;
}
.timeline-item--parallel .timeline-title{
  font-size:1.05rem;
}
.timeline-item--parallel .timeline-date{
  color:var(--gray-300);
}

/* Accent dot — highlighted (Canada, U-tad) */
.timeline-dot--accent{
  border-color:var(--accent) !important;
  background:rgba(0,212,255,.1) !important;
}
.timeline-dot--accent::after{
  background:var(--accent);transform:scale(1) !important;
}

/* Glow dot — graduation final item */
.timeline-dot--glow{
  border-color:var(--accent) !important;
  background:var(--accent) !important;
  box-shadow:0 0 20px rgba(0,212,255,.7),0 0 40px rgba(0,212,255,.3) !important;
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 20px rgba(0,212,255,.7),0 0 40px rgba(0,212,255,.3);}
  50%{box-shadow:0 0 30px rgba(0,212,255,1),0 0 60px rgba(0,212,255,.5);}
}

/* ─── "Parallel with U-tad" bracket label ─── */
.timeline-parallel-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;
  font-family:var(--font-m);color:var(--accent);opacity:.6;
  margin-bottom:1.5rem;padding-left:5rem;
}
.timeline-parallel-label::before{
  content:'';width:1.5rem;height:1px;background:var(--accent);opacity:.6;
}