.fade-in {
    animation: fade-in 200ms ease-out forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 200ms ease-out forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-out-noise {
    animation: fade-out-noise 200ms ease-out forwards;
    filter: contrast(200%) brightness(80%);
}

@keyframes fade-out-noise {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
    }
}

.slide-in {
    animation: slide-in 200ms ease-out forwards;
}

@keyframes slide-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

.slide-out {
    animation: slide-out 200ms forwards;
}

@keyframes slide-out {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

.shake {
    animation: shake 0.2s linear forwards;
}

@keyframes shake {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-1px, -1px);
    }

    75% {
        transform: translate(1px, -1px);
    }

    100% {
        transform: translate(0);
    }
}

.color-fade-red {
    animation: color-fade-red 3s ease-out forwards;
}

@keyframes color-fade-red {
    0% {
        color: var(--color-red);
    }
}