/* ==========================================================================
   METROPULSE RAPID TRANSIT - ADVANCED ANIMATIONS & METRO TRAIN RUNNER
   ========================================================================== */

/* Keyframe: Marquee for Live Network Ticker */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Keyframe: Pulse Ping */
@keyframes pulsePing {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  70%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Keyframe: Blink for PIDs & Alerts */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Keyframe: Laser Scanner sweep for QR Ticket */
@keyframes laserScan {
  0% {
    top: 5%;
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 92%;
    opacity: 0.2;
  }
}

/* Keyframe: Floating Glow */
@keyframes floatGlow {
  0%, 100% {
    transform: translateY(0px);
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.2);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(56, 189, 248, 0.4);
  }
}

/* ==========================================================================
   HERO METRO TRAIN RUNNER SCENE
   ========================================================================== */
.train-scene-container {
  position: relative;
  width: 100%;
  height: 480px;
  background: linear-gradient(180deg, #050813 0%, #0c1427 60%, #111b33 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-glow);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 80px rgba(0, 0, 0, 0.5);
}

/* Night Sky & Stars */
.train-scene-sky {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 40px 60px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 120px 180px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 280px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 420px 140px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 600px 50px, #a855f7, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 750px 120px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 920px 90px, #38bdf8, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 1100px 160px, #ffffff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 600px 300px;
  animation: starsDrift 60s linear infinite;
  opacity: 0.6;
}

@keyframes starsDrift {
  from { background-position: 0 0; }
  to { background-position: -600px 0; }
}

/* City Silhouette Parallax Layers */
.train-scene-city-back {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 200%;
  height: 180px;
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 800px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 180' fill='%230e182e'%3E%3Cpath d='M0,180 L0,120 L25,120 L25,100 L45,100 L45,180 L60,180 L60,60 L85,60 L85,180 L110,180 L110,90 L135,90 L135,180 L155,180 L155,40 L180,40 L180,180 L220,180 L220,80 L240,80 L240,180 L270,180 L270,110 L300,110 L300,180 L330,180 L330,50 L350,30 L370,50 L370,180 L400,180 L400,70 L430,70 L430,180 L460,180 L460,100 L485,100 L485,180 L520,180 L520,60 L545,60 L545,180 L580,180 L580,85 L610,85 L610,180 L640,180 L640,45 L670,45 L670,180 L700,180 L700,95 L725,95 L725,180 L760,180 L760,65 L785,65 L785,180 L800,180 Z'/%3E%3C/svg%3E");
  animation: cityParallaxBack 40s linear infinite;
  opacity: 0.5;
}

@keyframes cityParallaxBack {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.train-scene-city-front {
  position: absolute;
  bottom: 110px;
  left: 0;
  width: 200%;
  height: 220px;
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 700px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 220' fill='%2314223d'%3E%3Cpath d='M0,220 L0,150 L30,150 L30,220 L50,220 L50,80 L80,80 L80,220 L105,220 L105,120 L135,120 L135,220 L160,220 L160,50 L195,50 L195,220 L230,220 L230,110 L260,110 L260,220 L290,220 L290,75 L320,75 L320,220 L355,220 L355,140 L385,140 L385,220 L420,220 L420,40 L445,20 L470,40 L470,220 L500,220 L500,90 L530,90 L530,220 L560,220 L560,130 L590,130 L590,220 L620,220 L620,60 L650,60 L650,220 L680,220 L680,105 L700,105 L700,220 Z'/%3E%3Ccircle cx='177' cy='35' r='3' fill='%23ef4444'/%3E%3Ccircle cx='445' cy='15' r='3' fill='%23ef4444'/%3E%3C/svg%3E");
  animation: cityParallaxFront 20s linear infinite;
  opacity: 0.85;
}

@keyframes cityParallaxFront {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Elevated Viaduct Track & Pillars */
.elevated-viaduct {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  z-index: 5;
}

.viaduct-rail {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 14px;
  background: linear-gradient(180deg, #38bdf8 0%, #0369a1 40%, #0f172a 100%);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

.viaduct-sleepers {
  position: absolute;
  top: 44px;
  left: 0;
  width: 200%;
  height: 8px;
  background: repeating-linear-gradient(90deg, #1e293b 0px, #1e293b 16px, #070d1a 16px, #070d1a 32px);
  animation: trackTies 0.6s linear infinite;
}

@keyframes trackTies {
  0% { transform: translateX(0); }
  100% { transform: translateX(-32px); }
}

.viaduct-beam {
  position: absolute;
  top: 52px;
  left: 0;
  width: 100%;
  height: 22px;
  background: #111c33;
  border-bottom: 2px solid #0284c7;
}

.viaduct-pillars {
  position: absolute;
  top: 74px;
  left: 0;
  width: 200%;
  height: 66px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 160px, #1e293b 160px, #1e293b 195px, transparent 195px, transparent 320px);
  animation: pillarsMove 4s linear infinite;
}

@keyframes pillarsMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-320px); }
}

/* Overhead Catenary Electric Wire */
.catenary-wire {
  position: absolute;
  top: 185px;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(56, 189, 248, 0.4);
  z-index: 15;
}

.catenary-poles {
  position: absolute;
  top: 175px;
  left: 0;
  width: 200%;
  height: 140px;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 240px, rgba(56, 189, 248, 0.5) 240px, rgba(56, 189, 248, 0.5) 244px, transparent 244px, transparent 480px);
  animation: polesMove 3s linear infinite;
  z-index: 15;
}

@keyframes polesMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-480px); }
}

/* ==========================================================================
   SLEEK METRO TRAIN RUNNER OBJECT
   ========================================================================== */
.metro-train-wrapper {
  position: absolute;
  bottom: 95px;
  left: -900px;
  width: 780px;
  height: 75px;
  z-index: 20;
  animation: trainRunCycle 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes trainRunCycle {
  0% {
    left: -850px;
    transform: translateX(0);
  }
  35% {
    left: calc(50% - 390px); /* Cruises smoothly in center view */
  }
  65% {
    left: calc(50% - 390px);
  }
  100% {
    left: calc(100% + 200px); /* Speeds away smoothly into distance */
  }
}

/* Realistic Metro Coach Assembly */
.train-assembly {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  position: relative;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
}

/* Lead Engine Locomotive (Aerodynamic Bullet Nose) */
.train-car {
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #0284c7 38%, #0369a1 70%, #0f172a 100%);
  height: 60px;
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.train-lead-car {
  width: 220px;
  border-top-right-radius: 42px 30px;
  border-bottom-right-radius: 20px 10px;
}

.train-mid-car {
  width: 170px;
}

.train-tail-car {
  width: 200px;
  border-top-left-radius: 35px 25px;
}

/* Windows Band */
.train-windows {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  height: 18px;
  display: flex;
  gap: 10px;
  padding: 0 4px;
}

.train-lead-car .train-windows {
  right: 45px;
}

.train-window {
  flex: 1;
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 60%, #e0f2fe 100%);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  animation: windowFlicker 4s ease-in-out infinite alternate;
}

@keyframes windowFlicker {
  0%, 100% { opacity: 0.95; filter: brightness(1); }
  50% { opacity: 0.85; filter: brightness(1.15); }
}

/* Front Cockpit Windshield */
.train-windshield {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 24px;
  background: #0f172a;
  border-radius: 3px 20px 4px 3px;
  border: 1px solid #38bdf8;
  box-shadow: inset 0 0 8px #38bdf8;
  overflow: hidden;
}

.train-windshield::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(45deg);
}

/* High-beam Headlight & Light Cone */
.train-headlight {
  position: absolute;
  bottom: 14px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 20px 6px #38bdf8, 0 0 35px 12px rgba(255, 255, 255, 0.9);
}

.train-light-beam {
  position: absolute;
  bottom: 8px;
  right: -280px;
  width: 280px;
  height: 35px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(56, 189, 248, 0.35) 40%, transparent 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  pointer-events: none;
}

/* Tail red lights */
.train-tail-lights {
  position: absolute;
  bottom: 15px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px 3px #ef4444;
}

/* Pantograph / Catenary Spark */
.train-pantograph {
  position: absolute;
  top: -18px;
  right: 50px;
  width: 26px;
  height: 20px;
  border-top: 2px solid #94a3b8;
  border-left: 2px solid #94a3b8;
  transform: skewX(-20deg);
}

.catenary-spark {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px 5px #38bdf8;
  opacity: 0;
  animation: sparkBurst 3.2s infinite;
}

@keyframes sparkBurst {
  0%, 85%, 100% { opacity: 0; transform: scale(0.5); }
  86% { opacity: 1; transform: scale(1.6); }
  88% { opacity: 0.2; transform: scale(0.8); }
  90% { opacity: 1; transform: scale(1.8); }
}

/* Bogie Wheels with Rotating Reflection */
.train-bogies {
  position: absolute;
  bottom: -10px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
}

.train-wheel {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #64748b 30%, #0f172a 70%);
  border-radius: 50%;
  border: 2px solid #334155;
  box-shadow: inset 0 0 4px #000;
  animation: wheelSpin 0.35s linear infinite;
}

@keyframes wheelSpin {
  100% { transform: rotate(360deg); }
}

/* Train Controls Overlay in Hero */
.scene-overlay-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-glow);
}

.scene-speedometer {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 30;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--primary-light);
}

.speedometer-val {
  font-weight: 700;
  color: #ffffff;
  font-size: 1.1rem;
}

/* ==========================================================================
   LIVE TRACKER RADAR & MOVING TRAIN STATIONS
   ========================================================================== */
.live-route-track {
  position: relative;
  padding: 3rem 1.5rem;
  margin: 2rem 0;
}

.track-line-bg {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  transform: translateY(-50%);
}

.track-line-progress {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 45%;
  height: 8px;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #10b981);
  border-radius: 4px;
  transform: translateY(-50%);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
  transition: width 1.5s ease-in-out;
}

.track-stations-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.station-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-bounce);
}

.station-node:hover {
  transform: translateY(-4px);
}

.station-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f172a;
  border: 3px solid #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  transition: var(--transition-fast);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.station-node.completed .station-circle {
  background: #0284c7;
  border-color: #38bdf8;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.8);
}

.station-node.active .station-circle {
  background: #10b981;
  border-color: #34d399;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.9);
  animation: currentStationPulse 1.5s infinite;
}

@keyframes currentStationPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.station-name {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  max-width: 90px;
}

.station-node.active .station-name {
  color: var(--text-bright);
  font-weight: 700;
}

/* Moving Train Icon Marker along track */
.track-train-marker {
  position: absolute;
  top: calc(50% - 22px);
  left: calc(5% + 45% - 22px);
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0284c7, #06b6d4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.9), 0 0 0 4px rgba(255, 255, 255, 0.2);
  z-index: 25;
  transition: left 1.5s ease-in-out;
  animation: trainBob 1.8s ease-in-out infinite;
}

@keyframes trainBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==========================================================================
   CROWD OCCUPANCY SENSOR BAR
   ========================================================================== */
.coach-occupancy-list {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.coach-box {
  flex: 1;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  text-align: center;
  transition: var(--transition-fast);
}

.coach-box:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
}

.coach-name {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text-bright);
}

.crowd-bar-track {
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}

.crowd-bar-fill {
  height: 100%;
  border-radius: 4px;
}

.crowd-low { background: #10b981; }
.crowd-med { background: #f59e0b; }
.crowd-high { background: #ef4444; }