/* Small pixel scenes for individual location hubs. */
.loc_scene{position:relative;width:100%;aspect-ratio:320/56;margin:64px 0 0;pointer-events:none;overflow:hidden;border-bottom:1px solid rgba(213,206,199,.06)}
.loc_scene svg{display:block;width:100%;height:100%}
.loc_scene_train{animation:locSceneTrain 18s steps(205,end) infinite}
.loc_scene_stars{animation:locSceneTwinkle 3.2s steps(1,end) infinite}
.loc_scene_windows{animation:locSceneWindows 6s steps(1,end) infinite}
.loc_scene_ripples{animation:locSceneRipple 1.6s steps(1,end) infinite}
.loc_scene_cursor{animation:locSceneCursor 1.1s steps(1,end) infinite}
@keyframes locSceneTrain{0%{transform:translateX(-90px)}60%,100%{transform:translateX(320px)}}
@keyframes locSceneTwinkle{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes locSceneWindows{0%,70%,100%{opacity:1}72%,90%{opacity:.55}}
@keyframes locSceneCursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes locSceneRipple{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@media(max-width:600px){.loc_scene{aspect-ratio:auto;height:150px;margin:48px 0 0}}
@media(prefers-reduced-motion:reduce){.loc_scene_train,.loc_scene_stars,.loc_scene_windows,.loc_scene_ripples,.loc_scene_cursor{animation:none}.loc_scene_train{transform:translateX(130px)}}
.loc_scene_beacon{animation:locSceneCursor 1.6s steps(1,end) infinite}
.loc_scene_fanlights{animation:locSceneWindows 7s steps(1,end) infinite}
.loc_scene_door{opacity:0;animation:locSceneDoor 14s steps(1,end) infinite}
.loc_scene_bus{animation:locSceneBus 20s steps(230,end) infinite}
@keyframes locSceneDoor{0%,55%{opacity:0}56%,82%{opacity:1}83%,100%{opacity:0}}
@keyframes locSceneBus{0%{transform:translateX(-60px)}50%,100%{transform:translateX(340px)}}
@media(prefers-reduced-motion:reduce){.loc_scene_beacon,.loc_scene_fanlights,.loc_scene_door,.loc_scene_bus{animation:none}.loc_scene_bus{transform:translateX(-60px)}}
/* Generic helpers shared by all city scenes (see docs/scene_lib.py). */
.loc_scene_blink{animation:locSceneCursor 1.2s steps(1,end) infinite}
.loc_scene_pulse{animation:locScenePulse 4s steps(1,end) infinite}
.loc_scene_bob{animation:locSceneBob 2s steps(1,end) infinite}
.loc_scene_move{animation:locSceneMove var(--dur,22s) steps(240,end) infinite}
.loc_scene_drift{animation:locSceneDrift var(--dur,40s) steps(320,end) infinite}
.loc_scene_sweep{animation:locSceneSweep 3s steps(1,end) infinite}
.loc_scene_sweep_b{animation:locSceneSweep 3s steps(1,end) -1.5s infinite}
.loc_scene_appear{opacity:0;animation:locSceneDoor 14s steps(1,end) infinite}
@keyframes locScenePulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes locSceneBob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(-1px)}}
@keyframes locSceneMove{0%{transform:translateX(var(--from,-80px))}60%,100%{transform:translateX(var(--to,340px))}}
@keyframes locSceneDrift{0%{transform:translateX(var(--from,0px))}100%{transform:translateX(var(--to,-320px))}}
@keyframes locSceneSweep{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.loc_scene_blink,.loc_scene_pulse,.loc_scene_bob,.loc_scene_move,.loc_scene_drift,.loc_scene_sweep,.loc_scene_sweep_b,.loc_scene_appear{animation:none}.loc_scene_appear{opacity:0}}
/* Phones only show the middle ~130 units of the scene, so movers take a shorter, more frequent trip there. */
@media(max-width:600px){
.loc_scene_train{animation:locSceneTrainM 8s steps(110,end) infinite}
.loc_scene_bus{animation:locSceneBusM 9s steps(110,end) infinite}
.loc_scene_move{animation-name:locSceneMoveM;animation-duration:calc(var(--dur,22s)*.4)}
@keyframes locSceneTrainM{0%{transform:translateX(10px)}75%,100%{transform:translateX(235px)}}
@keyframes locSceneBusM{0%{transform:translateX(40px)}75%,100%{transform:translateX(235px)}}
@keyframes locSceneMoveM{0%{transform:translateX(var(--mfrom,40px))}75%,100%{transform:translateX(var(--mto,235px))}}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.loc_scene_train,.loc_scene_bus,.loc_scene_move{animation:none}}