/* twrail.cc homepage (index.html only). Other pages keep css/style.css. */
:root{
  color-scheme:dark;
  --bg:#0B111C;
  --card:#121A29;
  --muted:#0F1624;
  --ink:#E8EDF6;
  --sub:#8D97A9;
  --line:rgba(141,151,169,.18);
  --line-strong:rgba(141,151,169,.34);
  --rail:#5E9BDF;
  --hsr:#E8964B;
  --mrt:#3FBF83;
  --bus:#E0605A;
  --bike:#E8A13C;
  --route:#4DD0E1;
  --explore:#4DB6AC;
  --express:#E0605A;
  --chukuang:#E3B34C;
  --local:#3FBF83;
  --ontime:#3FBF83;
  --delayed:#E8963C;
  --gutter:16px;
  --max:1120px;
  --zh:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --num:"Barlow","Noto Sans TC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--zh);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stamp{font-family:var(--num);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--sub)}
h1,h2,h3{font-weight:500;line-height:1.2;letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--rail);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(11,17,28,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:baseline;gap:12px;font-size:17px;font-weight:500}
.brand .stamp{font-size:11px}
.nav-links{display:flex;gap:4px}
.nav-links a{font-size:14px;color:var(--sub);padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px}
.nav-links a:hover{color:var(--ink);background:var(--card)}

/* hero */
.hero{position:relative;padding:56px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 80% 30%,rgba(94,155,223,.14),transparent 70%),
  radial-gradient(40% 40% at 20% 90%,rgba(232,150,75,.08),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:40px}
.hero h1{font-size:clamp(34px,6.4vw,62px);margin:16px 0 20px}
.hero h1 em{font-style:normal;color:var(--rail)}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--sub);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 36px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--line-strong);border-radius:8px;font-size:15px;color:var(--ink);transition:border-color .2s,background .2s}
.btn .stamp{font-size:10px;letter-spacing:.18em}
.btn:hover{border-color:var(--rail);background:rgba(94,155,223,.08)}
.btn.primary{background:var(--rail);border-color:var(--rail);color:#0B111C}
.btn.primary .stamp{color:rgba(11,17,28,.7)}
.btn.primary:hover{background:#79ADE6}

.hero-phone{position:relative;align-self:end;justify-self:center;width:min(100%,380px);height:min(120vw,560px);overflow:hidden}
.hero-phone::after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:26%;background:linear-gradient(to bottom,transparent,var(--bg) 85%);pointer-events:none}
/* CSS device frame: titanium rim + black glass border + screen; all sizes in container units so it scales without stretching */
.phone{container-type:inline-size;width:100%}
.phone .rim{padding:1.4cqw;border-radius:16.2cqw;background:linear-gradient(165deg,#5a5f67 0%,#23262b 18%,#15171b 50%,#2c3036 82%,#4a4f57 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.06),0 32px 64px rgba(0,0,0,.6)}
.phone .glass{padding:1.6cqw;border-radius:14.8cqw;background:#050607}
.phone img{width:100%;height:auto;border-radius:13.2cqw;background:#0B111C}

/* departure board: the one orchestrated motion */
.board{--acc:var(--rail);position:relative;background:var(--muted);border:1px solid var(--line);border-top:3px solid var(--acc);padding:0 16px 4px;transition:border-top-color .6s}
.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.board-route{font-size:18px;font-weight:500;display:flex;align-items:baseline;gap:8px}
.board-route .arrow{color:var(--sub);font-family:var(--num)}
.board-sys{font-family:var(--num);font-size:12px;letter-spacing:.2em;color:var(--acc);transition:color .6s}
.board-clock{font-family:var(--num);font-size:16px;font-weight:500;color:var(--sub);margin-left:auto}
.board-rows{height:calc(4 * 64px);overflow:hidden}
.board-list{list-style:none;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.board-list.snap{transition:none}
.brow{display:grid;grid-template-columns:72px 1fr auto;column-gap:12px;align-items:center;height:64px;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.brow .t{font-family:var(--num);font-size:26px;font-weight:600;line-height:1;display:flex;gap:1px}
.brow .t .ch{display:inline-block;min-width:.56em;text-align:center;transform-origin:50% 50%}
.brow .t .ch.colon{min-width:.3em}
.brow .type{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:500;line-height:1.2}
.brow .type b{font-weight:500;color:var(--acc)}
.brow .type .no{font-family:var(--num);font-weight:500;color:var(--ink)}
.brow .meta{font-size:12.5px;color:var(--sub);margin-top:3px;font-family:var(--num);font-weight:400}
.brow .meta .zh{font-family:var(--zh)}
.brow .right{text-align:right}
.brow .status{font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.brow .status.on{color:var(--ontime)}
.brow .status.late{color:var(--delayed)}
.brow .status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s ease-out infinite}
.brow .fare{font-family:var(--num);font-size:14px;color:var(--sub);margin-top:3px}
.brow.enter .ch{animation:flap .5s cubic-bezier(.2,.9,.3,1) both}
.brow.enter .type,.brow.enter .right{animation:fadeup .5s .2s ease-out both}
.board-foot{display:flex;justify-content:space-between;padding:10px 0 6px;font-size:12px;color:var(--sub);font-family:var(--num);letter-spacing:.06em}
@keyframes flap{0%{transform:rotateX(90deg);opacity:0}45%{transform:rotateX(-18deg);opacity:1}100%{transform:rotateX(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,191,131,.6)}70%{box-shadow:0 0 0 8px rgba(63,191,131,0)}100%{box-shadow:0 0 0 0 rgba(63,191,131,0)}}

/* rail line divider */
.railline{position:relative;height:88px;margin-top:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--muted);overflow:hidden}
.railline .wrap{position:relative;height:100%}
.railline .track{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;height:2px;background:var(--line-strong)}
.railline .stop{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--rail)}
.railline .lbl{position:absolute;top:calc(50% + 12px);transform:translateX(-50%);}
.railline .lbl.first{transform:none}
.railline .lbl.last{transform:translateX(-100%)}
.railline .lbl{font-size:12px;color:var(--sub);white-space:nowrap;font-family:var(--num);letter-spacing:.08em}
.railline .train{position:absolute;top:50%;left:0;width:34px;height:8px;margin-top:-4px;border-radius:2px;background:var(--rail);box-shadow:0 0 18px rgba(94,155,223,.8);animation:run 9s cubic-bezier(.45,.05,.55,.95) infinite}
.railline .train::after{content:"";position:absolute;right:100%;top:3px;width:60px;height:2px;background:linear-gradient(to left,rgba(94,155,223,.8),transparent)}
@keyframes run{0%{left:var(--gutter)}100%{left:calc(100% - var(--gutter) - 34px)}}

/* features */
.features{padding:80px 0 64px}
.sec-head{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:36px}
.sec-head h2{font-size:clamp(26px,4vw,40px)}
.sec-head p{color:var(--sub);max-width:36em}
.grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{--acc:var(--rail);background:var(--bg);padding:28px 24px 0;display:flex;flex-direction:column;min-height:640px;position:relative;overflow:hidden}
.cell .stamp{color:var(--acc)}
.cell h3{font-size:22px;margin:10px 0 8px}
.cell p{font-size:14.5px;color:var(--sub);max-width:30em}
.cell .shot{margin-top:auto;padding-top:24px;height:470px;overflow:hidden;display:flex;justify-content:center;position:relative}
.cell .shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to bottom,transparent,var(--bg) 90%);pointer-events:none}
.cell .shot .phone{width:280px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cell:hover .shot .phone{transform:translateY(-12px)}
.cell.text{min-height:0;padding-bottom:28px;justify-content:center}
.cell.text ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.cell.text li{display:flex;align-items:baseline;gap:12px;font-size:15px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cell.text li .stamp{min-width:54px}
.cell.text li span:last-child{color:var(--sub);font-size:13.5px;margin-left:auto;text-align:right}

/* iPhone Duo: book-fold device; right cover swings open on its spine, its back is the outer screen */
.duo{padding:80px 0 72px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--muted),var(--bg) 60%)}
.duo-stage{perspective:1800px;max-width:760px;margin:40px auto 0;padding:0 2%}
.fold{container-type:inline-size;position:relative;width:100%;aspect-ratio:863/537;transform:translateX(0);transition:transform 1.1s cubic-bezier(.65,0,.3,1)}
.fold.closed{transform:translateX(25%)}
.half{position:absolute;top:0;width:50%;height:100%}
.half.left{left:0}
.half.right{left:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.65,0,.3,1)}
.fold.closed .half.right{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;transition:visibility 0s .55s}/* 不靠 backface-visibility：在轉到 90° 側立時切換正反面 */
.face.back{transform:rotateY(180deg)}
.fold.closed .face.front{visibility:hidden}
.fold:not(.closed) .face.back{visibility:hidden}
.half .rim{height:100%;padding:.7cqw;background:linear-gradient(165deg,#5a5f67 0%,#23262b 18%,#15171b 50%,#2c3036 82%,#4a4f57 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 48px rgba(0,0,0,.55)}
.half .glass{height:100%;padding:.8cqw;background:#050607}
.half .scr{height:100%;background:#05080c no-repeat;background-size:200% auto;background-position:left top}
.half.left .rim,.half.left .glass,.half.left .scr{border-radius:5cqw 0 0 5cqw}
.half.right .rim,.half.right .glass,.half.right .scr{border-radius:0 5cqw 5cqw 0}
.half.left .scr{background-image:url(../images/home/duo-inner.jpg)}
.face.front .scr{background-image:url(../images/home/duo-inner.jpg);background-position:97% top}/* 右窗從 48.5% 起：渲染圖右窗起點略左於實體中線，右緣只少掉系統欄空白 */
.face.back .scr{background-image:url(../images/home/duo-outer.jpg);background-size:100% auto}
.half.left .rim{padding-right:0}.half.left .glass{padding-right:.4cqw}
.half.right .rim{padding-left:0}.half.right .glass{padding-left:.4cqw}
.fold::after{content:"";position:absolute;top:1.5cqw;bottom:1.5cqw;left:50%;width:1px;margin-left:-.5px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.09) 20%,rgba(255,255,255,.09) 80%,transparent);opacity:1;transition:opacity .4s .6s;pointer-events:none}
.fold.closed::after{opacity:0;transition-delay:0s}
.duo-ctl{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.duo-ctl button{font:inherit;font-size:14px;color:var(--sub);background:none;border:1px solid var(--line-strong);border-radius:8px;min-height:44px;padding:0 18px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.duo-ctl button[aria-pressed="true"]{color:var(--ink);border-color:var(--rail);background:rgba(94,155,223,.12)}
.duo-ctl .cap{flex-basis:100%;text-align:center;font-size:13px;color:var(--sub);margin-top:6px;min-height:1.6em}
.duo-static{display:none;grid-template-columns:1fr;gap:24px;max-width:760px;margin:40px auto 0}
.duo-static figure{margin:0}
.duo-static .rim{padding:.7cqw}
.duo-static figcaption{font-size:13px;color:var(--sub);margin-top:10px}
.duo-static img{width:100%;height:auto;border-radius:3cqw;display:block}
.duo-static .phone .rim{border-radius:4.4cqw}.duo-static .phone .glass{border-radius:3.7cqw;padding:.8cqw}
.duo-static .one{max-width:54%}
.duo-notes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);max-width:760px;margin:36px auto 0}
.duo-notes div{background:var(--bg);padding:18px 20px}
.duo-notes .stamp{color:var(--rail)}
.duo-notes p{font-size:14px;color:var(--sub);margin-top:6px}

/* release strip */
.release{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--muted)}
.release .wrap{display:grid;grid-template-columns:1fr;gap:12px;padding:22px var(--gutter);align-items:center}
.release .ver{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.release .ver .n{font-family:var(--num);font-size:34px;font-weight:600;line-height:1;color:var(--hsr)}
.ticker{overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ticker .run{display:flex;gap:48px;width:max-content;animation:tick 28s linear infinite}
.ticker span{white-space:nowrap;font-size:15px;color:var(--ink)}
.ticker span i{font-style:normal;color:var(--sub);font-family:var(--num);font-size:12px;letter-spacing:.18em;margin-right:12px}
@keyframes tick{to{transform:translateX(-50%)}}

/* download */
.download{padding:88px 0 56px;text-align:left}
.download h2{font-size:clamp(28px,4.6vw,44px);margin-bottom:12px}
.download p{color:var(--sub);max-width:34em}
.download .cta{margin-top:28px}
footer{border-top:1px solid var(--line);padding:24px 0 40px;font-size:13px;color:var(--sub)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

@media (min-width:720px){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
  .hero-phone{width:min(100%,400px);height:780px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sec-head{grid-template-columns:1fr 1fr;align-items:end}
  .release .wrap{grid-template-columns:auto 1fr;gap:40px}
  .duo-notes{grid-template-columns:repeat(3,1fr)}
  .duo-static{grid-template-columns:1fr 1fr;align-items:start}
  .duo-static .one{max-width:none}
}
@media (min-width:1000px){
  .hero{padding-top:80px}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:480px){
  .brow{grid-template-columns:62px 1fr auto}
  .brow .t{font-size:23px}
  .board-route{font-size:16px}
  .nav-links a:nth-child(2),.nav-links a:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brow.enter .ch,.brow.enter .type,.brow.enter .right,.brow .status .dot,.ticker .run,.cell .shot .phone{animation:none;transition:none}
  .board-list{list-style:none;transition:none}
  .railline .train{animation:none;left:38%}
  .duo-stage{display:none}
  .duo-static{display:grid}
}

/* production additions: language switcher, footer links, per-language CJK fonts */
.nav-right{display:flex;align-items:center;gap:4px}
.lang-select{font:inherit;font-family:var(--num);font-size:13px;letter-spacing:.04em;color:var(--sub);background:transparent;border:1px solid var(--line-strong);border-radius:6px;min-height:36px;padding:0 26px 0 10px;margin-left:4px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.lang-select:hover{color:var(--ink);border-color:var(--rail)}
.lang-select option{background:var(--card);color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-links a:hover{color:var(--ink)}
html:lang(ja){--zh:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif}
html:lang(ko){--zh:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
html:lang(ja) body,html:lang(ko) body{font-family:var(--zh);word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) body{word-break:normal}
@media (max-width:480px){
  .brand .stamp{display:none}
  .nav-links a{padding:10px 8px}
}
/* the closed fold is translated 25% right; clip it so mobile browsers do not widen the layout viewport */
.duo{overflow:hidden}