@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulserank {
    0% {
        transform: scale(2);
    }
    50% {
        transform: scale(2.2);
    }
    100% {
        transform: scale(2);
    }
}

@keyframes shatterPiece {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveUp {
    from {
        transform: translateY(-6px);
    }
    to {
        transform: translateY(-12px);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalBackgroundFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes iconSwitch {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) scale(1);
        background-image: url("../img/icon/icon_fleche.png");
        opacity: 1;
    }
}

@keyframes drawBorder {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    50% {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    75% {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes showBackground {
    0% {
        background-color: transparent;
    }
    100% {
        background-color: var(--box-color);
    }
}

@keyframes showContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes floatCrown {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-3px);
    }
}

@keyframes bounceIn {
    0% {
        transform: translateX(-50%) translateY(-5px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.5;
    }
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}