/* Wave Animation */
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-15deg); }
}

/* Steel Toast Notification System */
#steel-toast-container {
    position: fixed;
    bottom: 1.25rem;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
    width: min(calc(100vw - 2rem), 380px);
    right: 1.25rem;
    left: auto;
}
[dir="rtl"] #steel-toast-container {
    left: 1.25rem;
    right: auto;
}
@media (max-width: 480px) {
    #steel-toast-container {
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
        padding: 0 0.5rem 0.5rem;
    }
}
@keyframes steelToastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes steelToastOut {
    from { opacity: 1; transform: translateY(0)  scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}
@keyframes steelProgress {
    from { width: 100%; }
    to   { width: 0%; }
}
.steel-toast {
    animation: steelToastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
}
.steel-toast.dismissing {
    animation: steelToastOut 0.22s ease-in forwards;
}
.steel-toast-bar {
    animation: steelProgress linear forwards;
}

/* PWA Modal Animation */
@keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
#pwa-modal-box.pwa-modal-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}