/* ============================================
   TIMELINE — Journey Section & SVG Line
   ============================================ */
.timeline-section {
  background: var(--grey);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.timeline-header { text-align: center; margin-top: 5vh; margin-bottom: 0; flex-shrink: 0; }
.timeline-header h2 { font-size: 6vw; letter-spacing: 3px; margin: 0; }
.timeline-container { flex: 1; width: 100vw; display: flex; align-items: center; overflow: hidden; }
.timeline-track { position: relative; height: 60vh; display: flex; align-items: center; }
.timeline-content { position: relative; width: 3600px; height: 100%; flex-shrink: 0; }
.timeline-start-spacer { width: 50vw; height: 100%; flex-shrink: 0; position: relative; }
.timeline-start-spacer::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 8px; background: var(--black); transform: translateY(-50%); }
.timeline-end-spacer { width: 50vw; flex-shrink: 0; }
.desktop-svg { display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 3600px; height: 200px; z-index: 1; pointer-events: none; }
.mobile-svg { display: none; z-index: 1; pointer-events: none; }
.timeline-card { position: absolute; width: 380px; background: var(--white); border: 3px solid var(--black); border-radius: 15px; padding: 30px; box-shadow: 8px 8px 0px var(--black); z-index: 2; transform: translateX(-50%); opacity: 0; scale: 0.8; }
.top-card { bottom: calc(50% + 50px); }
.bottom-card { top: calc(50% + 50px); }
.timeline-card .date { background: var(--yellow); display: inline-block; padding: 6px 12px; font-family: 'Bangers', cursive; font-size: max(18px, 1.3vw); letter-spacing: 1px; border: 2px solid var(--black); border-radius: 10px; margin-bottom: 12px; box-shadow: 3px 3px 0px var(--black); }
.timeline-card h3 { font-family: 'Bangers', cursive; font-size: max(26px, 1.8vw); letter-spacing: 1px; margin: 0 0 10px 0; line-height: 1.1; }
.timeline-card p { font-family: sans-serif; font-size: max(15px, 1vw); margin: 0; line-height: 1.5; font-weight: 600; color: #444; }

@media (max-width: 1024px) {
  .timeline-header h2 { font-size: 8vw; }
  .timeline-card { width: 250px; padding: 15px; box-shadow: 6px 6px 0px var(--black); }
  .top-card { bottom: calc(50% + 30px); }
  .bottom-card { top: calc(50% + 30px); }
}
@media (max-width: 768px) {
  .timeline-section { height: auto; min-height: 100vh; overflow: visible; padding-bottom: 10vh; }
  .timeline-header { margin-top: 10vh; margin-bottom: 5vh; }
  .timeline-header h2 { font-size: 14vw; }
  .timeline-container { height: auto; overflow: visible; display: block; padding-top: 5vh; }
  .timeline-track { height: 2800px; display: block; position: relative; }
  .timeline-content { width: 100vw; height: 2800px; position: absolute; left: 0; top: 0; }
  .timeline-start-spacer, .timeline-end-spacer { display: none; }

  .desktop-svg { display: none !important; }
  .mobile-svg { display: block !important; position: absolute; left: 5vw; top: 0; width: 100px; height: 2700px; }

  .timeline-card {
    position: absolute;
    left: 20vw !important;
    transform: none !important;
    width: 70vw;
    padding: 20px;
    border: 3px solid var(--black);
    border-radius: 15px;
    box-shadow: 6px 6px 0px var(--black);
  }
  .timeline-card .date { font-size: 14px; padding: 5px 10px; margin-bottom: 8px; }
  .timeline-card h3 { font-size: 20px; margin-bottom: 8px; }
  .timeline-card p { font-size: 14px; }

  .timeline-card:nth-of-type(1) { top: 220px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(2) { top: 520px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(3) { top: 820px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(4) { top: 1120px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(5) { top: 1420px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(6) { top: 1720px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(7) { top: 2020px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(8) { top: 2320px !important; bottom: auto !important; }
  .timeline-card:nth-of-type(9) { top: 2600px !important; bottom: auto !important; width: 60vw; text-align: center; }
}