/* Shown before any script or the main styles, so opening the app is the map's own dark green, never a flash of another colour. Removed after the first frame of the map, once the hen has hopped a little. */
html { background: #2f5a22; }
/* iOS 26+ home-screen apps report a view short by the status bar; the large viewport is the full screen. Here rather than in style.css, which comes in with the script, so the loading screen has no pale band at the bottom. */
@media (display-mode: standalone) { html, body { height: 100lvh; } }
#loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #2f5a22; transition: opacity 0.25s; }
#loading.gone { opacity: 0; pointer-events: none; }
#loading > span { position: relative; z-index: 1; grid-area: 1 / 1; }

/* The hen hops on the spot, her shadow shrinking under her as she goes up; at the bottom her feet stand in it. */
#loading .hop { width: 63px; }
#loading .hen { position: relative; z-index: 1; display: block; width: 63px; height: 66px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAACkUlEQVR42p2UPWhTURTHf69JEceDIEbIkIvgIAgaEBGdjF+LH9Do5iC2+IVBHOrg4CBIhwqibW0rYhGUtoNDEJEGjODYJzg4KORkCBgdzMFNp+fwXq75qLX2hMd7l3vvL//7P/ecgHVELpuJ2t/1RjPonU+vB3hj80byIogTCq+IesFp1hkvfv3k1+dvLO7dSpF+MLlsJuo80lrULi0tRLXacnS+sKt/by6biVq15Shq1dYEzmUzUa22FEWtmn8WFqa79g4AmBlmhn54x2rgXDYTzYzfwokDwDAAioVC17oBgFA1meafYJfP0xYCMHR6CDNj9/Ytft9AvdEMRq/f4k2l4heG1bL3ufOpVMuIJAoFzGBDKo0BsyObCB/vJ5fNREEum4nCatkDxQmCYGaIiFflvzEsZiZjUFUkHIutmPgSH19VcS7xSWFq7gn3px+iZmgCtOQH4ES8XQDzY3fQSgysN5pBut5oBsVzpSislhERXr59y5HjJ5KNFqvueJuBSAzu9Nb1Jsony4x9O3fiRFAzsD8ZBoiNIZ7rCXHSDzVV1IxHszOoGU4kPrbRdX0MeDo12WXFmZELFF599H1goN0URm/fw1Q5PzzC3N1xrly62KVIEP9nRw8W/LjzmvUp9TaEIQdOnuLB5BTSTorFRxbgWukq6XQa1XisatBjR9BXMY9jxeKcvxFtH18/f8aeo8d8RakpToTCqbNdLTBYsRQTcKv1na/NJoODg6RSKfKHDvskOhHCMGT09r2+nhr8rcbHbpaQRGknSM0wVeYX53n/6euKTTpYtRnfLHUURQxqx9+Aq0Lb4HB8B8Mz3wHYJj8oOsHlHarqK+i/lC5e3opLLrWqUZz40rVm3UrXAumN3y/bevR7HvyBAAAAAElFTkSuQmCC) 0 0 / 63px 66px; image-rendering: pixelated; animation: ld-bob 0.6s infinite; will-change: transform; }
#loading .hop::after { content: ""; display: block; width: 42px; height: 6px; margin: -3px auto 0; background: #1f3f16; animation: ld-shadow 0.6s infinite; will-change: transform; }
@keyframes ld-bob { 0%, 100% { transform: none; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); } 50% { transform: translateY(-21px); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); } }
/* Scaled, not resized, so it runs off the main thread and keeps time while the app is still starting. */
@keyframes ld-shadow { 0%, 100% { transform: none; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); } 50% { transform: scaleX(0.571); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); } }

@media (prefers-reduced-motion: reduce) {
  #loading .hen, #loading .hop::after { animation: none; }
}