/* Trains follow projected tracks in the shared Canvas renderer. */
#stationTransit, #tunnelTransit, #chaseTransit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.metro-bridge { position: absolute; left: 654px; top: 65px; width: 650px; height: 80px; overflow: hidden; transform: rotate(10deg); transform-origin: left bottom; }
.metro-bridge-cars { position: absolute; left: 0; bottom: 0; display: flex; gap: 4px; width: max-content; height: 68px; animation: metro-bridge-pass 32s linear -12s infinite; }
.metro-bridge-cars > img { display: block; width: 220px; height: 68px; }
@keyframes metro-bridge-pass { from { transform: translateX(-690px); } to { transform: translateX(710px); } }
body.portrait .metro-bridge { left: 190px; top: 108px; width: 590px; height: 60px; transform: rotate(-17deg); }
body.portrait .metro-bridge-cars { height: 49px; }
body.portrait .metro-bridge-cars > img { width: 159px; height: 49px; }
body.page-hidden .metro-bridge-cars, body.chase-active .metro-bridge-cars { animation-play-state: paused; }
/* A passing headlight wash, bounded enough to keep the scene legible. */
.chase-flash { background: linear-gradient(105deg, #fff3c87a, #22ddee22 30%, transparent 65%); }
@keyframes headlight-wash { 0% { opacity: 0; } 22% { opacity: .7; } 100% { opacity: 0; } }
#subwayChase.reduced #chaseTransit { opacity: .4; }
#subwayChase.reduced { background: #080f24 url('../assets/subway-rush/scene/station-motion-desktop.webp') center / cover; }
@media (orientation: portrait) { #subwayChase.reduced { background-image: url('../assets/subway-rush/scene/station-motion-mobile.webp'); } }
@media (prefers-reduced-motion: reduce) { .metro-bridge-cars { animation: none; transform: translateX(12%); } }