@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes clip-rise {
    from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); }
    to { clip-path: inset(0 0 -10% 0); transform: translateY(0); }
}

@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes line-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.25); }
    50% { transform: scaleY(1); }
}

@keyframes caret {
    50% { opacity: 0; }
}

@keyframes rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.anim-fade-up {
    animation: fade-up var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.anim-clip-rise {
    animation: clip-rise var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

.anim-pop-in {
    animation: pop-in 420ms var(--ease-spring) both;
}

.anim-shake {
    animation: shake 380ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}