.SlideInUI {
    animation: slide-in-left 0.75s cubic-bezier(0.250, 0.460, 0.450, 1) both;
}

.mud-tooltip-inline {
    margin-left: auto !important;
    margin-right: auto !important;
}

@keyframes slide-in-left {
    0% {
        /* Start from -100px (the left) */
        transform: translateX(-250px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.ping {
    animation: ping 1s ease-in-out infinite both
}

@keyframes ping {
    0% {
        transform: scale(.2);
        opacity: .8
    }

    80% {
        transform: scale(1.2);
        opacity: 0
    }

    100% {
        transform: scale(1.5);
        opacity: 0
    }
}

.clickable-card {
    cursor: pointer;
    /* Add transition here so it works when leaving hover/active states */
    transition: transform 0.1s ease-in-out, box-shadow 0.25s ease-in-out;
}

    .clickable-card:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .clickable-card:active {
        transform: scale(0.98);
        /* Shorter transition for the click feel */
        transition: transform 0.1s ease-in-out;
    }


.updates-card-dark {
    background-color: #210E00;
}

.updates-card-light {
    background-color: #ede5df;
}

.lesson-card-light {
    background-color: #fafafa !important;
}

.lesson-card-dark {
    background-color: #4c5b69 !important;
}

.selected-lesson-card-dark {
    background-color: #171e24 !important;
}

.selected-lesson-card-light {
    background-color: #e3e3e3 !important;
}




.blur-bg-light {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1rem 0;
    overflow: hidden; /* keep ::before inside */
}

    /* blurred background layer */
    .blur-bg-light::before {
        content: "";
        position: absolute;
        inset: 0; /* top, right, bottom, left = 0 */
        background: linear-gradient(360deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 10%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.4) 100%);
        pointer-events: none; /* don't block clicks */
        z-index: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #ffffff 100%);
        -webkit-mask-repeat: no-repeat;
        mask-image: linear-gradient(to bottom, transparent, black 100%);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }

    /* ensure children (button) appear above the blur */
    .blur-bg-light > * {
        position: relative;
        z-index: 1;
    }

.blur-bg-dark {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1rem 0;
    overflow: hidden; /* keep ::before inside */
}

    /* blurred background layer */
    .blur-bg-dark::before {
        content: "";
        position: absolute;
        inset: 0; /* top, right, bottom, left = 0 */
        background: linear-gradient(360deg, rgba(54, 47, 42, 1) 0%, rgba(54, 47, 42, 0.9) 10%, rgba(54, 47, 42, 0.4) 60%, rgba(54, 47, 42, 0) 100%);
        pointer-events: none; /* don't block clicks */
        z-index: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #285c5c 100%);
        -webkit-mask-repeat: no-repeat;
        mask-image: linear-gradient(to bottom, transparent, #285c5c 100%);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }

    /* ensure children (button) appear above the blur */
    .blur-bg-dark > * {
        position: relative;
        z-index: 1;
    }