.glass {
    background: color-mix(
        in srgb,
        var(--mud-palette-drawer-background) 35%,
        transparent
    );
    backdrop-filter: blur(12px);
}

.mud-overlay {
    background-color: rgba(4, 92, 136, 0.251) !important;
}

.fade-in-left {
    animation: fadeInLeft 1.0s ease-in 3.2s both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 1.0s ease-in 1.2s both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(64px) translateY(0) scale(0);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-top {
    animation: fadeInTop 1.0s ease-in .2s both;
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-bottom {
    animation: fadeInBottom 1.0s ease-in 2.2s both;
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-back {
    animation: fadeInBack 1.0s ease-in .2s both
}

@keyframes fadeInBack {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateX(0) translateY(0) scale(0);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }    
}

.fade-in-last {
    animation: fadeInBack 1.0s ease-in 5.2s both
}