/* ==========================================================================
   ROADMAP / PROGRESSION STYLES
   Extends css/style.css. `.roadmap-item` is one repeatable phase — meant
   to become a PHP loop over a roadmap_phases table later.
   ========================================================================== */

.roadmap-timeline{max-width:820px; margin:0 auto; padding:0 5% 150px;}

.roadmap-item{position:relative; padding-left:74px; padding-bottom:44px;}
.roadmap-item::before{
  content:""; position:absolute; left:23px; top:50px; bottom:-14px; width:2px;
  background:var(--border);
  transition:background 1.1s ease .25s, box-shadow 1.1s ease .25s;
}
/* Once a phase scrolls into view (existing .reveal/.in-view system, zero extra JS) its
   connecting line "lights up" frost-blue — the timeline fills in as you scroll down. */
.roadmap-item.in-view::before{
  background:linear-gradient(180deg, var(--frost), var(--frost-dim));
  box-shadow:0 0 10px rgba(111,216,255,0.35);
}
.roadmap-item:last-child{padding-bottom:0;}
.roadmap-item:last-child::before{display:none;}

.roadmap-marker{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  border:2px solid var(--border); background:var(--panel);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--text-dim);
  z-index:1;
}
.roadmap-item.completed .roadmap-marker{border-color:#8fe0a8; color:#8fe0a8; background:rgba(143,224,168,0.08);}
.roadmap-item.current .roadmap-marker{
  border-color:var(--frost); color:var(--frost-glow); background:rgba(111,216,255,0.1);
  box-shadow:0 0 22px rgba(111,216,255,0.4);
  animation:roadmap-pulse 2.4s ease-in-out infinite;
}
.roadmap-item.upcoming .roadmap-marker{opacity:0.55;}
@keyframes roadmap-pulse{
  0%,100%{box-shadow:0 0 22px rgba(111,216,255,0.4);}
  50%{box-shadow:0 0 34px rgba(111,216,255,0.7);}
}
@media(prefers-reduced-motion:reduce){
  .roadmap-item.current .roadmap-marker{animation:none;}
}

.roadmap-card{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel);
  transition:border-color .25s ease, transform .3s ease, box-shadow .3s ease;
}
.roadmap-item.current .roadmap-card{border-color:var(--frost-dim);}
.roadmap-card:hover{
  transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
}
.roadmap-card-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05);
  transition:transform .5s ease;
}
.roadmap-card:hover .roadmap-card-bg{transform:scale(1.15);}
.roadmap-card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(5,8,16,0.94) 0%, rgba(5,8,16,0.82) 45%, rgba(5,8,16,0.55) 100%);
}
.roadmap-card-content{position:relative; z-index:2; padding:28px 26px;}
.roadmap-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.roadmap-card h3{font-family:var(--font-display); font-size:1.1rem; letter-spacing:0.3px;}
.roadmap-date{color:var(--text-dim); font-size:0.78rem; white-space:nowrap;}

.roadmap-status-badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px;
  font-size:0.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}
.roadmap-status-badge::before{content:"●"; font-size:0.5rem;}
.roadmap-status-badge.completed{color:#8fe0a8; border:1px solid rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}
.roadmap-status-badge.current{color:var(--frost-glow); border:1px solid var(--frost-dim); background:rgba(111,216,255,0.08);}
.roadmap-status-badge.upcoming{color:var(--text-dim); border:1px solid var(--border); background:rgba(142,162,179,0.06);}

.roadmap-card p{color:var(--text-dim); font-size:0.88rem; line-height:1.75; margin-top:6px;}
.roadmap-list{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
.roadmap-list li{font-size:0.85rem; color:var(--text-dim); display:flex; gap:9px; line-height:1.5;}
.roadmap-list li::before{content:"›"; color:var(--frost-glow); font-weight:700; flex-shrink:0;}

@media(max-width:560px){
  .roadmap-item{padding-left:60px;}
  .roadmap-marker{width:40px; height:40px; font-size:0.78rem;}
  .roadmap-item::before{left:19px;}
}