/* ======================= CITY BACKGROUND (every page) ======================= */
:root{
  --c-sky1:#efe4d6; --c-sky2:#f2d9c2; --c-sky3:#f4c7a0; --c-sun:#ffd2a0;
  --c-far:#dcc6b2; --c-farb:#d0b8a3; --c-mid:#c9ad96; --c-midb:#b49c8c; --c-glass:#a99c98; --c-glass2:#c2b5ae;
  --c-near:#ad8f79; --c-house:#bfa48f; --c-roof:#9a5c3f; --c-tree1:#7b8560; --c-tree2:#66704f;
  --c-front:#937766; --c-road:#76625a; --c-dash:#efe2d2; --c-lamp:#6b5a50; --c-lampon:0;
  --c-win:#fff3df; --c-winoff:#cdbfb6; --c-cloud:#ffffff; --c-cloudop:.55; --c-starop:0; --c-beam:0;
  --city-scrim:242,236,225;
}
:root[data-theme="dark"], :root.dark, body.dark{
  --c-sky1:#0b0e1c; --c-sky2:#171a30; --c-sky3:#3b2b3d; --c-sun:#f4ead8;
  --c-far:#1b1e2e; --c-farb:#20243a; --c-mid:#202336; --c-midb:#262a40; --c-glass:#2b3049; --c-glass2:#343a56;
  --c-near:#1c1f2f; --c-house:#262a3c; --c-roof:#3b2c2c; --c-tree1:#1d2b27; --c-tree2:#18241f;
  --c-front:#161825; --c-road:#10121c; --c-dash:#3a3d50; --c-lamp:#3a3b48; --c-lampon:1;
  --c-win:#ffcf7a; --c-winoff:#2c3048; --c-cloud:#8c8cb4; --c-cloudop:.12; --c-starop:1; --c-beam:.5;
  --city-scrim:21,22,15;
}
.city-bg{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:var(--c-sky1); contain:strict}
.city-bg .cl{position:absolute; inset:-60px -60px 0; will-change:transform}
.city-bg .cl > img, .city-bg .cl > canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; display:block}
.city-bg .stars{animation:cTw 4s ease-in-out infinite alternate}
.city-bg .stars.b{animation-delay:-2s}
.city-bg .cloud{position:absolute; left:0; width:520px; height:auto; opacity:var(--c-cloudop); will-change:transform; animation:cCloud linear infinite}
.city-bg .actor{position:absolute; left:0; top:0; overflow:visible; will-change:transform; transform-origin:0 0}
@keyframes cTw{from{opacity:.35} to{opacity:1}}
@keyframes cCloud{from{transform:translate3d(-560px,0,0)} to{transform:translate3d(calc(100vw + 60px),0,0)}}
.city-scrim{position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(var(--city-scrim), var(--a1, .5)) 0%, rgba(var(--city-scrim), var(--a2, .3)) 45%, rgba(var(--city-scrim), var(--a3, .1)) 72%)}
@media (max-width:1024px){ .city-scrim{background:linear-gradient(180deg, rgba(var(--city-scrim), var(--a1, .5)) 0%, rgba(var(--city-scrim), var(--a2, .3)) 52%, rgba(var(--city-scrim), var(--a3, .1)) 100%)} }

/* the city shows through light pages; coloured sections slide over it like cards */
html.city-on body{background:transparent}
html.city-on .hero, html.city-on .why, html.city-on .pick{background:transparent}
html.city-off .city-bg, html.city-off .city-scrim{display:none}
html.still .city-bg *, html.city-paused .city-bg *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){ .city-bg *{animation:none !important} }
/* small cards that sit directly on the city: solid, no blur (blur over a moving background is slow) */
html.city-on .readout, html.city-on .callout, html.city-on .stage-tools button{background:color-mix(in srgb, var(--card) 96%, transparent); -webkit-backdrop-filter:none; backdrop-filter:none}

/* header button */
.round.city-btn svg{width:20px; height:20px}
.round.city-btn[aria-pressed="false"]{opacity:.55}
.round.city-btn[aria-pressed="false"] .on-only{display:none}
.round.city-btn[aria-pressed="true"] .off-only{display:none}