.notification-highlight {
    animation: notification-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 3;
}

@keyframes notification-pulse {
    0%,
    100% {
        background-color: rgba(255, 247, 237, 0.7); /* orange-50 with opacity */
    }
    50% {
        background-color: rgba(
            255,
            237,
            213,
            0.9
        ); /* orange-100 with opacity */
    }
}

.notification-badge-pulse {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.dropdown-enter {
    transition-property: opacity, transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-leave {
    transition-property: opacity, transform;
    transition-duration: 100ms;
    transition-timing-function: ease-in;
}

.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
}