.metro{
  position:fixed;left:0;top:0;height:100vh;
  width:60px;z-index:100;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
}
.metro__track{
  position:absolute;left:50%;top:8%;bottom:8%;
  width:2px;transform:translateX(-50%);
  background:var(--border-subtle);border-radius:2px;
}
.metro__progress{
  position:absolute;left:50%;top:8%;
  width:2px;height:0%;transform:translateX(-50%);
  background:linear-gradient(to bottom,var(--accent),rgba(var(--accent-rgb),0.3));
  border-radius:2px;
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.4),0 0 20px rgba(var(--accent-rgb),0.15);
  transition:height 0.15s linear;
}
.metro__glow{
  position:absolute;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.6),0 0 30px rgba(var(--accent-rgb),0.3);
  opacity:0;transition:opacity 0.3s ease;
}
.metro__glow.visible{opacity:1}

.metro__stations{
  position:absolute;left:50%;top:8%;bottom:8%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  justify-content:space-between;
  pointer-events:all;
}
.metro__station{
  position:relative;width:12px;height:12px;
  border-radius:50%;background:var(--bg-secondary);
  border:2px solid var(--border-subtle);
  cursor:pointer;transition:all var(--transition-base);
  z-index:2;
}
.metro__station::before{
  content:'';position:absolute;
  top:50%;left:50%;width:24px;height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid transparent;
  transition:all var(--transition-base);
}
.metro__station.active{
  border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.5);
}
.metro__station.active::before{
  border-color:rgba(var(--accent-rgb),0.2);
  animation:station-pulse 2s infinite;
}
.metro__station.passed{
  border-color:rgba(var(--accent-rgb),0.4);
  background:rgba(var(--accent-rgb),0.3);
}

.metro__station-label{
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);white-space:nowrap;
  font-size:0.7rem;font-weight:600;letter-spacing:0.05em;
  color:var(--text-muted);opacity:0;
  transition:all var(--transition-fast);
  pointer-events:none;text-transform:uppercase;
}
.metro__station:hover .metro__station-label,
.metro__station.active .metro__station-label{
  opacity:1;color:var(--accent);
}

/* Branch lines for creative stations */
.metro__station[data-color="design"]{--s-color:var(--accent-design);--s-rgb:var(--accent-design-rgb)}
.metro__station[data-color="video"]{--s-color:var(--accent-video);--s-rgb:var(--accent-video-rgb)}
.metro__station[data-color="motion"]{--s-color:var(--accent-motion);--s-rgb:var(--accent-motion-rgb)}
.metro__station[data-color="research"]{--s-color:var(--accent-research);--s-rgb:var(--accent-research-rgb)}
.metro__station[data-color="pres"]{--s-color:var(--accent-pres);--s-rgb:var(--accent-pres-rgb)}
.metro__station[data-color].active{
  border-color:var(--s-color);background:var(--s-color);
  box-shadow:0 0 12px rgba(var(--s-rgb),0.5);
}
.metro__station[data-color].active .metro__station-label{color:var(--s-color)}
.metro__station[data-color].active::before{border-color:rgba(var(--s-rgb),0.2)}
.metro__station[data-color].passed{
  border-color:rgba(var(--s-rgb),0.4);background:rgba(var(--s-rgb),0.3);
}

@keyframes station-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}
  50%{transform:translate(-50%,-50%) scale(1.6);opacity:0}
}

@media(max-width:1024px){.metro{width:45px}}
@media(max-width:768px){.metro{width:38px}.metro__station-label{display:none}}
@media(max-width:480px){.metro{width:30px}.metro__station{width:8px;height:8px}}
[dir="rtl"] .metro{left:auto;right:0}
[dir="rtl"] .metro__station-label{left:auto;right:calc(100% + 12px)}
[dir="rtl"] .section{padding-left:0;padding-right:80px}
@media(max-width:1024px){[dir="rtl"] .section{padding-right:60px}}
@media(max-width:768px){[dir="rtl"] .section{padding-right:50px}}
@media(max-width:480px){[dir="rtl"] .section{padding-right:40px}}