/* v60 motion layer: station transit, split-flap titles, line progress, express. */
#station-transit{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden;border-radius:inherit}
#station-transit .transit-band{position:absolute;left:0;right:0;top:38%;height:96px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 22px;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--line) 92%,#000) 12%,var(--line) 50%,color-mix(in srgb,var(--line) 92%,#000) 88%,transparent);
 color:#041019;transform:translateX(-110%);opacity:0;box-shadow:0 0 40px color-mix(in srgb,var(--line) 60%,transparent)}
#station-transit .transit-band small{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.28em;opacity:.7}
#station-transit .transit-name{display:flex;gap:2px;font:800 34px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
#station-transit.is-running .transit-band{animation:transit-sweep .86s cubic-bezier(.65,0,.25,1) both}
#station-transit[data-direction=back].is-running .transit-band{animation-name:transit-sweep-back}
#station-transit.is-running::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 40%,color-mix(in srgb,var(--line) 22%,transparent) 50%,transparent 60%);background-size:300% 100%;animation:transit-streak .86s linear both}
@keyframes transit-sweep{0%{transform:translateX(-110%);opacity:0}22%{transform:translateX(0);opacity:1}72%{transform:translateX(0);opacity:1}100%{transform:translateX(110%);opacity:0}}
@keyframes transit-sweep-back{0%{transform:translateX(110%);opacity:0}22%{transform:translateX(0);opacity:1}72%{transform:translateX(0);opacity:1}100%{transform:translateX(-110%);opacity:0}}
@keyframes transit-streak{from{background-position:100% 0}to{background-position:-50% 0}}
.flap-cell{display:inline-block;min-width:.56em;text-align:center}
.transit-name .flap-cell{padding:3px 2px;border-radius:3px;background:#04101922;box-shadow:inset 0 -1px #0002}
.flap-row{display:inline}
.flap-row .flap-cell{min-width:0;text-align:left}
.flap-settle{animation:flap-settle .18s ease-out}
@keyframes flap-settle{from{transform:rotateX(70deg);opacity:.4}to{transform:none;opacity:1}}
.line-progress{position:relative;display:flex;justify-content:space-between;align-items:center;margin:-10px 22px 12px;height:12px;flex:none}
.line-progress::before,.line-progress::after{content:'';position:absolute;left:5px;right:5px;top:5px;height:2px;border-radius:2px;background:#ffffff1c}
.line-progress::after{right:auto;width:calc((100% - 10px) * var(--progress,0));background:linear-gradient(90deg,#73b8ff,#61ffbd,#c5a1ff,#ffc875,#ff809b,#72eeff);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.line-progress i{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;border:2px solid color-mix(in srgb,var(--line) 55%,#1b2a3c);background:#0d1825;transition:background .3s,transform .3s,box-shadow .3s}
.line-progress i[data-visited=true]{background:var(--line);border-color:var(--line)}
.line-progress i[data-current=true]{transform:scale(1.45);box-shadow:0 0 0 3px color-mix(in srgb,var(--line) 30%,transparent),0 0 12px var(--line)}
#express{display:block;margin:14px auto 0;padding:9px 16px;border:1px solid #9fe9ff66;border-radius:999px;background:#06202dcc;color:#dff8ff;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.04em;cursor:pointer;animation:express-in .6s .4s cubic-bezier(.2,.8,.2,1) both}
#express[hidden]{display:none}
#express b{color:#ffc875}
#express:hover,#express:focus-visible{background:#0a3446;outline:none;border-color:#c5f6ff}
@keyframes express-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#station-transit{display:none}.flap-settle,#express,.line-progress::after,.line-progress i{animation:none;transition:none}}
body:has(#phone-launcher:not([hidden])) .line-progress,body:has(#phone-launcher:not([hidden])) #station-transit{display:none}