/* Cute Animal Mascot Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-4-28 22:47:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

@keyframes bounce-top {
    0% {
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    65% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    82% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    93% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

/* Tail Wagging Animation */
@keyframes wag-tail {
    0% {
        transform-origin: 3px 15px;
        transform: rotate(0deg);
    }
    25% {
        transform-origin: 3px 15px;
        transform: rotate(15deg);
    }
    75% {
        transform-origin: 3px 15px;
        transform: rotate(-15deg);
    }
    100% {
        transform-origin: 3px 15px;
        transform: rotate(0deg);
    }
}

/* Leaf Wiggling Animation */
@keyframes wiggle-leaf {
    0% {
        transform-origin: 15px 3px;
        transform: rotate(0deg);
    }
    25% {
        transform-origin: 15px 3px;
        transform: rotate(5deg);
    }
    75% {
        transform-origin: 15px 3px;
        transform: rotate(-5deg);
    }
    100% {
        transform-origin: 15px 3px;
        transform: rotate(0deg);
    }
}

.mascot-container {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.mascot {
    width: 30px;
    height: 30px;
    -webkit-animation: bounce-top 0.9s backwards;
    animation: bounce-top 0.9s backwards;
    transition: transform 0.3s ease;
}

.mascot .tail {
    animation: wag-tail 1s infinite;
}

.mascot .leaf {
    animation: wiggle-leaf 2s infinite;
}

.mascot:hover {
    transform: scale(1.1);
}