@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.anim-fade {
    animation: fadeIn var(--dur) var(--ease) both;
}
.anim-up {
    animation: fadeUp var(--dur) var(--ease) both;
}
.anim-scale {
    animation: scaleIn var(--dur) var(--ease) both;
}
.stagger > * {
    opacity: 0;
    animation: fadeUp var(--dur) var(--ease) forwards;
}
.stagger > *:nth-child(1) {
    animation-delay: 40ms;
}
.stagger > *:nth-child(2) {
    animation-delay: 80ms;
}
.stagger > *:nth-child(3) {
    animation-delay: 120ms;
}
.stagger > *:nth-child(4) {
    animation-delay: 160ms;
}
.stagger > *:nth-child(5) {
    animation-delay: 200ms;
}
.stagger > *:nth-child(6) {
    animation-delay: 240ms;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}