.notification-wrapper {
    position: fixed;
    top: 0;
    z-index: -1;
    --angle-side: 0.5rem;
    --hover-transform: perspective(40rem) rotateX(2deg) rotateY(-3deg) translateY(-0.2rem) scale(1.01);
    --hover-transform-shadow: perspective(40rem) rotateX(2deg) rotateY(-3deg) translateY(0.1rem) translateX(-0.2rem) scale(0.985);
    padding: 0;
    margin: 1rem auto;
    width: 30rem;
    scale: 0.01;
    user-select: none;

    transition: scale 500ms ease-out;

    &.inflate {
        z-index: 12;
    }

    &.show {
        scale: 1;
    }

    >.notification {
        position: relative;
        background: white;
        padding: 0.4rem;
        font-size: 1.1rem;
        text-align: center;
        font-weight: 400;
        cursor: pointer;
        transition: transform 0.25s ease;
        transform-style: preserve-3d;
        z-index: 2;

        backface-visibility: hidden;
        text-rendering: optimizeSpeed;
        image-rendering: pixelated;



        &:hover {


            transform: var(--hover-transform);
            box-shadow:
                0 0.5rem 1.5rem rgba(0, 0, 0, 0.15),
                0 0 1rem rgba(255, 255, 255, 0.8);
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;

            background: linear-gradient(115deg,
                    transparent 35%,
                    rgba(255, 255, 255, 0.7) 50%,
                    transparent 65%);

            transform: translateX(-120%);
            transition: transform 0.5s ease;
        }

        &:hover::after {
            transform: translateX(120%);
        }

        >p {
            padding: 0;
            margin: 0;
        }

        &.warning {
            background: linear-gradient(45deg, #ebebfbee, #ffffffe8);


            >p {
                color: black;
                border: 0.1rem dashed rgba(0, 0, 0, 0.093);
                border-left: none;
                border-right: none;
                padding: 0.8rem;
                text-shadow: 0px 0px 1px white, 0px 0px 5px white, 0px 0px 8px white;
            }

            clip-path: polygon(var(--angle-side) 0,
                calc(100% - var(--angle-side)) 0,
                100% var(--angle-side),
                100% calc(100% - var(--angle-side)),
                calc(100% - var(--angle-side)) 100%,
                var(--angle-side) 100%,
                0 calc(100% - var(--angle-side)),
                0 var(--angle-side));

            &:hover {
                /* background: #b6cdf6; */

                /* image-rendering: pixelated; */
                image-rendering: crisp-edges;
                image-rendering: -moz-crisp-edges;

                /* 2. Disable font anti-aliasing (forces hard pixel edges on text) */
                -webkit-font-smoothing: none;
                -moz-osx-font-smoothing: grayscale;
                text-rendering: optimizeSpeed;
                transform-style: flat;
                /* font-smooth: never; */
                backface-visibility: hidden;
                will-change: transform;
                transform-box: fill-box;



                >p {
                    /* &::after {
                        content: "Close";
                        font-size: 1.1rem;
                    } */

                    text-shadow: none;
                }
            }
        }
    }

    >.shadow {
        position: absolute;
        display: block;
        margin: 1rem auto;
        width: 30rem;
        transition: transform 0.25s ease;
        --distance: 0.2rem;
        top: var(--distance);
        margin-left: calc(2.6 * var(--distance));
        height: 4.7rem;
        z-index: 1;
        background: rgba(128, 128, 128, 0.496);
        padding: 0;
        pointer-events: none;
        filter: blur(10px);

        clip-path: polygon(var(--angle-side) 0,
                calc(100% - var(--angle-side)) 0,
                100% var(--angle-side),
                100% calc(100% - var(--angle-side)),
                calc(100% - var(--angle-side)) 100%,
                var(--angle-side) 100%,
                0 calc(100% - var(--angle-side)),
                0 var(--angle-side));
    }

    /* shadow mirrors the notification's hover animation (works in either DOM order) */
    &:has(> .notification:hover)>.shadow {
        transform: var(--hover-transform-shadow);
    }
}