/* -------------------------------------------------------------------------- */
/*                           Transition For All Layouts                       */
/* -------------------------------------------------------------------------- */
.layout-enter-active,
.layout-leave-active {
    transition: all 0.4s;
}

.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}

/* -------------------------------------------------------------------------- */
/*                           Transition For All Pages                          */
/* -------------------------------------------------------------------------- */
/* Page Out */
.page-leave-active {
    transition: all 0.5s;
}

.page-leave-to {
    opacity: 0;
    filter: blur(.05rem);
    /* transform: translateY(5rem); */
}

/* Page IN */
.page-enter-active {
    transition: all 0.5s;
}

.page-enter-from {
    opacity: 0;
    /* filter: blur(.2rem); */
    /* transform: translateY(-5rem); */
}

/* -------------------------------------------------------------------------- */
/*                     <Transition>  v-if   </Transition>                     */
/* -------------------------------------------------------------------------- */
.hide-leave-active {
    transition: all 0.5s ease-out;
}

.hide-leave-to {
    opacity: 0;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }

    to {
        opacity: var(--opa, 0);
        transform: translateX(var(--x, 0px)) translateY(var(--y, 20px));
    }
}

.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.05);
    }

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

/* -------------------------------------------------------------------------- */
/*                                 For Globall                                */
/* -------------------------------------------------------------------------- */
@keyframes fadeUp {
    from {
        opacity: var(--opa, 0);
        transform: translateX(var(--x, 0px)) translateY(var(--y, 20px));
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Example usage on an element */
.fadeUp {
    animation: fadeUp var(--dur, 0.3s) ease-out;
}

.fadeUp-3ms {
    animation: fadeUp var(--dur, 0.3s) ease-out;
}

.fadeUp-4ms {
    animation: fadeUp var(--dur, 0.4s) ease-out;
}

.fadeUp-5ms {
    animation: fadeUp var(--dur, 0.5s) ease-out;
}

.fadeUp-6ms {
    animation: fadeUp var(--dur, 0.6s) ease-out;
}

.fadeUp-7ms {
    animation: fadeUp var(--dur, 0.7s) ease-out;
}

.fadeUp-8ms {
    animation: fadeUp var(--d, 0.8s) ease-out;
}

.fadeUp-9ms {
    animation: fadeUp var(--d, 0.9s) ease-out;
}


/* -------------------------------------------------------------------------- */
/*                                   bounce                                   */
/* -------------------------------------------------------------------------- */
.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

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

.blinking-border {
    border: 2px solid var(--bbColor, rgb(241, 206, 3));
    animation: blinkBorder 1s infinite;
}

@keyframes blinkBorder {
    0% {
        border-color: var(--bbColor, rgb(241, 206, 3));
    }

    50% {
        border-color: transparent;
    }

    100% {
        border-color: var(--bbColor, rgb(241, 206, 3));
    }
}