/* Bee Animation - Pure CSS */
/* Last modified: 2026-02-16 11:04:12 */

.bee-animation {
    position: fixed;
    width: 40px;
    height: 30px;
    background: linear-gradient(to bottom, 
        #FFD700 0%, #FFD700 20%, 
        #000 20%, #000 35%,
        #FFD700 35%, #FFD700 50%,
        #000 50%, #000 65%,
        #FFD700 65%, #FFD700 80%,
        #000 80%, #000 100%
    );
    border-radius: 50% 50% 40% 40%;
    z-index: 9999;
    /* Initial state: bottom right */
    bottom: 20px;
    right: 20px;
    /* Smooth 5s flight */
    animation: bee-flight 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Bee wings */
.bee-animation::before,
.bee-animation::after {
    content: ''; 
    position: absolute;
    width: 25px;
    height: 15px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    top: 5px;
    /* Flaps 50 times (0.1s * 50 = 5s) then stops */
    animation: wing-flap 0.1s ease-in-out 50;
}

.bee-animation::before {
    left: -15px;
    transform-origin: right center;
}

.bee-animation::after {
    right: -15px;
    transform-origin: left center;
}

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

@keyframes bee-flight {
    0% {
        transform: translateX(0) rotate(-90deg);
    }
    /* Small 2% buffer at the end to settle the rotation */
    98% {
        transform: translateX(calc(-100vw + 80px)) rotate(-90deg);
    }
    100% {
        /* Landing: Final position at bottom left, facing up */
        transform: translateX(calc(-100vw + 80px)) rotate(0deg);
    }
}