/* Non-interactive garden wildlife. One atlas, four modestly sized residents. */
#petownApp .pet-yard-wildlife {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

#petownApp .pet-yard-animal {
    position: absolute;
    display: block;
    width: var(--animal-size);
    height: var(--animal-size);
    pointer-events: none;
    animation-play-state: paused;
}

#petownApp .pet-yard-animal-sprite {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('/static/img/petown/petown-yard-wildlife-compressed.webp?v=1');
    background-size: 400% 400%;
    background-position: 0 var(--animal-row);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: pet-yard-idle var(--animal-cycle) steps(1, end) infinite;
    animation-delay: var(--animal-delay, 0s);
    animation-play-state: paused;
}

#petownApp .pet-yard-robin {
    --animal-size: 44px;
    --animal-row: 0%;
    --animal-cycle: 17s;
    --animal-delay: -4s;
    left: 61%;
    top: calc(39% - 36px);
}

#petownApp .pet-yard-sparrow {
    --animal-size: 44px;
    --animal-row: 33.333333%;
    --animal-cycle: 13s;
    --animal-delay: -7s;
    left: 37%;
    top: 55%;
    animation: pet-yard-hop 13s steps(12) -7s infinite paused;
}

#petownApp .pet-yard-rabbit {
    --animal-size: 64px;
    --animal-row: 66.666667%;
    --animal-cycle: 23s;
    --animal-delay: -9s;
    left: 86%;
    top: 64%;
}

#petownApp .pet-yard-butterfly {
    --animal-size: 30px;
    --animal-row: 100%;
    --animal-cycle: 1.2s;
    left: 43%;
    top: 49%;
    animation: pet-yard-flutter 19s ease-in-out -5s infinite paused;
}

#petownApp .pet-yard-butterfly .pet-yard-animal-sprite {
    animation-name: pet-yard-wings;
}

#petownApp .pet-scene[data-yard-wildlife-active='true']:not(.is-playing) .pet-yard-animal,
#petownApp .pet-scene[data-yard-wildlife-active='true']:not(.is-playing) .pet-yard-animal-sprite {
    animation-play-state: running;
}

#petownApp .pet-scene[data-time-period='night'] .pet-yard-rabbit .pet-yard-animal-sprite {
    filter: brightness(0.56) saturate(0.65);
    animation: none;
    background-position-x: 66.666667%;
}

#petownApp .pet-scene[data-time-period='night'] :is(.pet-yard-robin, .pet-yard-sparrow, .pet-yard-butterfly),
#petownApp .pet-scene[data-weather='rain'] :is(.pet-yard-robin, .pet-yard-sparrow, .pet-yard-butterfly) {
    visibility: hidden;
}

@keyframes pet-yard-idle {
    0%, 72%, 100% { background-position-x: 0; }
    76% { background-position-x: 33.333333%; }
    80% { background-position-x: 66.666667%; }
    84% { background-position-x: 100%; }
}

@keyframes pet-yard-wings {
    0%, 100% { background-position-x: 0; }
    25% { background-position-x: 33.333333%; }
    50% { background-position-x: 66.666667%; }
    75% { background-position-x: 100%; }
}

@keyframes pet-yard-hop {
    0%, 76%, 92%, 100% { transform: translate(0, 0); }
    80% { transform: translate(5px, -5px); }
    84% { transform: translate(10px, 0); }
    88% { transform: translate(5px, -4px); }
}

@keyframes pet-yard-flutter {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    30% { transform: translate(24px, -16px) rotate(8deg); }
    65% { transform: translate(40px, 4px) rotate(-4deg); }
}

@media (max-width: 1023px) {
    #petownApp .pet-yard-robin { --animal-size: 36px; left: 62%; top: calc(31% - 29px); }
    #petownApp .pet-yard-sparrow { --animal-size: 36px; left: 27%; top: 46%; }
    #petownApp .pet-yard-rabbit { --animal-size: 52px; left: 78%; top: 46%; }
    #petownApp .pet-yard-butterfly { --animal-size: 26px; left: 32%; top: 39%; }
}

@media (prefers-reduced-motion: reduce) {
    #petownApp .pet-yard-animal,
    #petownApp .pet-yard-animal-sprite { animation: none; }
}