/* ─────────────────────────────────────────────────────────────────────────
   experience.css
   Vertical timeline layout for work/research history.
   The section overrides the default section max-width because it uses
   a full-width dark background panel.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Section overrides ───────────────────────────────────────────────────── */

#experience {
  max-width:  100%;          /* full-bleed background */
  padding:    100px 24px;
}

#experience .inner {
  max-width: 900px;
  margin:    0 auto;
}

/* ── Timeline container ──────────────────────────────────────────────────── */

.timeline {
  position:     relative;
  padding-left: 40px;
}

/* Vertical line running the full height */
.timeline::before {
  content:    '';
  position:   absolute;
  left: 0; top: 0; bottom: 0;
  width:      1px;
  background: linear-gradient(to bottom, var(--glow), var(--glow3), transparent);
  opacity:    0.4;
}

/* ── Individual timeline items ───────────────────────────────────────────── */

.timeline-item {
  position:   relative;
  margin-bottom: 56px;
  opacity:    0;
  transform:  translateX(-20px);
  transition: opacity 0.5s, transform 0.5s;
}
.timeline-item.visible {
  opacity:   1;
  transform: translateX(0);
}

/* Dot on the vertical line */
.timeline-dot {
  position:   absolute;
  left:       -46px;
  top:        4px;
  width:      12px;
  height:     12px;
  border:     2px solid var(--glow);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 10px var(--glow);
}

/* ── Item contents ───────────────────────────────────────────────────────── */

.exp-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  flex-wrap:       wrap;
  gap:             8px;
  margin-bottom:   6px;
}

.exp-role {
  font-family:    var(--font-display);
  font-size:      1rem;
  font-weight:    700;
  color:          #fff;
  letter-spacing: 0.05em;
}

.exp-date {
  font-size:      0.75rem;
  color:          var(--glow);
  letter-spacing: 0.1em;
  font-family:    var(--font-mono);
  border:         1px solid var(--border);
  padding:        2px 10px;
  white-space:    nowrap;
}

.exp-company {
  font-size:      0.85rem;
  color:          var(--glow2);
  margin-bottom:  12px;
  letter-spacing: 0.05em;
}

.exp-desc {
  font-size:     0.88rem;
  color:         var(--muted);
  line-height:   1.8;
  margin-bottom: 16px;
}

.exp-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
}

.exp-tag {
  font-size:      0.7rem;
  color:          var(--glow3);
  border:         1px solid rgba(168, 85, 247, 0.3);
  padding:        3px 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .timeline {
    padding-left: 24px;
  }
  .timeline-dot {
    left: -30px;
  }
}