/* Shared outdoor life: compositor movement, no extra scene clock. */
#petownApp .pet-scene-nature,
#petownApp .pet-scene-birds,
#petownApp .pet-scene-breeze {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#petownApp .pet-scene-nature { z-index: 1; }
#petownApp .pet-scene-nature * { pointer-events: none; }
#petownApp .pet-scene.is-indoor .pet-scene-nature,
#petownApp .pet-scene.is-playing .pet-scene-nature { visibility: hidden; }

#petownApp .pet-scene-bird {
    --bird-size: 44px;
    --bird-facing: 1;
    --bird-row: 0%;
    position: absolute;
    top: 23%;
    left: 0;
    width: 100%;
    height: var(--bird-size);
    animation: pet-scene-flight 19s linear -5s infinite paused;
}

#petownApp .pet-scene-bird-sprite {
    display: block;
    width: var(--bird-size);
    height: var(--bird-size);
    background: url('/static/img/petown/petown-flying-birds-compressed.webp?v=1') 0 var(--bird-row) / 400% 400% no-repeat;
    image-rendering: pixelated;
    transform: scaleX(var(--bird-facing));
    animation: pet-scene-wingbeat 640ms steps(1, end) infinite paused;
}

#petownApp .pet-scene-bird:nth-child(2) {
    --bird-size: 36px;
    --bird-facing: -1;
    --bird-row: 33.333333%;
    top: 31%;
    animation-duration: 23s;
    animation-delay: -14s;
    animation-direction: reverse;
}
#petownApp .pet-scene-bird:nth-child(2) .pet-scene-bird-sprite { animation-duration: 520ms; }
#petownApp .pet-scene-bird:nth-child(3) {
    --bird-size: 28px;
    --bird-row: 33.333333%;
    top: 17%;
    opacity: 0.8;
    animation-duration: 27s;
    animation-delay: -21s;
}
#petownApp .pet-scene-bird:nth-child(3) .pet-scene-bird-sprite { animation-delay: -240ms; }

#petownApp .pet-scene[data-scene-birds-active='true'] :is(.pet-scene-bird, .pet-scene-bird-sprite) {
    animation-play-state: running;
}
#petownApp .pet-scene[data-time-period='night'] .pet-scene-birds,
#petownApp .pet-scene[data-weather='rain'] .pet-scene-birds { visibility: hidden; }

@keyframes pet-scene-flight {
    0% { transform: translate(-8%, 8px); }
    25% { transform: translate(21%, -12px); }
    50% { transform: translate(50%, 14px); }
    75% { transform: translate(79%, -6px); }
    100% { transform: translate(108%, 8px); }
}
@keyframes pet-scene-wingbeat {
    0%, 100% { background-position-x: 0; }
    25% { background-position-x: 33.333333%; }
    50% { background-position-x: 66.666667%; }
    75% { background-position-x: 100%; }
}

/* Track dimensions make the falling distance follow the actual scene height. */
#petownApp .pet-scene-leaf-track {
    --leaf-turn: 1;
    position: absolute;
    left: 9%;
    top: 23%;
    width: 12%;
    height: 55%;
    opacity: 0;
    animation: pet-scene-leaffall 17s linear -4s infinite paused;
}
#petownApp .pet-scene-leaf {
    position: absolute;
    width: 16px;
    height: 10px;
    color: var(--p-cool);
    background: currentColor;
    clip-path: polygon(0 40%, 12.5% 40%, 12.5% 20%, 37.5% 20%, 37.5% 0, 87.5% 0, 87.5% 20%, 100% 20%, 100% 60%, 87.5% 60%, 87.5% 80%, 62.5% 80%, 62.5% 100%, 25% 100%, 25% 80%, 0 80%);
    animation: pet-scene-leafturn 4.8s ease-in-out -1s infinite paused;
}
#petownApp .pet-scene-leaf::before {
    content: '';
    position: absolute;
    inset: 0 0 50%;
    background: var(--p-ok);
}
#petownApp .pet-scene-leaf::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 12px;
    height: 1px;
    background: var(--p-paper-soft);
    transform: rotate(-24deg);
    box-shadow: 4px -2px 0 -0.25px var(--p-paper-soft);
}
#petownApp .pet-scene-leaf-track:nth-child(2) { left: 79%; top: 20%; --leaf-turn: -1; animation-duration: 21s; animation-delay: -12s; }
#petownApp .pet-scene-leaf-track:nth-child(3) { left: 24%; top: 26%; animation-duration: 23s; animation-delay: -18s; }
#petownApp .pet-scene-leaf-track:nth-child(4) { left: 91%; top: 32%; --leaf-turn: -1; animation-duration: 19s; animation-delay: -7s; }
#petownApp .pet-scene-leaf-track:nth-child(5) { left: 17%; top: 35%; animation-duration: 25s; animation-delay: -16s; }
#petownApp .pet-scene-leaf-track:nth-child(6) { left: 71%; top: 24%; --leaf-turn: -1; animation-duration: 22s; animation-delay: -2s; }
#petownApp .pet-scene-leaf-track:nth-child(even) .pet-scene-leaf { color: var(--p-ink-soft); animation-delay: -3s; }
#petownApp .pet-scene-leaf-track:nth-child(even) .pet-scene-leaf::before { background: var(--p-warm); }
#petownApp .pet-scene[data-time-period='night'] .pet-scene-breeze { opacity: 0.45; }
#petownApp .pet-scene[data-weather='rain'] .pet-scene-breeze { opacity: 0.6; }
#petownApp .pet-scene[data-scene-ambient-active='true'] :is(.pet-scene-leaf-track, .pet-scene-leaf) {
    animation-play-state: running;
}

@keyframes pet-scene-leaffall {
    0% { opacity: 0; transform: translate(0, 0); }
    10% { opacity: 0.8; }
    28% { transform: translate(calc(35% * var(--leaf-turn)), 28%); }
    52% { transform: translate(calc(5% * var(--leaf-turn)), 52%); }
    76% { opacity: 0.8; transform: translate(calc(50% * var(--leaf-turn)), 76%); }
    100% { opacity: 0; transform: translate(calc(35% * var(--leaf-turn)), 100%); }
}
@keyframes pet-scene-leafturn {
    0%, 100% { transform: rotate(-30deg) scaleX(1); }
    35% { transform: rotate(35deg) scaleX(0.35); }
    70% { transform: rotate(100deg) scaleX(-0.8); }
}

@media (max-width: 1023px) {
    #petownApp .pet-scene-bird { --bird-size: 36px; top: 24%; animation-duration: 15s; }
    #petownApp .pet-scene-bird:nth-child(2) { --bird-size: 30px; top: 33%; animation-duration: 19s; }
    #petownApp .pet-scene-bird:nth-child(3) { --bird-size: 24px; top: 19%; animation-duration: 23s; }
    #petownApp .pet-scene-leaf-track { top: 25%; height: 39%; }
    #petownApp .pet-scene-leaf-track:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #petownApp .pet-scene-nature { visibility: hidden; }
    #petownApp .pet-scene-nature :is(.pet-scene-bird, .pet-scene-bird-sprite, .pet-scene-leaf-track, .pet-scene-leaf) { animation: none; }
}