/* An opening scene assembled from the supplied transparent pixel artwork. */
#page-home .hero { isolation: isolate; }
#page-home .hero-art img { object-position: center bottom; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.hero-world, .hero-title-world { position: absolute; width: max(100%, 165.137615dvh); aspect-ratio: 9000/5450; left: 50%; bottom: 0; transform: translateX(-50%); overflow: hidden; }
.hero-title-world { z-index: 40; width: min(100%, 165.137615dvh); }
.hero-sky { position: absolute; left: 0; top: 44.954128%; width: 100%; height: 55.045872%; }
.hero-road img { display: block; width: 100%; height: 100%; object-fit: fill; }
.hero-piece, .hero-road { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: var(--z, 2); overflow: hidden; }
.hero-piece-rise { width: 100%; height: 100%; transform-origin: center bottom; }
.hero-piece img { display: block; width: 100%; height: 100%; max-width: none; }
.hero-piece-title { overflow: visible; filter: drop-shadow(3px 6px 0 #3b81b675); }
.hero-piece-clouds { --rise: 14%; }
.hero-piece-skyline { --rise: 32%; }
.hero-piece-land { --rise: 40%; }
.hero-piece-title { --rise: 12%; --duration: 780ms; }
.hero[data-hero='pending'] .hero-art { opacity: 0; animation: hero-poster-safety 0s 3s forwards; }
.hero[data-hero='pending'] .hero-scene { visibility: visible; animation: hero-scene-safety 0s 3s forwards; }
.hero[data-hero='pending'] .hero-piece { visibility: hidden; }
.hero[data-hero='running'] .hero-art, .hero[data-hero='done'] .hero-art { visibility: hidden; }
.hero[data-hero='running'] .hero-scene, .hero[data-hero='done'] .hero-scene { visibility: visible; }
@keyframes hero-poster-safety { to { opacity: 1; } }
@keyframes hero-scene-safety { to { visibility: hidden; } }
@keyframes hero-rise {
  from { transform: translate3d(0, var(--rise, 104%), 0); opacity: 0; }
  16% { opacity: 1; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero[data-hero='running'] .hero-piece-rise { animation: hero-rise var(--duration, 1000ms) cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms) both; will-change: transform, opacity; }
}
@media (max-aspect-ratio: 1/1) {
  /* Reframe the single city canvas. Individual landmarks retain their positions. */
  .hero-world { width: 220%; }
  .hero-title-world { width: 100%; height: 100%; aspect-ratio: auto; inset: 0; transform: none; }
  .hero-piece-title { left: 5%; top: 23%; width: 90%; height: auto; aspect-ratio: 5002/2758; }
  .hero[data-hero='running'] .hero-piece-rise { animation-duration: 800ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-hero] .hero-art { visibility: visible; opacity: 1; animation: none; }
  .hero[data-hero] .hero-scene { display: none; }
}