.dove {
    position: absolute; /* was fixed */
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    z-index: 20;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 4px 8px rgba(42, 36, 28, 0.18));
}

.dove .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.05s linear;
}

.dove .frame-down {
    opacity: 0;
}

.dove.flap-down .frame-up {
    opacity: 0;
}

.dove.flap-down .frame-down {
    opacity: 1;
}

.dove.face-left .frame {
    transform: scaleX(-1);
}

@media (max-width: 600px) {
    .dove {
        width: 44px;
        height: 44px;
    }
}