/* ══════════════════════════════════════════════════
   Animated Roadmap — Playful Neo-Brutalist Theme
   Matching the vibrant Know-Us Team Showcase aesthetic
   ══════════════════════════════════════════════════ */

.roadmap-card {
  --rm-ink: #0B0F0D;
  --rm-border: 2.5px solid var(--rm-ink);
  --rm-shadow: 3.5px 3.5px 0px var(--rm-ink);
  --rm-shadow-hover: 5px 5px 0px var(--rm-ink);
  --rm-shadow-lg: 6px 6px 0px var(--rm-ink);

  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--block-radius, 24px);
  background: transparent;
}

body.light-theme .roadmap-card {
  --rm-ink: #0B0F0D;
}

/* ── SVG Path Container ── */
.roadmap-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.roadmap-path-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
}

body.light-theme .roadmap-path-bg {
  stroke: var(--rm-ink);
  opacity: 0.32;
}

.roadmap-path-active {
  fill: none;
  stroke: #4ade80;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.75)) drop-shadow(0 0 22px rgba(74, 222, 128, 0.4));
  transition: stroke-dashoffset 0.05s linear;
}

body.light-theme .roadmap-path-active {
  stroke: var(--rm-ink);
  filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.22));
}

/* ── Decorative Corner Badge (Sticker Pill Style) ── */
.roadmap-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 15px;
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0B0F0D;
  background: #facc15;
  border: var(--rm-border);
  box-shadow: var(--rm-shadow);
  border-radius: 999px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-2.5deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  user-select: none;
}

.roadmap-badge:hover {
  transform: rotate(0deg) scale(1.06);
  box-shadow: var(--rm-shadow-hover);
}

/* ── Milestone Waypoints & Markers ── */
.milestone {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.milestone.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered entry delays */
.milestone[data-delay="1"] {
  transition-delay: 0.25s;
}

.milestone[data-delay="2"] {
  transition-delay: 0.5s;
}

.milestone[data-delay="3"] {
  transition-delay: 0.75s;
}

.milestone[data-delay="4"] {
  transition-delay: 1.0s;
}

/* Marker dot — Neo-brutalist circle node */
.milestone-dot-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.milestone-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: var(--rm-border);
  box-shadow: 2.5px 2.5px 0px var(--rm-ink);
  background: #ffffff;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.milestone:hover .milestone-dot {
  transform: scale(1.25) rotate(-6deg);
  box-shadow: 3.5px 3.5px 0px var(--rm-ink);
}

/* ── Milestone Status Accents & Checkmarks ── */
.milestone--complete .milestone-dot {
  background: #4ade80;
}

.milestone--complete .milestone-dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--rm-ink);
  line-height: 1;
}

.milestone--in-progress .milestone-dot {
  background: #fde047;
}

.milestone--in-progress .milestone-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--rm-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rmPulse 1.3s ease-in-out infinite alternate;
}

@keyframes rmPulse {
  from {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }

  to {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 1;
  }
}

.milestone--pending .milestone-dot {
  background: #ffffff;
  border-style: dashed;
  box-shadow: 2px 2px 0px var(--rm-ink);
  opacity: 0.9;
}

/* ── Milestone Labels (Pill Badges Inspired by Know-Us Themes) ── */
.milestone-label {
  padding: 6px 15px;
  border-radius: 999px;
  border: var(--rm-border);
  background: #ffffff;
  color: var(--rm-ink);
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: var(--rm-shadow);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  user-select: none;
}

/* ── Color Assignments Matching Know-Us Cards ── */
/* 1. Kick-off — Theme Mint/Green */
.milestone:nth-of-type(1) .milestone-label,
.milestone[data-delay="1"] .milestone-label {
  background: #86efac;
  color: #064e3b;
}

.milestone:nth-of-type(1) .milestone-dot,
.milestone[data-delay="1"] .milestone-dot {
  background: #86efac;
}

/* 2. Design — Theme Cyan */
.milestone:nth-of-type(2) .milestone-label,
.milestone[data-delay="2"] .milestone-label {
  background: #38bdf8;
  color: #082f49;
}

.milestone:nth-of-type(2) .milestone-dot,
.milestone[data-delay="2"] .milestone-dot {
  background: #38bdf8;
}

/* 3. Development — Theme Yellow (In-Progress) */
.milestone:nth-of-type(3) .milestone-label,
.milestone--in-progress .milestone-label {
  background: #fde047;
  color: #422006;
}

.milestone:nth-of-type(3) .milestone-dot,
.milestone--in-progress .milestone-dot {
  background: #fde047;
}

/* 4. Launch — Theme Lavender/Purple (Upcoming) */
.milestone:nth-of-type(4) .milestone-label,
.milestone--pending .milestone-label {
  background: #c084fc;
  color: #3b0764;
}

/* ── Label Position Modifiers & Responsive Alignment ── */
.milestone--label-bottom .milestone-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.milestone--label-top .milestone-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.milestone--label-left .milestone-label {
  position: absolute;
  right: calc(100% + 10px);
}

/* Hover effects with neo-brutalist pop */
.milestone:hover .milestone-label {
  transform: translate(-2px, -3px) scale(1.06);
  box-shadow: var(--rm-shadow-hover);
}

.milestone--label-bottom:hover .milestone-label {
  transform: translateX(-50%) translateY(-4px) scale(1.06);
  box-shadow: var(--rm-shadow-hover);
}

.milestone--label-top:hover .milestone-label {
  transform: translateX(-50%) translateY(-4px) scale(1.06);
  box-shadow: var(--rm-shadow-hover);
}

.milestone--label-left:hover .milestone-label {
  transform: translateY(-4px) scale(1.06);
  box-shadow: var(--rm-shadow-hover);
}



/* ── Responsive ── */
@media (max-width: 767px) {
  .roadmap-card {
    height: 300px;
  }

  .milestone-label {
    font-size: 0.68rem;
    padding: 4px 11px;
    border-width: 2px;
  }

  .milestone-dot-wrap {
    width: 24px;
    height: 24px;
  }

  .milestone-dot {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }

  .roadmap-badge {
    font-size: 0.6rem;
    padding: 4px 10px;
    border-width: 2px;
  }
}