@keyframes collapse {
    from { max-height: 500px; overflow: hidden; }
    to { max-height: 0; overflow: hidden; }
}
@keyframes reveal {
    from { max-height: 0; overflow: hidden; }
    to { max-height: 500px; overflow: hidden; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
@keyframes expand {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-30%); }
    40% { transform: translateY(0); }
    60% { transform: translateY(-15%); }
    80% { transform: translateY(0); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes scroll-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
@keyframes scroll-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@keyframes rotate-180 {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

.anim-collapse {
    animation: collapse var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-reveal {
    animation: reveal var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-fade-in {
    animation: fade-in var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-fade-out {
    animation: fade-out var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-slide-in-left {
    animation: slide-in-left var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-expand {
    animation: expand var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-bounce {
    animation: bounce var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-spin {
    animation: spin var(--anim-duration, 1s) var(--anim-timing, linear) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-scroll-left {
    animation: scroll-left var(--anim-duration, 1s) var(--anim-timing, linear) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-scroll-right {
    animation: scroll-right var(--anim-duration, 1s) var(--anim-timing, linear) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}
.anim-rotate-180 {
    animation: rotate-180 var(--anim-duration, 1s) var(--anim-timing, ease) var(--anim-delay, 0s) var(--anim-iteration, 1) var(--anim-direction, normal) both;
}