/* ========================================
   SERP HAWK MASCOT ANIMATIONS
   Complete animation library for the living mascot
   ======================================== */

.hawk-mascot-interactive {
    position: relative;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========== IDLE STATE ========== */
.hawk-mascot-interactive.idle {
    animation: hawkBreathe 4s ease-in-out infinite;
}

@keyframes hawkBreathe {
    0%, 100% { 
        transform: scale(1) translateY(0) rotate(0deg);
    }
    50% { 
        transform: scale(1.05) translateY(-8px) rotate(2deg);
    }
}

/* ========== FLY ANIMATION ========== */
.hawk-mascot-interactive.fly {
    animation: hawkFly 3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes hawkFly {
    0% {
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
    25% {
        transform: translateX(200px) translateY(-100px) scale(1.2) rotate(15deg);
    }
    50% {
        transform: translateX(300px) translateY(-150px) scale(1.3) rotate(0deg);
    }
    75% {
        transform: translateX(200px) translateY(-100px) scale(1.2) rotate(-15deg);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    }
}

/* ========== CELEBRATE ANIMATION ========== */
.hawk-mascot-interactive.celebrate {
    animation: hawkCelebrate 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes hawkCelebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    10% {
        transform: scale(1.2) rotate(-10deg);
    }
    20% {
        transform: scale(1.2) rotate(10deg);
    }
    30% {
        transform: scale(1.3) rotate(-10deg);
    }
    40% {
        transform: scale(1.3) rotate(10deg);
    }
    50% {
        transform: scale(1.4) rotate(0deg) translateY(-30px);
    }
    60% {
        transform: scale(1.3) rotate(-5deg) translateY(-20px);
    }
    70% {
        transform: scale(1.3) rotate(5deg) translateY(-20px);
    }
    80% {
        transform: scale(1.2) rotate(0deg) translateY(-10px);
    }
    90% {
        transform: scale(1.1) rotate(0deg) translateY(-5px);
    }
}

/* ========== DANCE ANIMATION ========== */
.hawk-mascot-interactive.dance {
    animation: hawkDance 2s ease-in-out;
}

@keyframes hawkDance {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    12.5% {
        transform: rotate(-15deg) scale(1.1) translateX(-10px);
    }
    25% {
        transform: rotate(15deg) scale(1.1) translateX(10px);
    }
    37.5% {
        transform: rotate(-15deg) scale(1.15) translateX(-10px) translateY(-10px);
    }
    50% {
        transform: rotate(15deg) scale(1.15) translateX(10px) translateY(-10px);
    }
    62.5% {
        transform: rotate(-10deg) scale(1.1) translateX(-10px);
    }
    75% {
        transform: rotate(10deg) scale(1.1) translateX(10px);
    }
    87.5% {
        transform: rotate(-5deg) scale(1.05);
    }
}

/* ========== PEEK ANIMATION ========== */
.hawk-mascot-interactive.peek {
    animation: hawkPeek 3s ease-in-out;
}

@keyframes hawkPeek {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    20% {
        transform: translateX(-200px) scale(0.8);
        opacity: 0;
    }
    25% {
        transform: translateX(-200px) scale(0.8);
        opacity: 0;
    }
    35% {
        transform: translateX(-180px) scale(0.9) rotate(-10deg);
        opacity: 1;
    }
    45% {
        transform: translateX(-180px) scale(0.9) rotate(10deg);
        opacity: 1;
    }
    55% {
        transform: translateX(-180px) scale(0.9) rotate(-10deg);
        opacity: 1;
    }
    65% {
        transform: translateX(-180px) scale(0.9) rotate(10deg);
        opacity: 1;
    }
    75% {
        transform: translateX(-200px) scale(0.8);
        opacity: 0;
    }
    80% {
        transform: translateX(-200px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* ========== SLEEP ANIMATION ========== */
.hawk-mascot-interactive.sleep {
    animation: hawkSleep 3s ease-in-out;
}

@keyframes hawkSleep {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) rotate(-15deg);
        opacity: 0.6;
        filter: brightness(0.7);
    }
}

/* ========== WAKE ANIMATION ========== */
.hawk-mascot-interactive.wake {
    animation: hawkWake 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes hawkWake {
    0% {
        transform: scale(0.8) rotate(-15deg);
        opacity: 0.6;
    }
    30% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    40% {
        transform: scale(1.1) rotate(5deg);
    }
    50% {
        transform: scale(1.15) translateY(-20px);
    }
    60% {
        transform: scale(1.1) rotate(-5deg) translateY(-10px);
    }
    70% {
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ========== TALKING ANIMATION ========== */
@keyframes hawkTalk {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.05) scaleX(1.02);
    }
}

/* ========== BOBBING (while user types) ========== */
@keyframes hawkBob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ========== HOVER EFFECTS ========== */
.hawk-mascot-interactive:hover {
    filter: brightness(1.1) drop-shadow(0 0 20px rgba(16, 185, 129, 0.5));
    transform: scale(1.08);
}

/* ========== PARTICLE EFFECTS (Optional enhancement) ========== */
.hawk-mascot-interactive.celebrate::after {
    content: '✨';
    position: absolute;
    font-size: 2rem;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    animation: sparkle 1s ease-out infinite;
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0);
    }
}