/* timeline.css — Phase 6 warp path */
.timeline {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.timeline__track {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: clamp(360px, 50vh, 520px);
}

.timeline__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.timeline__path path {
  fill: none;
  stroke: url(#timelineGradient);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(123, 47, 255, 0.6));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.timeline__nodes { position: absolute; inset: 0; }

.tl-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  pointer-events: auto;
  text-align: center;
  width: 150px;
}

.tl-node__dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 6px rgba(123, 47, 255, 0.15), 0 0 24px var(--purple);
  animation: heartbeat 2.2s var(--ease-in-out-cubic) infinite;
  transition: transform 0.4s, box-shadow 0.4s;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  56% { transform: scale(1); }
}

.tl-node__year {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.tl-node__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--white);
}

.tl-node:hover .tl-node__dot { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(0,245,255,.18), 0 0 30px var(--cyan); background: var(--cyan); }

/* States */
.tl-node[data-state="present"] .tl-node__dot { background: var(--cyan); box-shadow: 0 0 0 6px rgba(0,245,255,.18), 0 0 26px var(--cyan); }
.tl-node[data-state="future"]  { opacity: 0.7; }
.tl-node[data-state="future"] .tl-node__dot { background: var(--magenta); animation: heartbeat 2.2s infinite, futureFlicker 0.4s steps(2) infinite; }
.tl-node[data-state="future"] .tl-node__title { animation: futureFlicker 0.5s steps(3) infinite; }
@keyframes futureFlicker { 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.7} }

.tl-node[data-state="unknown"] .tl-node__dot {
  background: #222;
  box-shadow: 0 0 0 6px rgba(255,255,255,.05), 0 0 20px rgba(255,255,255,.15);
  animation: none;
}
.tl-node[data-state="unknown"] .tl-node__title {
  font-family: var(--font-mono);
  color: rgba(255,255,255,.4);
  animation: staticFlicker 0.12s steps(2) infinite;
}
@keyframes staticFlicker { 0%{opacity:.3; transform:translateX(0)} 50%{opacity:.7; transform:translateX(1px)} 100%{opacity:.4; transform:translateX(-1px)} }

@media (max-width: 720px) {
  .tl-node__title { display: none; }
  .tl-node { width: 60px; }
}