.flying-token {
    position: fixed;
    bottom: -30px;
    left: -25px;
    width: 110px;
    height: 110px;
    background-image: url('/images/aave.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transform-origin: center;
    transform: rotate(30deg);
    z-index: 12;
    pointer-events: auto;
    transition: transform 0s ease-in-out;
    cursor: pointer;
}


#aave.curious {
    animation: curiousAnimation 3s ease-in-out forwards;
}

@keyframes curiousAnimation {
    0% {
        transform: translateY(0px);
    }

    15% {
        transform: translateY(-13px);
    }

    30% {
        transform: translateY(-5px);
    }

    50% {
        transform: translateY(-10px);
    }

    55% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

#aave.peekAround {
    animation: peekAroundAnimation 3s ease-in-out forwards;
}



@keyframes peekAroundAnimation {
    0% {
        transform: translateY(0px);
    }

    15% {
        transform: translateY(-80px);
    }

    30% {
        transform: translateY(-60px) rotate(0deg);
    }

    50% {
        transform: translateY(-80px) rotate(-10deg);
    }

    55% {
        transform: translateY(-80px) rotate(10deg);
    }

    60% {
        transform: translateY(-80px) rotate(-10deg);
    }

    65% {
        transform: translateY(-80px) rotate(10deg);
    }

    85% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0px) rotate(30deg);
    }
}


#aave.resetOrientation {
    animation: resetOrientationAnimation 2s ease-in-out forwards;
}


@keyframes resetOrientationAnimation {
    0% {
        transform: rotate(var(--current-angle, 0deg));
        /* Démarre de l'angle actuel */
    }

    80% {
        transform: rotate(0deg);
        /* Retour à 0 degré */
    }

    90% {
        transform: translateY(-10px) rotate(-15deg);
    }

    93% {
        transform: translateY(-15px)rotate(15deg);
    }

    96% {
        transform: translateY(-10px)rotate(-15deg);
    }

    98% {
        transform: translateY(-15px)rotate(15deg);
    }

    100% {
        transform: translateY(-5px)rotate(0deg);
    }


}


#aave.returnHome {
    animation: returnHomeAnimation 2s ease-in-out forwards;
}


@keyframes returnHomeAnimation {

    0% {
        transform: translateX(0px);
    }

    20% {
        transform: translateY(-20px) translateX(calc(var(--current-x)*0.2));
    }

    40% {
        transform: translateY(-60px) translateX(calc(var(--current-x)*0.4));
    }

    60% {
        transform: translateY(-20px) translateX(calc(var(--current-x)*0.6));
    }

    80% {
        transform: translateY(-60px) translateX(calc(var(--current-x)*0.85));
    }


    100% {
        transform:  translateY(0px) translateX(var(--current-x));
    }
}





@media screen and (max-width: 700px) {
    .flying-token {
        width: 80px;
        height: 80px;
        outline: none;
        /* Empêche le surlignement */

        -webkit-tap-highlight-color: transparent;
    }
}