/* Beetwoaye Bee Logo Styles */

/* ============================================================================
   BASE BEE CONTAINER
   ============================================================================ */

.beetwoaye-bee-container {
    display: inline-block;
    position: relative;
}

.beetwoaye-bee-container svg {
    display: block;
}

/* ============================================================================
   SIZE VARIANTS (wider aspect ratio for D-shape: ~1.17:1 width:height)
   ============================================================================ */

.beetwoaye-bee-container.size-tiny {
    width: 35px;
    height: 30px;
}

.beetwoaye-bee-container.size-xsmall {
    width: 52px;
    height: 45px;
}

.beetwoaye-bee-container.size-small {
    width: 70px;
    height: 60px;
}

.beetwoaye-bee-container.size-medium {
    width: 140px;
    height: 120px;
}

.beetwoaye-bee-container.size-large {
    width: 210px;
    height: 180px;
}

.beetwoaye-bee-container.size-xlarge {
    width: 280px;
    height: 240px;
}

/* ============================================================================
   MOOD COLOR SCHEMES
   ============================================================================ */

/* Default - Dark stripes transparent, only light stripes visible */
.beetwoaye-bee .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee .stripe-light {
    fill: #ffffff;
}

/* Drill Sergeant (Angry Red) */
.beetwoaye-bee.mood-drill-sergeant .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee.mood-drill-sergeant .stripe-light {
    fill: #ff0000;
}

/* Disappointed Parent (Tired Gray) */
.beetwoaye-bee.mood-disappointed .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee.mood-disappointed .stripe-light {
    fill: #888888;
}

/* Suspicious Teacher (Alert Yellow) */
.beetwoaye-bee.mood-suspicious .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee.mood-suspicious .stripe-light {
    fill: #ffff00;
}

/* Encouraging Coach (Healthy Green) */
.beetwoaye-bee.mood-encouraging .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee.mood-encouraging .stripe-light {
    fill: #00ff00;
}

/* Proud Mentor (Gold) */
.beetwoaye-bee.mood-proud .stripe-dark {
    fill: transparent;
}

.beetwoaye-bee.mood-proud .stripe-light {
    fill: #ffd700;
}

/* ============================================================================
   ANIMATION STATES
   ============================================================================ */

/* Idle - Gentle breathing (default when not speaking) */
.beetwoaye-bee.state-idle .bee-stripe {
    animation: bee-breathe 3s ease-in-out infinite;
}

@keyframes bee-breathe {
    0%, 100% { 
        transform: translateY(0) scaleY(1); 
    }
    50% { 
        transform: translateY(-3px) scaleY(1.05); 
    }
}

/* Speaking - Active ripple wave */
.beetwoaye-bee.state-speaking .bee-stripe {
    animation: bee-ripple 1.2s ease-in-out infinite;
}

.beetwoaye-bee.state-speaking .bee-stripe:nth-child(1) { animation-delay: 0s; }
.beetwoaye-bee.state-speaking .bee-stripe:nth-child(2) { animation-delay: 0.1s; }
.beetwoaye-bee.state-speaking .bee-stripe:nth-child(3) { animation-delay: 0.2s; }
.beetwoaye-bee.state-speaking .bee-stripe:nth-child(4) { animation-delay: 0.3s; }
.beetwoaye-bee.state-speaking .bee-stripe:nth-child(5) { animation-delay: 0.4s; }
.beetwoaye-bee.state-speaking .bee-stripe:nth-child(6) { animation-delay: 0.5s; }

@keyframes bee-ripple {
    0%, 100% { 
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    25% { 
        transform: translateX(-10px) scaleX(1.3) scaleY(1.1);
    }
    50% { 
        transform: translateX(10px) scaleX(0.7) scaleY(0.9);
    }
    75% { 
        transform: translateX(-5px) scaleX(1.15) scaleY(1.05);
    }
}

/* Fast - Aggressive wave (Drill Sergeant) */
.beetwoaye-bee.state-fast .bee-stripe {
    animation: bee-ripple-fast 0.6s ease-in-out infinite;
}

.beetwoaye-bee.state-fast .bee-stripe:nth-child(1) { animation-delay: 0s; }
.beetwoaye-bee.state-fast .bee-stripe:nth-child(2) { animation-delay: 0.05s; }
.beetwoaye-bee.state-fast .bee-stripe:nth-child(3) { animation-delay: 0.1s; }
.beetwoaye-bee.state-fast .bee-stripe:nth-child(4) { animation-delay: 0.15s; }
.beetwoaye-bee.state-fast .bee-stripe:nth-child(5) { animation-delay: 0.2s; }
.beetwoaye-bee.state-fast .bee-stripe:nth-child(6) { animation-delay: 0.25s; }

@keyframes bee-ripple-fast {
    0%, 100% { 
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    25% { 
        transform: translateX(-15px) scaleX(1.4) scaleY(1.15);
    }
    50% { 
        transform: translateX(15px) scaleX(0.65) scaleY(0.88);
    }
    75% { 
        transform: translateX(-8px) scaleX(1.2) scaleY(1.08);
    }
}

/* Slow - Calm wave (Proud Mentor) */
.beetwoaye-bee.state-slow .bee-stripe {
    animation: bee-ripple-slow 2.5s ease-in-out infinite;
}

.beetwoaye-bee.state-slow .bee-stripe:nth-child(1) { animation-delay: 0s; }
.beetwoaye-bee.state-slow .bee-stripe:nth-child(2) { animation-delay: 0.2s; }
.beetwoaye-bee.state-slow .bee-stripe:nth-child(3) { animation-delay: 0.4s; }
.beetwoaye-bee.state-slow .bee-stripe:nth-child(4) { animation-delay: 0.6s; }
.beetwoaye-bee.state-slow .bee-stripe:nth-child(5) { animation-delay: 0.8s; }
.beetwoaye-bee.state-slow .bee-stripe:nth-child(6) { animation-delay: 1.0s; }

@keyframes bee-ripple-slow {
    0%, 100% { 
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    33% { 
        transform: translateX(-12px) scaleX(1.35) scaleY(1.12);
    }
    66% { 
        transform: translateX(12px) scaleX(0.72) scaleY(0.92);
    }
}

/* ============================================================================
   PLACEMENT HELPERS
   ============================================================================ */

/* Login screen - centered */
.bee-login-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
    overflow: visible;
}

/* Terminal corner - top right */
.bee-terminal-corner {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Terminal bottom - floats inside terminal near prompt */
.bee-terminal-bottom {
    position: absolute;
    bottom: 50px;
    left: 20px;
    z-index: 100;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bee-terminal-bottom:hover {
    opacity: 1;
}

/* Inline with text */
.bee-inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .beetwoaye-bee-container.size-large {
        width: 180px;
        height: 120px;
    }
    
    .beetwoaye-bee-container.size-xlarge {
        width: 270px;
        height: 180px;
    }
    
    .bee-terminal-corner {
        top: 10px;
        right: 10px;
    }
    
    .bee-terminal-bottom {
        bottom: 10px;
        left: 20px;
    }
}