/* AIRS CITY — a living pixel city behind the office. */
.hero{isolation:isolate;background:linear-gradient(130deg,#fff 8%,#f4fcff 44%,#cbefff 100%)}
.hero-grid{z-index:1;opacity:.55}.hero-word{z-index:1;opacity:.68}.hero>.cloud{display:none}.hero-copy,.hero-scene{z-index:3}
.city-world,.district-world,.contact-city{position:absolute;inset:0;pointer-events:none;overflow:hidden;isolation:isolate}
.city-world{z-index:0}.city-world *,.district-world *,.contact-city *{pointer-events:none}
.city-horizon{position:absolute;left:0;right:0;bottom:40px;height:540px;transform:translateY(var(--city-depth,0));will-change:transform}
.city-distant{position:absolute;width:120%;max-width:none;height:100%;bottom:0;left:-10%;opacity:.3;overflow:visible}
.city-window{fill:#d8f4ff}.city-window-lit{fill:#eafaff}
.city-near{position:absolute;bottom:0;left:20%;right:-3%;height:510px;background:url('../img/office-city.png') right bottom/auto 530px repeat-x;background-image:image-set(url('../img/office-city.webp') type('image/webp'),url('../img/office-city.png') type('image/png'));opacity:.4;transition:filter .7s,opacity .7s}
.city-copy-wash{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#ffffffed 22%,#f5fcffdf 36%,#eafbff3d 65%,#e1f7ff05 100%);z-index:2}
.city-sun{position:absolute;top:132px;right:10%;width:70px;height:70px;background:#ffe66d;clip-path:polygon(25% 0,75% 0,75% 12%,88% 12%,88% 25%,100% 25%,100% 75%,88% 75%,88% 88%,75% 88%,75% 100%,25% 100%,25% 88%,12% 88%,12% 75%,0 75%,0 25%,12% 25%,12% 12%,25% 12%);filter:drop-shadow(0 0 20px #fff5a0);transition:background .6s;opacity:.9}
.city-sun:after{content:'';position:absolute;inset:9px;background:#fff9bd;clip-path:inherit}
.city-cloud{position:absolute;display:block;width:92px;height:18px;background:#fff;box-shadow:12px -12px #fff,30px -24px #fff,48px -12px #fff;opacity:.8;animation:city-cloud-travel 48s linear infinite}
.city-cloud-0{top:23%;left:9%;--cloud-y:-7px;animation-delay:-10s;scale:.85}
.city-cloud-1{top:38%;left:42%;--cloud-y:8px;animation-duration:61s;animation-delay:-30s;scale:.55;opacity:.6}
.city-cloud-2{top:16%;left:74%;--cloud-y:-5px;animation-duration:58s;animation-delay:-5s;scale:1.1}
.city-cloud-3{top:62%;left:68%;--cloud-y:8px;animation-duration:67s;animation-delay:-42s;scale:.45;opacity:.55}
.bird-flock{position:absolute;inset:0;z-index:5;overflow:hidden}
.bird-flight{position:absolute;left:-100px;width:36px;height:25px;top:var(--bird-y,25%);animation:city-flight var(--flight-time,31s) linear infinite;animation-delay:var(--flight-delay,-5s);color:#498cc2;will-change:transform}
.pixel-bird{display:block;width:100%;height:100%;overflow:visible;shape-rendering:crispEdges;transform:scale(var(--bird-size,1));filter:drop-shadow(0 3px 0 #0841730d)}
.bird-wing-up{animation:city-wing-up .58s steps(1,end) infinite}.bird-wing-down{animation:city-wing-down .58s steps(1,end) infinite}
.bird-flight-0{--bird-y:20%;--flight-time:31s;--flight-delay:-19s;--bird-size:.85}
.bird-flight-1{--bird-y:24%;--flight-time:31s;--flight-delay:-17.8s;--bird-size:.64}
.bird-flight-2{--bird-y:17%;--flight-time:31s;--flight-delay:-16.5s;--bird-size:.7}
.bird-flight-3{--bird-y:49%;--flight-time:43s;--flight-delay:-7s;--bird-size:.53;opacity:.6}
.bird-flight-4{--bird-y:46%;--flight-time:43s;--flight-delay:-5.5s;--bird-size:.4;opacity:.55}
.city-stars{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.city-stars i{position:absolute;left:var(--sx);top:var(--sy);height:3px;width:3px;background:#fff0ae;box-shadow:0 0 7px #a6e9ff;animation:city-twinkle 4s steps(3,end) infinite;animation-delay:var(--delay)}
.city-stars i:nth-child(4n){width:4px;height:4px;box-shadow:0 4px #caf4ff,0 -4px #caf4ff,4px 0 #caf4ff,-4px 0 #caf4ff;background:#f5fcff}
.city-district{height:410px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#f2fbff,#c5ecff 76%,#79b4e0);border-top:1px solid #c9e7f6;border-bottom:5px solid #075bab;margin-top:0}
.district-world .city-distant{height:340px;bottom:32px;opacity:.4}
.district-skyline{position:absolute;inset:0;background:url('../img/office-city.png') center bottom/auto 515px repeat-x;background-image:image-set(url('../img/office-city.webp') type('image/webp'),url('../img/office-city.png') type('image/png'));filter:drop-shadow(0 8px 0 #0850a025);transition:filter .7s}
.district-world .city-sun{top:36px;right:24%;width:60px;height:60px}.district-world .city-cloud-0{top:24%;left:14%}.district-world .city-cloud-2{top:16%;left:60%}
.district-caption{position:absolute;z-index:6;top:27px;left:max(5%,calc((100% - 1220px)/2));padding:12px 18px 13px;background:#ffffffed;box-shadow:5px 5px #196db419;border:1px solid #b4dff3;color:var(--ink)}
.district-caption>span{font:9px var(--mono);letter-spacing:.18em;display:flex;align-items:center;gap:8px}.district-caption i{width:5px;height:5px;display:block;background:#13b6a0;box-shadow:0 0 0 3px #1cd7b51c}.district-caption p{font-size:14px;font-weight:800;margin-top:4px}
.district-coordinate{position:absolute;bottom:7px;right:5%;font:8px var(--mono);color:white;letter-spacing:.12em;z-index:5}
.city-rail{position:absolute;left:0;right:0;bottom:28px;height:8px;background:#c0e9ff;border-top:2px solid #f1fbff;border-bottom:3px solid #276caf;box-shadow:0 5px #134f851f;z-index:3}
.city-rail:after{content:'';position:absolute;inset:5px 0 -22px;background:repeating-linear-gradient(90deg,transparent 0 95px,#4d8bb8 95px 102px,transparent 102px 180px);z-index:-1}
.city-train{position:absolute;left:-220px;bottom:5px;height:25px;display:flex;gap:3px;animation:city-train-travel 28s linear infinite;animation-delay:-10s;filter:drop-shadow(0 2px 0 #044782)}
.city-train i{display:block;width:52px;height:22px;background:linear-gradient(#fff 0 7px,#80d9ff 7px 13px,#fff 13px 16px,#077ae7 16px 19px,#d8f5ff 19px);border:2px solid #115b96;position:relative}
.city-train i:before{content:'';position:absolute;inset:5px 3px 6px;background:repeating-linear-gradient(90deg,#16527d 0 8px,transparent 8px 12px)}
.city-train i:first-child{clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px)}.city-train i:last-of-type{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 10px,100% 100%,0 100%)}
.city-train b{position:absolute;right:-1px;bottom:5px;width:3px;height:4px;background:#fff387;box-shadow:0 0 6px #ffe270}
.contact-city{z-index:0}.contact-city-skyline{position:absolute;inset:0;background:url('../img/office-city.png') right bottom -45px/auto 420px repeat-x;background-image:image-set(url('../img/office-city.webp') type('image/webp'),url('../img/office-city.png') type('image/png'));opacity:.28;filter:saturate(.7)}
.contact-city:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0866ed 5%,#0866edef 40%,#0866ed50 80%)}
.contact-inner{z-index:2}.contact-flock{z-index:1;opacity:.75}.contact-flock .bird-flight{color:#073f84}.contact-flock .bird-flight-0{--bird-y:14%}.contact-flock .bird-flight-1{--bird-y:18%}.contact-flock .bird-flight-2{--bird-y:12%}
body[data-city-time="night"] .city-world .city-copy-wash{background:linear-gradient(90deg,#072652 0%,#072652ee 25%,#0a3266bb 45%,#075c8700 100%)}
body[data-city-time="night"] .city-world .city-distant{opacity:.15}body[data-city-time="night"] .city-window-lit{fill:#ffe998}
body[data-city-time="night"] .city-near{filter:brightness(.7) saturate(1.3) hue-rotate(6deg);opacity:.48}
body[data-city-time="night"] .city-stars{opacity:.85}body[data-city-time="night"] .city-cloud{opacity:.12}body[data-city-time="night"] .city-sun{background:#e3f6ff}
body[data-city-time="night"] .city-sun:after{background:#0b3972;inset:-8px -8px 12px 18px}
body[data-city-time="night"] .city-district{background:linear-gradient(#072652,#125189 76%,#0b3f74);border-color:#174978}
body[data-city-time="night"] .district-world .city-distant{opacity:.2}body[data-city-time="night"] .district-skyline{filter:brightness(.7) saturate(1.2) drop-shadow(0 0 12px #5ed8ff45)}
body[data-city-time="night"] .district-caption{background:#073368eb;border-color:#376794;color:#dcf6ff}body[data-city-time="night"] .bird-flight{color:#89c8f0;opacity:.7}
@keyframes city-flight{0%{transform:translate3d(-20px,8px,0)}25%{transform:translate3d(calc(25vw + 50px),-10px,0)}50%{transform:translate3d(calc(50vw + 100px),4px,0)}75%{transform:translate3d(calc(75vw + 150px),-18px,0)}100%{transform:translate3d(calc(100vw + 220px),0,0)}}
@keyframes city-wing-up{0%,100%{opacity:1}50%{opacity:0}}@keyframes city-wing-down{0%,100%{opacity:0}50%{opacity:1}}
@keyframes city-cloud-travel{from{transform:translateX(-100px) translateY(0)}50%{transform:translateX(20px) translateY(var(--cloud-y))}to{transform:translateX(140px) translateY(0)}}
@keyframes city-train-travel{from{transform:translateX(-20px)}to{transform:translateX(calc(100vw + 440px))}}
@keyframes city-twinkle{0%,100%{opacity:.4}50%{opacity:1}}
@media(min-width:1600px){.city-horizon{height:640px}.city-near{height:600px;background-size:auto 610px}}
@media(max-width:1100px){.city-horizon{height:460px}.city-near{left:0;height:440px;background-size:auto 455px}.city-district{height:370px}.district-skyline{background-size:auto 470px}}
@media(max-width:900px){.city-world .city-sun{top:170px;right:9%;width:58px;height:58px}.city-horizon{height:570px;bottom:60px}.city-near{height:530px;background-size:auto 540px;left:-10%;right:-10%;opacity:.4}.city-copy-wash{background:linear-gradient(#fff 2%,#ffffffef 23%,#f2fbffb3 40%,#edfaff10 76%)}body[data-city-time="night"] .city-world .city-copy-wash{background:linear-gradient(#072652 2%,#072652ee 25%,#09336588 46%,#075c8710 76%)}.city-world .bird-flight-0{--bird-y:51%}.city-world .bird-flight-1{--bird-y:54%}.city-world .bird-flight-2{--bird-y:48%}.city-world .bird-flight-3{--bird-y:78%}.city-world .bird-flight-4{--bird-y:75%}.city-district{height:350px}.district-skyline{background-size:auto 440px}.contact-city-skyline{background-size:auto 360px;opacity:.23}}
@media(max-width:640px){.city-world .city-sun{top:130px;right:5%;width:44px;height:44px;opacity:.5}.city-world .city-copy-wash{background:linear-gradient(#fff 0%,#ffffffed 30%,#eefaff88 54%,#e9f9ff08 85%)}.city-horizon{bottom:65px;height:380px}.city-near{height:350px;background-size:auto 350px;opacity:.32}.city-world .city-distant{height:320px;opacity:.24}.bird-flight{width:28px;height:19px}.bird-flight-3,.bird-flight-4{display:none}.city-world .bird-flight-0{--bird-y:53%}.city-world .bird-flight-1{--bird-y:56%}.city-world .bird-flight-2{--bird-y:51%}.city-cloud{scale:.45}.city-cloud-2{top:49%}.city-cloud-3{display:none}.city-district{height:300px;border-bottom-width:4px}.district-skyline{background-size:auto 350px;background-position:55% bottom}.district-world .city-distant{height:255px;opacity:.22}.district-world .city-sun{top:35px;right:9%;width:42px;height:42px}.district-caption{left:6%;top:17px;padding:10px 12px}.district-caption>span{font-size:8px}.district-caption p{font-size:12px}.district-coordinate{font-size:7px;right:6%;bottom:6px}.district-world .bird-flight-0{--bird-y:31%}.district-world .bird-flight-1{--bird-y:36%}.district-world .bird-flight-2{--bird-y:28%}.city-train{scale:.78;transform-origin:bottom left;animation-duration:23s}.city-rail{bottom:24px}.contact-city-skyline{background-size:auto 330px;background-position:65% bottom -10px;opacity:.3}.contact-city:after{background:linear-gradient(#0866ed 4%,#0866edef 33%,#0866ed38 100%)}.contact-flock .bird-flight-0{--bird-y:57%}.contact-flock .bird-flight-1{--bird-y:60%}.contact-flock .bird-flight-2{--bird-y:54%}}
@media(prefers-reduced-motion:reduce){.city-world *,.city-world *:before,.city-world *:after,.district-world *,.district-world *:before,.district-world *:after,.contact-city *{animation-play-state:paused!important;transition:none!important}.city-horizon{transform:none;will-change:auto}.bird-flight{will-change:auto}}
@media print{.city-world,.city-district,.contact-city{display:none}}
.district-skyline{background-position:center bottom -65px}
@media(max-width:1100px){.district-skyline{background-position:center bottom -60px}}
@media(max-width:900px){.district-skyline{background-position:center bottom -56px}}
@media(max-width:640px){.district-skyline{background-position:55% bottom -46px}}
/* Static compositions still retain birds when the device reduces motion. */
.city-world .city-sun{right:23%;top:125px}
.bird-flight-0{--rest-x:70%}.bird-flight-1{--rest-x:62%}.bird-flight-2{--rest-x:54%}.bird-flight-3{--rest-x:24%}.bird-flight-4{--rest-x:17%}
@media(max-width:900px){.city-world .city-sun{right:12%;top:155px}}
@media(max-width:640px){.city-world .city-sun{right:24%;top:550px;opacity:.7}}
@media(prefers-reduced-motion:reduce){.bird-flight{left:var(--rest-x);transform:none}.bird-wing-up{opacity:1}.bird-wing-down{opacity:0}.city-train{left:65%;transform:none}}