/* A small, interactive continuation of the intro's pixel house. */
.footer{padding-top:48px}
.neighborhood{margin-top:36px;border-top:1px solid var(--line);padding-top:24px}
.neighborhood-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}
.neighborhood h2{font-size:20px;letter-spacing:-.025em;font-weight:400}
.neighborhood-heading p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.city-motion{font-size:12px;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.city-motion:hover{color:var(--white)}
.city-scene{height:clamp(210px,20vw,290px);position:relative;margin-top:6px;isolation:isolate;background:radial-gradient(ellipse at 50% 78%,#0e7a5219,transparent 68%)}
.city-land,.city-houses,.city-gardens{position:absolute;inset:0;width:100%;height:100%}
.city-land{overflow:visible;pointer-events:none}
.city-block{fill:#0e7a5206;stroke:#8fe3bb0c;stroke-width:1;vector-effect:non-scaling-stroke}
.city-road,.city-route{fill:none;stroke:#8fe3bb16;stroke-width:1;vector-effect:non-scaling-stroke}
.city-route{stroke:#8fe3bb80;stroke-dasharray:3 240;animation:city-delivery 22s linear infinite}
.city-route.second{animation-duration:28s;animation-delay:-12s;stroke:#8fe3bb40}
@keyframes city-delivery{to{stroke-dashoffset:-972}}
.city-home{position:absolute;width:var(--size);left:var(--x);top:var(--y);transform:translate(-50%,-100%);min-width:44px;min-height:44px;touch-action:manipulation;isolation:isolate}
.city-home svg{width:100%;height:auto;overflow:visible;display:block;transition:transform .5s var(--ease),filter .4s}
.city-pixel{fill:#081d14;stroke:#276446;stroke-width:.55;transition:fill .45s,stroke .45s}
.city-roof{fill:#103723;stroke:#3c7952}
.city-window{fill:#6a9c65;stroke:#9bc782;animation:city-window 7s ease-in-out infinite alternate;animation-delay:var(--delay)}
.city-door{fill:#070807;stroke:#365d41}
.city-home.back{opacity:.5}.city-home.middle{opacity:.75}
.city-home:before{content:"";position:absolute;inset:30% -30% -20%;background:radial-gradient(ellipse,#8fe3bb24,transparent 67%);opacity:0;transition:opacity .5s;z-index:-1}
.city-home:hover,.city-home:focus-visible,.city-home[aria-pressed=true]{opacity:1}
.city-home:hover:before,.city-home:focus-visible:before,.city-home[aria-pressed=true]:before{opacity:1}
.city-home:hover svg,.city-home:focus-visible svg{transform:translateY(-6px)}
.city-home:hover .city-pixel,.city-home:focus-visible .city-pixel{stroke:#8fe3bb;fill:#135334}
.city-home:hover .city-window,.city-home:focus-visible .city-window,.city-home[aria-pressed=true] .city-window{fill:#e0ecae;stroke:#f2f4c8;animation:none;filter:drop-shadow(0 0 2px #dbe8a3)}
.city-home[aria-pressed=true] .city-roof{fill:#236743;stroke:#8fe3bb}
.city-home[aria-pressed=true] .city-door{fill:#d4df98;stroke:#e5edbd}
@keyframes city-window{from{opacity:.4}to{opacity:1}}
.city-gardens{pointer-events:none}
.city-tree{position:absolute;width:12px;height:18px;left:var(--x);top:var(--y);background:linear-gradient(#47865b,#47865b) 5px 10px/2px 8px no-repeat}
.city-tree:before{content:"";position:absolute;width:9px;height:9px;background:#255b3d;box-shadow:4px -4px #326b47,5px 4px #19472f}
.city-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);line-height:1.5;min-height:18px}
.city-caption>span:first-child{color:#a9c7b4}
.footer .foot-copy{margin-top:24px}
.neighborhood:not(.is-visible) *,.neighborhood.is-paused *{animation-play-state:paused!important}
@media (max-height:799px){.footer{position:relative}.closing{margin-bottom:0}}
@media (max-width:760px){
  .neighborhood{margin-top:32px}
  .neighborhood-heading{align-items:start;gap:12px;flex-direction:column}
  .neighborhood-heading p{max-width:290px}
  .city-motion{min-height:32px}
  .city-scene{height:230px;margin-top:4px}
  .city-home{width:calc(var(--size) * 1.4)}
  .city-home:nth-child(3n){display:none}
  .city-caption>span:last-child{display:none}
  .city-tree:nth-child(even){display:none}
  .city-tree{transform:scale(.75)}
}
@media (prefers-reduced-motion:reduce){
  .neighborhood *{animation:none!important;transition:none!important}
  .city-home:hover svg,.city-home:focus-visible svg{transform:none}
}