/* Bee */
.bee-target {
    position: relative;
}

.bee-wrapper {
    position: absolute;
    top: -30px;
    right: var(--beeRightPosition);
    pointer-events: none;
    z-index: 100;
    background-color: transparent;
}

/* 3. The Default Flight State (Flown Away / Invisible) */
.bee-wrapper {
    font-size: 24px;
    
    /* Sent high into the screen, shrunk down, rotated, and hidden */
    transform: translate(200px, -150px) scale(0.1) rotate(-30deg);
    opacity: 0;
    
    /* Smooth exit curve when flying away */
    transition: transform 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53), 
                opacity 0.8s ease;
}

/* 4. The Landed State (Triggered strictly by .current-view) */
.bee-target.current-view .bee-wrapper {
    /* Land perfectly at { top: 5%, right: 5% } with zero offset */
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    
    /* Elegant swooping curve when arriving */
    transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.5s ease;
}

.bee {
    opacity: 1;
    display: inline-block;
    font-size: 24px;
    background-color: transparent;
    transform: scaleX(-1);
    position: relative;
}

.bee-target.current-view .bee {
    animation: beeFlip 12s step-end infinite;
}

.bee-walker, .bee-walkerY {
    display: inline-block;
    background-color: transparent;
}

.bee-target.current-view .bee-walker {
    /* 1.2s delay matches your flight arrival so it doesn't walk mid-air */
    animation: beeWalk 12s linear infinite 1.2s; 
}

.bee-target.current-view .bee-walkerY {
    /* 1.2s delay matches your flight arrival so it doesn't walk mid-air */
    animation: beeFly 12s linear infinite 1.2s; 
}

@keyframes beeWalk {
    0%, 85% { transform: translateX(0); }       /* 0s to 1.2s: Paused after landing */
    35%     { transform: translateX(-60px); }    /* 1.2s to 6.0s: Walks Left 5s */
    35%, 45% { transform: translateX(-60px); }    /* 6.0s to 7.2s: Paused at the left turn */
    85%, 100%    { transform: translateX(0); }        /* 7.2s to 12.0s: Walks Right 5s */
}

@keyframes beeFly {
    /* 0s to 1.2s: Landed flat on the surface */
    0% { transform: translateY(0); }       
    
    /* 1.2s to 6.0s: Bobbing up and down while walking left */
    10%     { transform: translateY(-15px); }
    20%     { transform: translateY(-20px); }
    30%     { transform: translateY(-7px); }
    /* 40%     { transform: translateY(-5px); } */
    
    /* 6.0s to 7.2s: Standing flat at the left turnaround point */
    40%, 50% { transform: translateY(0); }    
    
    /* 7.2s to 12.0s: Bobbing up and down while walking back right */
    60%     { transform: translateY(-20px); }
    70%     { transform: translateY(-33px); }
    80%     { transform: translateY(-15px); }
    /* 90%     { transform: translateY(0); } */
    
    90%, 100%    { transform: translateY(0); }        
}

@keyframes beeFlip {
    2%, 52% { transform: scaleX(1); }            /* 0s to 6.0s: Faces Left */
    52%, 100%, 0% { transform: scaleX(-1); }          /* 6.0s to 12.0s: Faces Right */
}

/* @keyframes beeBreath {
    0%, 100% {
        transform: scaleY(1) scaleX(var(--current-direction, 1));
    }
    50% {
        transform: scaleY(0.85) scaleX(1.05);
    }
} */

img.bee-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px; 
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}
img.bee-image.resting {
    opacity: 0;
}

/* Activate high-speed wing flapping only when the bee has landed (.current-view) */
/* .bee-target.current-view .bee-image {
    Loops infinitely every 0.1 seconds using step-end to swap instantly
    animation: beeFlapWings 12s step-end infinite;
} */

.bee-target.current-view .bee-image.flying {
    /* Loops infinitely every 0.1 seconds using step-end to swap instantly */
    animation: beeImageFlying 12s step-end infinite;
}

.bee-target.current-view .bee-image.resting {
    /* Loops infinitely every 0.1 seconds using step-end to swap instantly */
    animation: beeImageResting 12s step-end infinite;
}

/* --- THE WING FLAPPING FLIPBOOK TIMELINE --- */
/* @keyframes beeFlapWings {
    10%, 60% {
        Default frame (Wings Up)
        content: url("Bee-transparent-flying2.png");
    }
    0%, 50%, 100% {
        Alternate frame (Wings Down)
        content: url("Bee-transparent-resting.png");
    }
} */
@keyframes beeImageFlying {
    10%, 60% {
        /* Default frame (Wings Up) */
        opacity: 1;
    }
    0%, 50%, 100% {
        /* Alternate frame (Wings Down) */
        opacity: 0;
    }
}
@keyframes beeImageResting {
    10%, 60% {
        /* Default frame (Wings Up) */
        opacity: 0;
    }
    0%, 50%, 100% {
        /* Alternate frame (Wings Down) */
        opacity: 1;
    }
}