.city-art {
  translate: var(--parallax-x, 0) var(--parallax-y, 0);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
.living-city { position:absolute; z-index:1; inset:0 0 34%; overflow:hidden; pointer-events:none; transition:transform .8s cubic-bezier(.2,.8,.2,1) }
.cloud { position:absolute; width:72px; height:15px; border-radius:30px; background:#ffe2b866; filter:blur(3px); opacity:.35 }
.cloud::before,.cloud::after { content:""; position:absolute; background:inherit; border-radius:50%; width:29px; height:29px; left:13px; bottom:2px }
.cloud::after { width:38px; height:38px; left:31px }
.cloud-one { top:12%; left:-90px; animation:cloudTravel 28s linear infinite }
.cloud-two { top:20%; left:-110px; scale:.65; opacity:.24; animation:cloudTravel 38s linear 9s infinite }
.bird { position:absolute; color:#18233b99; font:800 22px serif; text-shadow:12px 2px #18233b88; animation:birdFlight 13s linear infinite }
.bird-one { top:18%; left:-50px }.bird-two { top:25%; left:-70px; scale:.65; animation-delay:4.5s; animation-duration:17s }.bird-three { top:14%; left:-60px; scale:.45; animation-delay:9s; animation-duration:20s }
.glow { position:absolute; width:7px; height:9px; background:#ffd477; border-radius:2px; box-shadow:0 0 8px 2px #ffbc5d; animation:windowFlicker 3.2s ease-in-out infinite }
.glow-one { top:43%; left:19% }.glow-two { top:47%; left:69%; animation-delay:1.1s }.glow-three { top:54%; left:43%; animation-delay:2.2s }
.spark { position:absolute; color:#fff2bf; font-size:9px; filter:drop-shadow(0 0 5px #ffd87b); animation:sparkle 3s ease-in-out infinite }
.spark-one { top:31%; right:18% }.spark-two { top:49%; left:31%; animation-delay:1s }.spark-three { top:57%; right:24%; animation-delay:2s }
@keyframes cloudTravel { to { transform:translateX(570px) } }
@keyframes birdFlight { 0% { transform:translate(-40px,18px) rotate(-8deg) } 45% { transform:translate(240px,-12px) rotate(4deg) } 100% { transform:translate(520px,10px) rotate(-5deg) } }
@keyframes windowFlicker { 0%,100% { opacity:.3; scale:.8 } 45% { opacity:1; scale:1.15 } 65% { opacity:.62 } }
@keyframes sparkle { 0%,100% { opacity:0; scale:.2; rotate:0deg } 45% { opacity:1; scale:1; rotate:90deg } 65% { opacity:.25; scale:.65; rotate:140deg } }
@media (prefers-reduced-motion:reduce) { .living-city { display:none }.city-art { translate:0 0 } }