/*----------------------------
    SLIDE IN ELEMENT
-----------------------------*/
.slide-in-element {
    animation: slideIn 1s ease forwards;
}
@keyframes slideIn {
    from {
        transform: translate(-50%, -100%)
    }
    to {
        transform: translate(-50%, 0);
    }
}

/*----------------------------
    SLIDE IN FROM LEFT
-----------------------------*/
.slide-in-from-left {
    animation: slideInFromLeft 0.8s ease forwards;
}
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%)
    }
    to {
        transform: translateX(0%);
    }
}

/*----------------------------
    SLIDE IN FROM RIGHT
-----------------------------*/
.slide-in-from-right {
    animation: slideInFromRight 0.8s ease forwards;
}
@keyframes slideInFromRight {
    from {
        transform: translateX(100%)
    }
    to {
        transform: translateX(0%);
    }
}

/*----------------------------
    SLIDE OUT FROM RIGHT
-----------------------------*/
.slide-out-to-left {
    animation: slideOutToLeft 0.8s ease forwards;
}
@keyframes slideOutToLeft {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(-100%);
    }
}

/*----------------------------
    HIDE CONTENT TO LEFT
-----------------------------*/
.hide-content-to-left {
    animation: hideContentToLeft 0.8s ease forwards;
}
@keyframes hideContentToLeft {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(-200%);
    }
}

/*----------------------------
    HIDE CONTENT TO RIGHT
-----------------------------*/
.hide-content-to-right {
    animation: hideContentToRight 0.8s ease forwards;
}
@keyframes hideContentToRight {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(200%);
    }
}

/*----------------------------
    SHAKE
-----------------------------*/
.shake {
    animation: shake 500ms ease-out;
}
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(-4px);
    }
    15% {
        transform: translateX(4px);
    }
    25% {
        transform: translateX(-4px);
    }
    35% {
        transform: translateX(4px);
    }
    45% {
        transform: translateX(-4px);
    }
    55% {
        transform: translateX(4px);
    }
    65% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(3px);
    }
    85% {
        transform: translateX(-3px);
    }
    100% {
        transform: translateX(0);
    }
}

/*----------------------------
    FADE IN FROM BOTTOM
-----------------------------*/
.fade-in-from-bottom {
    animation: fade-in-from-bottom 0.6s ease forwards;
}
@keyframes fade-in-from-bottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*----------------------------
    FADE IN FROM TOP
-----------------------------*/
.fade-in-from-top {
    animation: fade-in-from-top 0.6s ease forwards;
}
@keyframes fade-in-from-top {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*----------------------------
    CUSTOM PLACEHOLDER WAVE
-----------------------------*/
:root {
    --mf-skeleton-base: #edf1f6;
    --mf-skeleton-highlight: #f8fafc;
}

:root[data-bs-theme="dark"] {
    --mf-skeleton-base: #2c3440;
    --mf-skeleton-highlight: #3a4351;
}

.ms-placeholder-wave .placeholder,
.placeholder.ms-placeholder-wave,
.placeholder-glow .placeholder {
    animation: mf-skeleton-shimmer 1.35s ease-in-out infinite !important;
    background-color: var(--mf-skeleton-base) !important;
    background-image: linear-gradient(
        90deg,
        var(--mf-skeleton-base) 0%,
        var(--mf-skeleton-highlight) 45%,
        var(--mf-skeleton-base) 90%
    ) !important;
    background-size: 200% 100% !important;
    border-radius: 0.45rem;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

@keyframes mf-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes placeholder-wave {
    100% {
        mask-position: -200% 0%;
        -webkit-mask-position: -200% 0%;
    }
}

/*----------------------------
    CARD FLASH HIGHLIGHT
-----------------------------*/
.card-flash-highlight {
	outline: 2px solid var(--mangofit-color);
	outline-offset: 2px;
	border-radius: .5rem;
	transition: outline .2s ease-in-out;
}