/* All artwork shares the painting's coordinate system, including the birds' toes. */
#welcome-title:focus { outline: none; } /* Focus announces the chapter; it is not a control. */
.grove-plane {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1672px;
  height: 941px;
  transform-origin: 0 0;
  will-change: transform;
}
.grove-wash { position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.perch-tree { position: absolute; inset: 0; background: url('/assets/orchard-perch-layer.webp') center / 100% 100% no-repeat; }
.aisle-day { background-image: url('/assets/orchard-continuous-day.webp'); }
.aisle-sunset { background-image: url('/assets/orchard-continuous-sunset.webp'); opacity: var(--sunset); }
.aisle-night { background-image: url('/assets/orchard-continuous-night.webp'); opacity: var(--night); }
@media (min-aspect-ratio: 13/10) {
  /* The lens can also see around the right of the original crop, so the
     opening in the rows can settle off-center on a wide screen. */
  .grove-right { position: absolute; left: calc(100% - .4px); top: 0; bottom: 0; width: 400px; background: center / 100% 100% no-repeat; }
  .aisle-day .grove-right { background-image: url('/assets/orchard-day-right.webp'); }
  .aisle-sunset .grove-right { background-image: url('/assets/orchard-sunset-right.webp'); }
  .aisle-night .grove-right { background-image: url('/assets/orchard-night-right.webp'); }
}
/* Tall screens can pull farther back on the very same painting. These margins are
   just sky and lawn; no trunk is ever replaced or repositioned at a breakpoint. */
@media (max-aspect-ratio: 13/10) {
  .grove-wash::before, .grove-wash::after {
    content: ''; position: absolute; left: 0; right: 0;
    background: center / 100% 100% no-repeat;
  }
  .grove-wash::before { height: 328px; bottom: calc(100% - .4px); background-image: var(--sky-paper); }
  .grove-wash::after { height: 331px; top: calc(100% - .4px); background-image: var(--lawn-paper); }
  .aisle-day { --sky-paper: url('/assets/orchard-day-sky.webp'); --lawn-paper: url('/assets/orchard-day-lawn.webp'); }
  .aisle-sunset { --sky-paper: url('/assets/orchard-sunset-sky.webp'); --lawn-paper: url('/assets/orchard-sunset-lawn.webp'); }
  .aisle-night { --sky-paper: url('/assets/orchard-night-sky.webp'); --lawn-paper: url('/assets/orchard-night-lawn.webp'); }
}
.painted-world { background-color: #c0cfad; }
/* Leave one quiet scroll beat for the aisle itself before the details enter. */
.orchard-passage { height: 205svh; pointer-events: none; }
.motion-paused .orchard-passage { height: 65svh; }

.aisle-stars { position: absolute; inset: 0; overflow: visible; width: 100%; height: 100%; opacity: var(--star-opacity); }
.star-band { animation: starlight 6.4s ease-in-out infinite alternate; }
.star-band-1 { animation-duration: 8.3s; animation-delay: -4.1s; }
.star-band-2 { animation-duration: 5.8s; animation-delay: -2.3s; }
.star-band-3 { animation-duration: 9.7s; animation-delay: -7.4s; }
@keyframes starlight { from { opacity: .63; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .star-band { animation: none; } }
.grove-moon {
  position: absolute;
  left: var(--moon-x); top: var(--moon-y); width: 13%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff5d950 0 11%, #ffeadc23 23%, transparent 66%);
  opacity: var(--moon-opacity);
  mix-blend-mode: screen;
}
.grove-bird {
  position: absolute; width: 0; height: 0;
  transform-origin: 0 0;
}
.grove-bird img {
  position: absolute; left: 0; top: 0; max-width: none; height: auto;
  pointer-events: none; user-select: none;
}
.grove-bird .perched {
  width: var(--rest-width);
  transform: translate(var(--toe-x), var(--toe-y));
}
.grove-bird .airborne {
  width: var(--flight-width); opacity: 0;
  transform-origin: var(--body-x) var(--body-y);
  transform: translate(calc(0% - var(--body-x)), calc(0% - var(--body-y) - 18px))
    rotate(var(--bank, 0deg)) scaleY(var(--beat, 1));
}
.jay {
  left: 770px; top: 398px;
  --rest-width: 65px; --flight-width: 110px;
  --toe-x: -61.7%; --toe-y: -64.1%; --body-x: 46.7%; --body-y: 51.5%;
}
.cardinal {
  left: 925px; top: 398px;
  --rest-width: 65px; --flight-width: 106px;
  --toe-x: -26.9%; --toe-y: -69.2%; --body-x: 49%; --body-y: 48.3%;
}
/* On a narrow crop, move each bird a little way along the same painted limb. */
@media (max-width: 700px) and (orientation: portrait) {
  .jay { left: 796px; top: 398px; --rest-width: 53px; --flight-width: 92px; }
  .cardinal { left: 903px; top: 399px; --rest-width: 54px; --flight-width: 88px; }
}