.butterfly {
    position: absolute;
    z-index: 9999;
    pointer-events: auto;
    cursor: default;
    color: var(--main-color);
}

.butterfly svg {
    width: 20px;
    height: auto;
    display: block;
    transform-style: preserve-3d;
}

.butterfly .wing-left {
    transform-origin: 50px 40px;
}

.butterfly .wing-right {
    transform-origin: 50px 40px;
}

/* Flying - rapid wing flapping */
.butterfly.flying .wing-left {
    animation: wing-flap-left 100ms ease-in-out infinite;
}

.butterfly.flying .wing-right {
    animation: wing-flap-right 100ms ease-in-out infinite;
}

/* Settled - slow wing closing every few seconds */
.butterfly.settled .wing-left {
    animation: wing-breathe-left 4s ease-in-out infinite;
}

.butterfly.settled .wing-right {
    animation: wing-breathe-right 4s ease-in-out infinite;
}

@keyframes wing-flap-left {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(-70deg);
    }
}

@keyframes wing-flap-right {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(70deg);
    }
}

@keyframes wing-breathe-left {
    0%, 85%, 100% {
        transform: rotateY(0deg);
    }
    90%, 95% {
        transform: rotateY(-70deg);
    }
}

@keyframes wing-breathe-right {
    0%, 85%, 100% {
        transform: rotateY(0deg);
    }
    90%, 95% {
        transform: rotateY(70deg);
    }
}


/* Landing bounce - applied to SVG to preserve rotation on parent */
.butterfly.settled svg {
    animation: landing-settle 300ms ease-out;
}

@keyframes landing-settle {
    0% {
        transform: translateY(-3px);
    }
    40% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}