/* =====================================
   Q-BEE MASCOT ANIMATION SYSTEM
   Official 3D Animated Companions
===================================== */

/* BASE MASCOT */
.qb-bee {
    display: inline-block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 6px 14px rgba(22, 143, 255, 0.18));
}

/* 1. GENTLE FLOATING BEE */
@keyframes qbFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

.qb-bee-float {
    animation: qbFloat 3.5s ease-in-out infinite;
}

/* 2. HAPPY BOUNCING BEE */
@keyframes qbBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-16px) scale(1.04);
    }
    65% {
        transform: translateY(-5px) scale(0.98);
    }
}

.qb-bee-happy {
    animation: qbBounce 1.8s ease-in-out infinite;
}

/* 3. HOVERING / FLYING BEE */
@keyframes qbFly {
    0% {
        transform: translate(0, 0) rotate(-4deg);
    }
    25% {
        transform: translate(12px, -10px) rotate(3deg);
    }
    50% {
        transform: translate(25px, -4px) rotate(-2deg);
    }
    75% {
        transform: translate(12px, 5px) rotate(4deg);
    }
    100% {
        transform: translate(0, 0) rotate(-4deg);
    }
}

.qb-bee-fly {
    animation: qbFly 6s ease-in-out infinite;
}

/* 4. CELEBRATION ANIMATION */
@keyframes qbCelebrate {
    0% {
        transform: scale(0.8) rotate(-10deg);
        opacity: 0;
    }
    40% {
        transform: scale(1.15) rotate(8deg);
        opacity: 1;
    }
    65% {
        transform: scale(0.95) rotate(-4deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.qb-bee-celebrate {
    animation: qbCelebrate 0.9s ease-out both;
}

/* 5. GENTLE SIDE-TO-SIDE MOVEMENT */
@keyframes qbWiggle {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

.qb-bee-wiggle {
    animation: qbWiggle 3s ease-in-out infinite;
}

/* 6. PEEKING FROM EDGE */
@keyframes qbPeek {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-6px) rotate(4deg);
    }
}

.qb-bee-peek {
    animation: qbPeek 4s ease-in-out infinite;
}

/* 7. IDLE BEE */
@keyframes qbIdle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.qb-bee-idle {
    animation: qbIdle 4.5s ease-in-out infinite;
}

/* 8. MASCOT SIZES */
.qb-bee-tiny {
    width: 36px;
    height: 36px;
}

.qb-bee-small {
    width: 65px;
}

.qb-bee-medium {
    width: 120px;
}

.qb-bee-large {
    width: 200px;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .qb-bee-large {
        width: 140px;
    }
    .qb-bee-medium {
        width: 85px;
    }
    .qb-bee-small {
        width: 48px;
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .qb-bee,
    .qb-bee-float,
    .qb-bee-happy,
    .qb-bee-fly,
    .qb-bee-celebrate,
    .qb-bee-wiggle,
    .qb-bee-peek,
    .qb-bee-idle {
        animation: none !important;
        will-change: auto;
    }
}