css/notif.css
#notifs {
    position: fixed;
    inset: 0 0 auto 0;
    height: 0;
    width: min(100vw, 320px);
    margin-inline: auto;
    z-index: 3000000;
}
.notif {
    position: absolute;
    inset: 10px 1px auto 10px;
    background: var(--background-1);
    border: 1px solid var(--border-1);
    padding: 7px 10px;
    transition: transform .3s;
    animation: notif-in 1s cubic-bezier(0, 1.5, 0.5, 1);
    border-radius: 5px;
    box-shadow: var(--shadow-3);
    font-size: 14px;
}

.notif.disappearing {
    opacity: 0;
    pointer-events: none;
    animation: notif-out 1s cubic-bezier(0.32, 0, 0.67, 0);
}
.notif.clicked {
    animation: notif-out 0.5s;
}

.notif.badge-notif {
    padding: 5px;
    display: flex;
    gap: 3px;
    animation: badge-notif-in 0.2s;
}
.notif.badge-notif > .image {
    width: 52px;
    height: 52px;
    background: var(--rarity-ex);
    box-shadow: var(--shadow-1);
    padding: 1px;
}
.notif.badge-notif > .image > img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.notif.badge-notif > .info {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.notif.badge-notif > .overlay {
    position: absolute;
    inset: -1px;
    mix-blend-mode: lighten;
    border-radius: 5px;
    animation: badge-notif-in-overlay 1s linear;
}
.notif.badge-notif.disappearing {
    opacity: 1;
    transform: scale(0);
    animation: badge-notif-out 1s ease-in;
}
.notif.badge-notif.disappearing > .overlay {
    animation: badge-notif-out-overlay 1s linear;
}

@keyframes notif-in {
    from {
        transform: scale(0.8) translateY(-30px);
        filter: blur(10px);
        opacity: 0;
    } to {
        transform: none;
        filter: none;
        opacity: 1;
    }
}
@keyframes notif-out {
    from {
        transform: none;
        filter: none;
        opacity: 1;
    } to {
        transform: scale(0.8) translateY(-30px);
        filter: blur(10px);
        opacity: 0;
    }
}

@keyframes badge-notif-in {
    from {
        transform: scale(0, 0.5);
    } to {
        transform: none;
    }
}
@keyframes badge-notif-in-overlay {
    from {
        background-color: #fff;
    } 20% {
        background-color: #fff;
    } 40% {
        background-color: #ffa500;
    } 70% {
        background-color: #000;
    }
}
@keyframes badge-notif-out {
    from {
        transform: none;
    } 50% {
        transform: none;
    } 75% {
        transform: scale(0);
    } 100% {
        transform: scale(0);
    }
}
@keyframes badge-notif-out-overlay {
    from {
        background-color: #000;
    } 30% {
        background-color: #ffa500;
    } 50% {
        background-color: #fff;
    } 100% {
        background-color: #fff;
    }
}