phoenix_duskmoon.css

/* @import "tailwindcss/base"; */
/* @import "tailwindcss/components"; */
@import "tailwindcss/utilities";


/* modal */
.modal {
    position: relative;
    box-shadow: var(--shadow-2), 0 0 0 100vw rgb(0 0 0 / 0.8);

    background: #fff;
    color: #222;
    border: 0;
    border-radius: 0.25rem;

    --x: 0;
    --y: 0;
    --delay: 750ms;
    --animation-timing-func: cubic-bezier(0.75, 0.7, 0, 1.02);
}
.modal > .close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}

.modal::backdrop {
    opacity: 0;
    isolation: isolate;
    /* display: none; */
    transition: all 0s;
}
.modal.backdrop::backdrop {
    opacity: 0;
    display: initial;
    transition: all 0s;
}

.modal[open] {
    animation: 
        fade-in var(--delay) forwards var(--animation-timing-func),
        fly-in var(--delay) forwards var(--animation-timing-func);
    pointer-events: auto;
    visibility: visible;
}

.modal[closing] {
    animation: 
        fade-out var(--delay) forwards var(--animation-timing-func),
        fly-out var(--delay) forwards var(--animation-timing-func);

    display: block;
    inset: 0;
    pointer-events: none;
}

.modal[open]::backdrop {
    transform: none !important;
    animation: fade-in 500ms forwards;
}

.modal[closing]::backdrop {
    transform: none !important;
    animation: fade-out 500ms forwards;
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

@keyframes fly-in {
    0% {
        transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
        perspective(6em);
    }
    100% {
        transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
    }
}
@keyframes fly-out {
    0% {
        transform: translate3d(0%, 0%, 0px) scale(1) perspective(1em);
    }
    100% {
        transform: translate3d(var(--x), var(--y), -200px) scale(0.01)
        perspective(6em);
    }
}