/* The 3D Kuala Lumpur scene behind the home page (assets/scene.js). This file re-skins site.css and adds the flight; it loads after site.css.
   Palette: paper-blue in light mode, night navy in dark mode. The token names from site.css are kept, so every component follows. */
:root{
  --bg:#f4f8fc;--surface:#fbfdff;--sunk:#e6f1fa;--ink:#0b2a6b;--muted:#3f5b94;--line:#c3dcef;
  --accent:#1559c9;--accent-ink:#fff;--accent-soft:#dcecfb;--glow:rgba(42,166,232,.14);
  --shadow:0 1px 2px rgba(11,42,107,.08),0 10px 30px rgba(11,42,107,.10);
  --fx:#2aa6e8;--hard:#0b2f8a;--f-pix:"Pixelify Sans",ui-monospace,Menlo,Consolas,monospace;
  /* scene colours, read by scene.js */
  --sky1:#eaf4fb;--sky2:#cfe6f7;--far:#bcd9ee;--mid:#8fc3e8;--near:#5aa6dc;--glass:#e9f6ff;--orb:#2c63c9;--ring:#8fd2ff;
  color-scheme:light}
:root[data-theme="dark"]{
  --bg:#050912;--surface:#0b1830;--sunk:#08122a;--ink:#d6ecff;--muted:#8fb2d8;--line:#1c3a66;
  --accent:#7fd3ff;--accent-ink:#04142c;--accent-soft:#12305a;--glow:rgba(127,211,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.4);
  --fx:#3aa0ee;--hard:#000;
  --sky1:#050a1a;--sky2:#0d1a38;--far:#12264a;--mid:#1a3a70;--near:#235396;--glass:#7fd3ff;--orb:#3d79e0;--ring:#7fd3ff;
  color-scheme:dark}

/* the scene behind everything */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:none}
html.gl #gl{display:block}
html.gl body{background:linear-gradient(var(--sky1),var(--sky2)) fixed}

/* Readability: every section sits on a solid paper panel with a hard offset shadow (the hard-shadow window look), and the city shows in the gaps.
   No backdrop-filter: it would sample the moving scene on every frame. */
html.gl main>section.block,html.gl main>.hero{
  width:min(calc(100% - 28px),calc(var(--col) + 56px));margin:72px auto;padding-bottom:24px;
  background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px}
html.gl main>.hero{padding-block:28px 24px}
html.gl section.block{padding-top:44px}
html.gl .hero::before{display:none}
html.gl .top{border-bottom:2px solid var(--fx)}
html.gl section.contact{margin-top:72px;border-top:2px solid var(--fx)}
html.gl .dock{border:2px solid var(--fx);box-shadow:4px 4px 0 var(--hard)}
html.gl .card,html.gl .ent,html.gl .note-card{border-radius:10px}
@media (max-width:700px){
  html.gl main>section.block,html.gl main>.hero{width:calc(100% - 16px);margin:28px auto;box-shadow:4px 4px 0 var(--hard)}
}

/* The opening sits straight on the city: give its words a plate or a halo so they stay readable */
html.gl .cur-center{background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px;padding:20px 26px}
html.gl .cur-hero .hero-title,html.gl .cur-hero .for,html.gl .cur-hero .lede{text-shadow:0 0 24px var(--bg),0 0 12px var(--bg),0 0 5px var(--bg),0 0 2px var(--bg)}
html.gl .cur-hero .hero-title .l2{color:var(--accent)}

html.flying .dock{opacity:0;pointer-events:none;transform:translate(-50%,20px)}

/* ---- The flight: a tall scroll section, sticky captions, HUD ---- */
.enter{display:none}
html.gl .enter{display:block;height:1250vh;position:relative}
.enter-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 20px 40px;pointer-events:none}
.ride-caps{position:relative;width:min(440px,100%);min-height:140px;counter-reset:cap}
.ride-cap{counter-increment:cap;position:absolute;left:0;bottom:0;margin:0;padding:14px 16px;background:var(--surface);color:var(--ink);border:2px solid var(--fx);box-shadow:5px 5px 0 var(--hard);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.ride-cap.on{opacity:1;transform:none}
.ride-cap::before{content:"SECTOR " counter(cap,decimal-leading-zero) " / 06";display:block;font:600 11px var(--f-pix);letter-spacing:.16em;color:var(--fx);margin-bottom:6px}
.ride-cap b{display:block;font:700 1.35rem/1.15 var(--f-display);margin-bottom:4px}
.ride-cap span{display:block;font-size:.9rem;line-height:1.45;color:var(--muted)}
.ride-hint{position:absolute;right:20px;bottom:44px;margin:0;font:600 14px var(--f-pix);color:var(--ink);background:var(--surface);border:2px solid var(--fx);padding:6px 12px}
.fly-skip{position:absolute;left:20px;top:78px;pointer-events:auto;display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;font:600 15px var(--f-pix);text-decoration:none;background:var(--accent);color:var(--accent-ink);border-radius:10px;box-shadow:3px 3px 0 var(--hard)}
.fly-skip:hover{transform:translate(-1px,-1px)}
.hud{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.hud.on{opacity:1}
.hud-c{position:absolute;width:26px;height:26px;border:0 solid var(--fx);opacity:.85}
.hud-c.tl{left:14px;top:70px;border-width:2px 0 0 2px}
.hud-c.tr{right:14px;top:70px;border-width:2px 2px 0 0}
.hud-c.bl{left:14px;bottom:14px;border-width:0 0 2px 2px}
.hud-c.br{right:14px;bottom:14px;border-width:0 2px 2px 0}
.hud-side{position:absolute;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hud-read{margin:0;display:flex;gap:8px;align-items:baseline;font:600 13px var(--f-pix);color:var(--ink);background:var(--surface);border:2px solid var(--fx);padding:4px 10px;letter-spacing:.06em}
.hud-read span:first-child{color:var(--fx)}
.hud-rail{position:relative;width:4px;height:min(38vh,320px);background:color-mix(in srgb,var(--fx) 25%,transparent);margin-right:6px}
.hud-fill{position:absolute;inset:0;background:var(--fx);transform-origin:top;transform:scaleY(0)}
.hud-ticks{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.hud-ticks li{position:absolute;right:-6px;display:flex;align-items:center;gap:6px;transform:translateY(-50%);flex-direction:row-reverse}
.hud-ticks i{width:14px;height:14px;background:var(--surface);border:2px solid var(--fx);transform:rotate(45deg)}
.hud-ticks b{font:600 11px var(--f-pix);color:var(--muted);margin-right:4px}
.hud-ticks li.on i{background:var(--fx)}
.hud-ticks li.on b{color:var(--ink)}
.hud-sec{margin:0;max-width:170px;text-align:right;font:600 12px/1.25 var(--f-pix);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hud-tags{position:absolute;inset:0;overflow:hidden}
.lm-tag{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;will-change:transform;pointer-events:none}
.lm-tag.show{opacity:1}
.lm-tag>*{position:absolute;white-space:nowrap}
.lm-dot{left:-5px;top:-5px;width:10px;height:10px;border:2px solid var(--fx);background:var(--surface);transform:rotate(45deg)}
.lm-tag b{left:16px;top:-46px;font:600 13px var(--f-pix);letter-spacing:.05em;color:var(--ink);background:var(--surface);border:2px solid var(--fx);padding:3px 8px}
.lm-tag span{left:16px;top:-22px;font-size:11px;color:var(--muted);background:var(--surface);padding:1px 6px;border:1px solid var(--fx);border-top:0}
.lm-tag::before{content:"";position:absolute;left:0;top:-46px;width:2px;height:46px;background:var(--fx)}
@media (max-width:600px){
  .enter-sticky{padding:0 16px 32px}
  .ride-hint{right:16px;bottom:196px;top:auto}
  .fly-skip{left:14px;top:auto;bottom:196px;min-height:44px;padding:8px 14px;font-size:14px}
  .hud-side{right:14px}.hud-sec,.hud-ticks b{display:none}.hud-read{font-size:12px;padding:3px 8px}
  .hud-rail{height:30vh}
  .lm-tag b{font-size:11px;padding:2px 6px;top:-40px}.lm-tag span{display:none}.lm-tag::before{height:40px;top:-40px}
}
@media (prefers-reduced-motion:reduce){.ride-cap,.hud,.lm-tag{transition:none}}

/* ---- Notes pages: the same blues, a still picture of the city behind the article ----
   (The notes pages only load site.css and this file; the 3D scene itself runs on the home page and /flight/.) */
:root{--note-sky:url("city-light.webp")}
:root[data-theme="dark"]{--note-sky:url("city-dark.webp")}
.sky{background:linear-gradient(var(--sky1),var(--sky2))}
.sky::before{top:0;bottom:0;left:0;width:100%;background:var(--note-sky) center/cover no-repeat;opacity:.55;animation:none;transform:none}
.top{border-bottom:2px solid var(--fx)}
main.wrap>.post{margin:44px auto 64px;padding:44px clamp(18px,4vw,44px) 28px;background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px}
@media (max-width:700px){main.wrap>.post{margin:20px auto 40px;box-shadow:4px 4px 0 var(--hard);border-radius:4px}}

/* ---- The buffer after the opening: no panels, the city turns ---- */
.spin{display:none}
html.gl .spin{display:block;height:150vh;position:relative;pointer-events:none}
.spin-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:end center;padding:0 16px max(120px,16svh)}
.spin-tag{margin:0;display:grid;gap:3px;text-align:center;padding:12px 20px;background:var(--bg);border:2px solid var(--fx);box-shadow:5px 5px 0 var(--hard);border-radius:6px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.spin.on .spin-tag{opacity:1;transform:none}
.spin-tag b{font:600 .75rem var(--f-pix);letter-spacing:.2em;text-transform:uppercase;color:var(--fx)}
.spin-tag span{font:500 1.05rem var(--f-display);color:var(--ink);letter-spacing:.02em}
.spin-tag i{font:normal 500 .75rem var(--f-mono);color:var(--muted)}
@media (max-width:700px){html.gl .spin{height:130vh}}
@media (prefers-reduced-motion:reduce){.spin-tag{transition:none}}

/* ---- Section shots: panels step aside so the scene shows (wide screens only) ---- */
.stage{display:none}
html.gl .stage{display:block;height:120vh;position:relative;pointer-events:none}
.stage-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;justify-items:start;padding:0 clamp(14px,6vw,96px)}
.stage-tag{margin:0;display:grid;gap:4px;max-width:20rem;padding:16px 22px;background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.stage.on .stage-tag{opacity:1;transform:none}
.stage-tag b{font:600 .75rem var(--f-pix);letter-spacing:.2em;text-transform:uppercase;color:var(--fx)}
.stage-tag span{font:700 clamp(1.4rem,2.4vw,1.9rem)/1.1 var(--f-display);color:var(--ink)}
.stage-tag i{font:normal 500 .8rem var(--f-mono);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.stage-tag{transition:none}}
@media (min-width:1000px){
  /* the panel keeps to one side and the building shows on the other */
  html.gl main>section.block.side-l{width:min(calc(100% - 28px),720px);margin-left:clamp(14px,4vw,72px);margin-right:auto}
  html.gl main>section.block.side-r{width:min(calc(100% - 28px),720px);margin-right:clamp(14px,4vw,72px);margin-left:auto}
  /* skill tree: a column of branches each side and Merdeka 118 standing in the middle */
  html.gl main>section.block.tree-split{background:none;border:0;box-shadow:none;padding:0;margin:72px auto;width:min(calc(100% - 28px),calc(var(--col) + 56px))}
  html.gl .tree-split .sec-head,html.gl .tree-split .marquee,html.gl .tree-split .st-legend{background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px}
  html.gl .tree-split .sec-head{padding:24px 28px;margin:0 0 22px;max-width:36rem}
  html.gl .tree-split .marquee{margin:0 0 28px;padding:10px 0;-webkit-mask-image:none;mask-image:none}
  html.gl .tree-split .skilltree{gap:22px;margin-top:0}
  html.gl .tree-split .st-legend{padding:10px 18px;justify-self:start}
  html.gl .tree-split .st-root{display:none}
  html.gl .tree-split .st-branches{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:max(34%,300px);row-gap:26px;padding-top:0}
  html.gl .tree-split .st-branches::before,html.gl .tree-split .st-branches::after{display:none}
  html.gl .tree-split .st-branch{background:var(--bg);border:2px solid var(--fx);box-shadow:5px 5px 0 var(--hard);border-radius:6px}
}

/* Notes: no panel, so nothing ghosts through. The folders sit straight on the city under a plate with the heading (two to a row when wide). */
html.gl main>section.block#notes{background:none;border:0;box-shadow:none;padding:0}
html.gl #notes .nb-head{padding:22px 26px;background:var(--bg);border:2px solid var(--fx);box-shadow:6px 6px 0 var(--hard);border-radius:6px}
@media (min-width:1000px){
  html.gl #notes .fd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:84px 32px;margin-top:44px}
}


/* ---- No panels, at every width: every block sits straight on the city (like Notes). The cards keep their own surfaces;
   headings and any loose text get a small plate so they stay readable. ---- */
@media all{
  html.gl main>section.block,html.gl main>.hero{background:none;border:0;box-shadow:none;padding-bottom:0}
  html.gl main>.hero{padding-block:0}
  html.gl main>section.block{padding-top:0}
  html.gl .sec-head,html.gl #me .hero-text,html.gl .goal-list>li,html.gl .jr-legend,html.gl .fact-tiles>li,html.gl .pl-head{background:var(--bg);border:2px solid var(--fx);box-shadow:5px 5px 0 var(--hard);border-radius:6px}
  html.gl .sec-head{padding:22px 26px;margin-bottom:26px}
  html.gl #me .hero-text{padding:24px 26px}
  html.gl .goal-list>li{padding:18px 20px}
  html.gl .fact-tiles>li{padding:14px 16px}
  html.gl .jr-legend{padding:8px 14px}
}

/* Cards that sat on the old panel were slightly see-through; with no panel the city would ghost through them. Make them solid. */
html.gl .jr-card,html.gl .uni-cf .cf-details,html.gl .uni-card,html.gl .st-branch,html.gl .fact-tiles li,html.gl .goal-list li,html.gl .card,html.gl .pj,html.gl .note-card,html.gl .ent,html.gl .pl-card,html.gl .stat,html.gl .stat-tile{background-color:var(--surface)}

/* The top bar sits above everything on the page (folders, cards) and is solid, so content goes behind it. Below the Ctrl+K dialog (z 20). */
.top{z-index:18;background:var(--bg)}

/* Phones: more of the city between the blocks, and plates a little tighter */
@media (max-width:700px){
  html.gl main>section.block,html.gl main>.hero{margin:84px auto}
  html.gl main>#me{margin-top:60px}
  html.gl .sec-head{padding:16px 18px;margin-bottom:20px}
  html.gl #me .hero-text{padding:18px}
  html.gl #notes .nb-head{padding:16px 18px}
  html.gl section.contact{margin-top:84px}
}

/* a lead-in whose label sits on the right (the building is on the left) */
html.gl .stage-r .stage-sticky{justify-items:end}

/* ---- COCKPIT: the drone pilot's overlay (built by scene.js into #hud) ---- */
.cp{position:absolute;inset:0;pointer-events:none;font-family:var(--f-pix)}
.cp-compass{position:absolute;left:50%;top:76px;width:min(380px,56vw);transform:translateX(-50%);display:grid;justify-items:center;gap:2px}
.cp-tape{position:relative;width:100%;height:30px;overflow:hidden;background:var(--bg);border:2px solid var(--fx);box-shadow:4px 4px 0 var(--hard);border-radius:4px}
.cp-track{position:absolute;left:50%;top:0;height:100%;width:0;will-change:transform}
.cp-track i{position:absolute;top:0;height:100%;width:0;border-left:2px solid var(--fx);opacity:.55}
.cp-track i.card{opacity:1;border-left-width:3px}
.cp-track i b{position:absolute;left:3px;top:7px;font:600 11px var(--f-pix);color:var(--ink);letter-spacing:.04em}
.cp-track i.card b{font-size:14px;color:var(--accent)}
.cp-caret{position:absolute;left:50%;top:26px;width:0;height:0;border:6px solid transparent;border-bottom-color:var(--accent);border-top:0;margin-left:-6px;transform:translateY(6px)}
.cp-hdg{margin-top:10px;font:600 13px var(--f-pix);letter-spacing:.14em;color:var(--ink);background:var(--bg);border:2px solid var(--fx);padding:2px 10px;border-radius:4px}
.cp-spd{position:absolute;left:22px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 8px;padding:10px 14px;background:var(--bg);border:2px solid var(--fx);box-shadow:4px 4px 0 var(--hard);border-radius:4px}
.cp-spd span{font:600 10px var(--f-pix);letter-spacing:.2em;color:var(--fx);grid-column:1/-1}
.cp-spd b{font:600 26px/1 var(--f-pix);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;min-width:3ch}
.cp-spd small{font:500 11px var(--f-mono);color:var(--muted)}
.cp-spd .cp-sp2{margin-top:8px}
.cp-adi{position:absolute;left:50%;bottom:22px;width:132px;height:132px;transform:translateX(-50%);filter:drop-shadow(4px 4px 0 var(--hard))}
.cp-adi-svg{width:100%;height:100%;display:block}
.cp-sky{fill:var(--glass)}.cp-gnd{fill:var(--near)}
.cp-hl{stroke:#fff;stroke-width:1.6;fill:none}
.cp-pl path{stroke:#fff;stroke-width:1;opacity:.85;fill:none}
.cp-ring{fill:none;stroke:var(--fx);stroke-width:3}
.cp-tick{stroke:var(--ink);stroke-width:2;fill:none}
.cp-ac{stroke:#ffcc00;stroke-width:3.2;fill:none;stroke-linejoin:round}
.cp-dot{fill:#ffcc00}
.cp-cross{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);opacity:.85}
.cp-cross i{position:absolute;background:var(--fx);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 70%,transparent)}
.cp-cross i:nth-child(1){left:0;top:50%;width:14px;height:2px}.cp-cross i:nth-child(2){right:0;top:50%;width:14px;height:2px}
.cp-cross i:nth-child(3){left:50%;top:0;width:2px;height:14px}.cp-cross i:nth-child(4){left:50%;bottom:0;width:2px;height:14px}
.cp-id{position:absolute;right:34px;top:92px;display:grid;gap:2px;text-align:right;padding:8px 12px;background:var(--bg);border:2px solid var(--fx);box-shadow:4px 4px 0 var(--hard);border-radius:4px}
.cp-id b{font:600 13px var(--f-pix);letter-spacing:.14em;color:var(--ink)}.cp-id span{font:500 11px var(--f-mono);color:var(--muted)}
.cp-rec{position:absolute;right:26px;bottom:88px;display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg);border:2px solid var(--fx);box-shadow:4px 4px 0 var(--hard);border-radius:4px}
.cp-dot2{width:10px;height:10px;border-radius:50%;background:#e5362d;animation:cpblink 1.1s steps(2) infinite}
.cp-rec b{font:600 13px var(--f-pix);color:var(--ink);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.cp-batt{position:relative;width:34px;height:12px;border:2px solid var(--fx);border-radius:3px;overflow:hidden}
.cp-batt i{position:absolute;inset:0;background:var(--accent);transform-origin:left}
.cp-rec small{font:500 11px var(--f-mono);color:var(--muted);min-width:3ch}
@keyframes cpblink{50%{opacity:.15}}
@media (max-width:700px){
  .cp-spd,.cp-id,.cp-cross{display:none}
  .cp-compass{top:70px;width:min(250px,60vw)}
  .cp-adi{width:88px;height:88px;left:14px;bottom:auto;top:176px;transform:none}
  .cp-rec{left:50%;right:auto;bottom:auto;top:148px;transform:translateX(-50%);padding:4px 8px}
  .cp-rec small,.cp-batt{display:none}
}
@media (prefers-reduced-motion:reduce){.cp-dot2{animation:none}}

/* Phones: no bottom dock and no side tab to bring it back (they ate width and covered the flight). The top bar's search button becomes a labelled Menu button; it opens the same quick-jump list of sections and projects. */
@media (max-width:760px){
  .dock,.dock-show{display:none!important}
  .k-btn{width:auto;gap:8px;padding-inline:14px}
  .k-btn::after{content:"Menu";font:600 .9rem var(--f-body);color:var(--ink)}
}