.fade {
    opacity: 0;
    animation: fadeAnim .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeAnim {
    to { opacity: 1; }
}

.fade-fast {
    opacity: 0;
    animation: fadeAnim .25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-slow {
    opacity: 0;
    animation: fadeAnim .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUpAnim .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeUpAnim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-down {
    opacity: 0;
    transform: translateY(-12px);
    animation: fadeDownAnim .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeDownAnim {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes copliotCursorPulse {
    0% {
        transform: translateY(1px) scale(1);
    }
    50% {
        transform: translateY(1px) scale(1.35);
    }
    100% {
        transform: translateY(1px) scale(1);
    }
}

.fade-left {
    opacity: 0;
    transform: translateX(12px);
    animation: fadeLeftAnim .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeLeftAnim {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-right {
    opacity: 0;
    transform: translateX(-12px);
    animation: fadeRightAnim .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeRightAnim {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.flip-x {
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: center;
    animation: flipXAnim .55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes flipXAnim {
    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

.flip-y {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: center;
    animation: flipYAnim .55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes flipYAnim {
    to {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

.fade-scale {
    opacity: 0;
    transform: scale(.96);
    animation: fadeScaleAnim .45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeScaleAnim {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tz-outline-flash-keyframes {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulse-opacity {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

.pulse {
    animation: pulse-opacity 1.6s ease-in-out infinite;
}
.ai-sweep {
    display: inline-block;
    color: rgba(var(--mud-palette-text-secondary-rgb), 0.2) !important;
    background: linear-gradient(
            90deg,                 
            currentColor 46%,
            rgba(255,255,255,0.25) 48%,
            rgba(255,255,255,0.55) 50%,
            rgba(255,255,255,0.25) 52%,
            currentColor 54%
    );
    background-size: 300% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: ai-sweep 1.1s linear infinite;
}

@keyframes ai-sweep {
    0% {
        background-position: 100% 50%;
    }
    60% {
        background-position: 0% 50%; /* move to LEFT */
    }
    100% {
        background-position: 0% 50%;
    }
}


.tz-dialog-open-slide-up {
    animation: tz-open-dialog-slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tz-open-dialog-slide-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}