:root{
  --void:#04060c; --ivory:#ece7db; --slate:#8592ab; --amber:#ffb45c; --ice:#8fd4ff;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--void);color:var(--ivory);font-family:var(--sans);font-weight:300;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--amber);outline-offset:4px}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#gl.drag{cursor:grabbing}
#gl.hot{cursor:pointer}

/* ---------- letterbox: slides in when the camera commits to a place ---------- */
.bars i{position:fixed;left:0;right:0;height:0;background:#000;z-index:4;pointer-events:none;transition:height 1.7s cubic-bezier(.7,0,.2,1)}
.bars i:first-child{top:0}.bars i:last-child{bottom:0}
body.sel .bars i{height:6.5vh}

/* ---------- pins ---------- */
#labels{position:fixed;inset:0;z-index:3;pointer-events:none}
.pin{position:absolute;left:0;top:0;white-space:nowrap;display:flex;align-items:baseline;gap:8px;opacity:0;will-change:transform,opacity;padding-left:14px;text-shadow:0 0 14px #000,0 0 3px #000}
.pin i{font:italic 400 17px/1 var(--serif);letter-spacing:.01em;transition:font-size .4s var(--ease),color .3s}
.pin b{font-weight:300;font-size:12px;color:var(--amber);font-variant-numeric:tabular-nums;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .5s var(--ease)}
.pin.hot i{font-size:24px;color:#fff}
.pin.hot b,.pin.sel b{opacity:1;transform:none}
.pin.sel i{font-size:20px;color:var(--amber)}
.pin.hub i{color:#fff;font-size:15px}

/* ---------- brand + clock ---------- */
.brand{position:fixed;left:4vw;top:max(4.4vh,22px);z-index:5;pointer-events:none;transition:transform 1.6s var(--ease)}
.brand b{font:italic 400 30px/1 var(--serif);letter-spacing:.01em;font-weight:400}
.brand small{display:block;margin-top:9px;color:var(--slate);font-size:12.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
body.sel .brand{transform:translateY(calc(6.5vh - 4.4vh + 4px))}

/* ---------- trending feed ---------- */
.feed{position:fixed;left:4vw;top:22vh;bottom:16vh;width:min(320px,27vw);z-index:5;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent);
  transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1s}
body.sel .feed{opacity:0;transform:translateX(-46px);filter:blur(8px);pointer-events:none}
.feed h2{font:300 13px var(--sans);color:var(--slate);margin-bottom:14px;letter-spacing:.02em}
.feed ol{list-style:none;padding:0;position:relative}
.feed li{position:relative}
.feed li button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:baseline;width:100%;padding:4px 0;gap:14px}
.feed li button:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.feed .n{font:400 clamp(24px,2.5vw,34px)/1.06 var(--serif);letter-spacing:-.005em;transition:transform .6s var(--ease),color .4s;white-space:nowrap}
.feed li:hover .n,.feed li.hot .n{transform:translateX(14px);color:#fff}
.feed .p{font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.feed .p em{font-style:normal;margin-left:8px}
.up{color:var(--amber)}.dn{color:var(--ice)}
.feed li.flash .n{color:var(--amber);transition-duration:.1s}
.feed li.enter{opacity:0;transform:translateY(14px)}
.feed li{transition:opacity 1s var(--ease),transform 1s var(--ease)}

.hint{position:fixed;left:50%;top:max(4.4vh,22px);transform:translateX(-50%);z-index:5;font:italic 400 17px var(--serif);color:var(--slate);pointer-events:none;opacity:0;transition:opacity 1.6s;text-align:center;width:90vw}
.hint.on{opacity:.9}

/* ---------- destination: data materializes in the scene ---------- */
.dest{position:fixed;right:4.5vw;top:max(7.5vh,44px);width:min(440px,32vw);z-index:6;pointer-events:none;transform:scale(var(--k,1));transform-origin:top right}
.dest.on{pointer-events:auto}
.mat{opacity:0;filter:blur(12px);transform:translateY(12px);transition:opacity .35s ease,filter .35s ease,transform .35s ease}
.dest.on .mat{opacity:1;filter:none;transform:none;transition:opacity 1s ease var(--d,0s),filter 1.2s ease var(--d,0s),transform 1.3s var(--ease) var(--d,0s)}

.plate{margin:0 -8% 0;aspect-ratio:880/250}
.plate canvas{width:100%;height:100%;display:block;-webkit-mask-image:radial-gradient(ellipse 66% 62% at 50% 56%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 66% 62% at 50% 56%,#000 38%,transparent 100%)}

.dest h1{font:400 clamp(3.4rem,6.2vw,7rem)/.92 var(--serif);letter-spacing:-.025em;margin:-6% 0 10px -.03em;mix-blend-mode:plus-lighter;white-space:nowrap}
.dest h1 .ch{display:inline-block;opacity:0;filter:blur(16px);transform:translateY(.28em) scaleY(1.25);transition:opacity .3s,filter .3s,transform .3s}
.dest.on h1 .ch{opacity:1;filter:none;transform:none;transition:opacity .9s ease calc(var(--i)*55ms + .25s),filter 1.1s ease calc(var(--i)*55ms + .25s),transform 1.3s var(--ease) calc(var(--i)*55ms + .25s)}
.where{font-size:12.5px;color:var(--slate);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.line{font:italic 400 21px/1.35 var(--serif);color:rgba(236,231,219,.88);max-width:31ch;margin-top:14px}

.fare{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.fare .cur{font:italic 400 30px var(--serif);color:var(--amber)}
.fare .amt{font:400 84px/.9 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.fare .delta{font-size:13px;margin-left:10px;font-variant-numeric:tabular-nums}
.route{font-size:13.5px;color:var(--slate);margin-top:8px}
.spark{display:block;width:100%;height:58px;margin-top:14px;overflow:visible}
.sparkcap{font-size:12px;color:var(--slate);margin-top:4px;font-variant-numeric:tabular-nums}
#sp-line{stroke-dasharray:1200;stroke-dashoffset:1200}
.dest.on #sp-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.5,0,.1,1) 1.3s}

.land{font:italic 400 20px/1.4 var(--serif);margin-top:18px;max-width:33ch}
.land button{all:unset;cursor:pointer;color:var(--amber);border-bottom:1px solid rgba(255,180,92,.4);transition:border-color .3s}
.land button:hover{border-color:var(--amber)}
.land button:focus-visible{outline:1px solid var(--amber);outline-offset:3px}

.wx{display:flex;gap:16px;align-items:flex-start;margin-top:20px}
.wx .temp{font:400 60px/.9 var(--serif);letter-spacing:-.02em}
.wx .cond{font-size:15px;font-weight:400}
.wx .wxs{font-size:12.5px;color:var(--slate);margin-top:4px;line-height:1.5;max-width:30ch}
.fc{display:block;width:100%;height:54px;margin-top:8px;overflow:visible}
.fc text{fill:var(--slate);font:300 11px var(--sans);text-anchor:middle}
.fc text.t{fill:var(--ivory)}

.back{background:none;border:0;padding:0;font:inherit;box-sizing:border-box;cursor:pointer;margin-top:16px;font-size:13px;color:var(--slate);border-bottom:1px solid transparent;transition:color .3s,border-color .3s;display:inline-block}
.back:hover{color:var(--ivory);border-color:var(--slate)}
.back:focus-visible{outline:1px solid var(--amber);outline-offset:4px}

/* ---------- time ribbon ---------- */
.time{position:fixed;left:50%;bottom:max(5vh,28px);transform:translateX(-50%);width:min(780px,80vw);z-index:6;transition:bottom 1.6s cubic-bezier(.7,0,.2,1),opacity 1.4s,filter 1.4s}
body.sel .time{bottom:calc(6.5vh + 26px)}
.time.pre{opacity:0;filter:blur(8px)}
.cap{display:flex;justify-content:space-between;gap:24px;font-size:13px;color:var(--slate);margin-bottom:14px;font-variant-numeric:tabular-nums}
.cap span:last-child{font:italic 400 17px/1.2 var(--serif);color:var(--ivory);text-align:right}
.ribwrap{position:relative;height:22px;cursor:ew-resize;touch-action:none}
#rib{width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.knob{position:absolute;top:-14px;bottom:-14px;width:1px;background:linear-gradient(transparent,#fff 25%,#fff 75%,transparent);box-shadow:0 0 12px 1px rgba(255,220,170,.7);pointer-events:none;will-change:left}
.knob span{position:absolute;top:calc(100% + 2px);left:0;transform:translateX(-50%);font-size:12px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:20;background:var(--void);display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity 2.4s ease 1.1s}
#intro.go{opacity:0;pointer-events:none}
#intro .mark{font:italic 400 clamp(60px,11vw,168px)/1 var(--serif);animation:resolve 2.6s var(--ease) both;transition:transform 3s var(--ease),filter 2s}
#intro.go .mark{transform:scale(1.25);filter:blur(10px)}
#intro p{font-size:14px;color:var(--slate);letter-spacing:.06em;animation:fadein 2s ease .9s both;transition:opacity 1s}
#intro.go p{opacity:0}
#intro .bar{display:block;width:120px;height:1px;background:rgba(255,255,255,.12);overflow:hidden;transition:opacity .6s}
#intro .bar b{display:block;height:100%;width:0;background:var(--amber);transition:width .4s}
#intro.go .bar{opacity:0}
@keyframes resolve{from{letter-spacing:.42em;filter:blur(18px);opacity:0}to{letter-spacing:.03em;filter:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#fail[hidden]{display:none}
#fail{position:fixed;inset:0;z-index:30;display:grid;place-items:center;text-align:center;padding:24px;font:italic 22px var(--serif);background:var(--void)}

/* ---------- small screens: the panel becomes a sheet that slides over the lower globe ---------- */
@media (max-width:820px){
  .feed{top:auto;bottom:calc(5vh + 92px);left:5vw;width:60vw;height:32vh}
  .feed h2{margin-bottom:8px}
  .dest{transform:none;left:5vw;right:5vw;width:auto;top:auto;bottom:calc(6.5vh + 96px);max-height:52vh;overflow-y:auto;
    background:linear-gradient(transparent,rgba(4,6,12,.72) 18%);padding-top:28px;scrollbar-width:none}
  .plate,.fc,.sparkcap{display:none}
  .spark{height:36px}
  .dest h1{font-size:3.6rem;margin-top:0}
  .fare .amt{font-size:56px}
  .line{font-size:18px}
  .time{width:88vw}
  body.sel .time{bottom:calc(6.5vh + 20px)}
  .brand b{font-size:26px}
  .hint{font-size:15px;top:auto;bottom:calc(5vh + 78px)}
}
@media (prefers-reduced-motion:reduce){
  #intro .mark,#intro p{animation:none}
  .mat,.dest h1 .ch{transition-duration:.01s!important;transition-delay:0s!important}
}

/* ---------- retour: toujours visible quand une destination est ouverte ---------- */
.exit{position:fixed;left:4vw;top:calc(6.5vh + 78px);z-index:8;display:flex;align-items:center;gap:12px;background:none;border:0;padding:8px 4px;cursor:pointer;
  font:italic 400 20px var(--serif);color:var(--ivory);opacity:0;transform:translateX(-16px);pointer-events:none;transition:opacity .8s var(--ease) 1s,transform 1s var(--ease) 1s}
body.sel .exit{opacity:1;transform:none;pointer-events:auto}
.exit .x{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(236,231,219,.45);transition:border-color .3s,transform .5s var(--ease),background .3s}
.exit .x::before,.exit .x::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.exit .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.exit:hover .x{border-color:var(--amber);transform:rotate(90deg);background:rgba(255,180,92,.12)}
.exit:hover{color:#fff}
@media (max-width:820px){.exit{top:calc(6.5vh + 64px)}}