/* timeline wrapper -> for layout stability */
#timeline { 
    width: 100Vw;
    background: var(--black-alt);}

.timeline-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  /*max-width: 1100px;*/
  /*margin: 48px;*/
  padding: 30px;
  color: var(--muted);
}
.timeline-intro {
  margin-bottom: 15px;
}

/* ensure the ol uses the exact selector used in HTML */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  position: relative;
}
@media screen and (width >= 651px){
  .timeline {
      padding-left: calc(46px + 32px); /* space for markers */
  }
}

/* vertical spine */
.timeline::before {
  content: "";
  position: absolute;
  left: calc(56px / 2 + 8px); /* center relative to marker */
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(103,232,249,0.06), rgba(139,92,246,0.06));
  z-index: 1; /* behind markers */
}

/* steps (accept both .step and .timeline-step) */
.timeline .step,
.timeline .timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 28px 0;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1),
              transform 420ms cubic-bezier(.2,.9,.2,1);
}

/* marker circle — force visible above spine */
.timeline .marker {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(103,232,249,0.06), rgba(139,92,246,0.06));
  border: 2px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) inset;
  transform: scale(.9);
  transition: transform .28s ease, box-shadow .28s ease;
  position: relative;
  z-index: 2; /* <-- IMPORTANT : place markers above the axis */
}

/* step text (accept both classes) */
.timeline .step-text {
  flex: 1;
}
.timeline .step-text h3 { margin:0 0 6px 0; color: var(--violet); }
.timeline .step-text p { margin:0; color: #cbd6da; }

/* visible states — accept both naming conventions (.visible or .is-visible) */
.timeline .step.visible {
  opacity: 1;
  transform: none;
}
.timeline .step.visible .marker {
  transform: scale(1);
  box-shadow: 0 10px 30px rgba(103,232,249,0.06), 0 0 30px rgba(139,92,246,0.04);
}

/* stagger delays (pure CSS fallback) */
.timeline .step:nth-child(1){ transition-delay: 0ms; }
.timeline .step:nth-child(2){ transition-delay: 80ms; }
.timeline .step:nth-child(3){ transition-delay: 160ms; }
.timeline .step:nth-child(4){ transition-delay: 240ms; }
.timeline .step:nth-child(5){ transition-delay: 320ms; }
.timeline .step:nth-child(6){ transition-delay: 400ms; }

/* responsive tweaks */
@media (max-width:651px){
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
}
  .timeline .step, .timeline .timeline-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 0;
}
  .timeline .step .marker {
    margin-bottom: 10px; }
}