/* Parallax Timeline v2 - fresh implementation */
/* Namespace: ptl2-* to avoid conflicts */

.ptl2 {
  position: relative; overflow: visible; padding: 10vh 0 15vh;
  background: linear-gradient(180deg, #0b1025 0%, #0f1b3d 50%, #0b1025 100%);
  color: #e5e7eb;
}
.ptl2-viewport { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; }

/* SVG spine */
.ptl2-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ptl2-path {
  stroke: #FDC30B; /* theme gold */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(253,195,11,0.55)) drop-shadow(0 0 18px rgba(253,195,11,0.35));
}

/* Drawn trail underlay for extra glow */
.ptl2-path-underlay {
  stroke: rgba(253,195,11,0.25); /* theme gold glow */
  stroke-width: 10;
  filter: blur(2px);
}

/* Moving head */
.ptl2-head { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffe27a 45%, #FDC30B 75%);
  box-shadow: 0 0 16px 6px rgba(253, 195, 11, 0.55), 0 0 22px 10px rgba(253, 195, 11, 0.35);
  will-change: transform; pointer-events: none; z-index: 2;
}

/* Milestones layout */
.ptl2-milestones { position: relative; display: grid; gap: 16vh; }
.ptl2-item { position: relative; min-height: 120px; }

/* Dot positioned by JS */
.ptl2-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px #FDC30B inset, 0 0 10px 2px rgba(253,195,11,0.45);
  transform: translate3d(-6px, -6px, 0) scale(.7); opacity: 0; z-index: 1;
  transition: opacity .25s ease, transform .25s ease; }
.ptl2-dot.active { opacity: 1; transform: translate3d(-6px, -6px, 0) scale(1); }

/* Connector from dot to its card */
.ptl2-connector{ position:absolute; height:2px; left:0; top:0; width:0;
  background: linear-gradient(90deg, rgba(253,195,11,.9), rgba(253,195,11,.25));
  box-shadow: 0 0 6px rgba(253,195,11,.35);
  border-radius: 2px; transform-origin: 0 50%; pointer-events:none; z-index:0;
  opacity: 0; transition: opacity .25s ease; }
.ptl2-connector.active{ opacity: 1; }


/* Card */
.ptl2-card { position: relative; width: min(600px, 90%); background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
  padding: 20px 22px; color: #1f2937;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08); opacity: 0; transform: translateY(60px) scale(0.98);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); visibility: hidden; }
.ptl2-card.visible { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }

/* Year pill */
.ptl2-card .year { display:inline-block; margin-bottom: 8px; font-weight: 700;
  color:#1e3a8a; background: linear-gradient(90deg,#FDC30B,#f59e0b);
  padding: 4px 10px; border-radius: 10px; }

/* Alternate left/right alignment */
.ptl2-item[data-side="left"] .ptl2-card { margin-left: 0; margin-right: auto; }
.ptl2-item[data-side="right"] .ptl2-card { margin-left: auto; margin-right: 0; }

/* Section heading (optional) */

/* Hide moving head to avoid "double dot" appearance */
.ptl2-head{ display:none !important; }

.ptl2-title { text-align: center; margin: 0 0 8vh; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .ptl2-milestones { gap: 14vh; }
  .ptl2-card { width: 92%; }
}