@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 shrink {
    from { transform: scale(1); }
    to { transform: scale(0.9); }
}
@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-shrink {
    animation: shrink 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;
}

/* Seamless marquee (published pages): marquee.js clones the children and sets --marquee-shift to one group width. */
@keyframes marquee-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--marquee-shift, 0px) * -1)); }
}
@keyframes marquee-right {
    from { transform: translateX(calc(var(--marquee-shift, 0px) * -1)); }
    to { transform: translateX(0); }
}
.marquee-active {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    animation: none;
}
.marquee-active > * {
    flex: none;
}
.anim-scroll-left.marquee-active > * {
    animation: marquee-left var(--anim-duration, 10s) linear var(--anim-delay, 0s) infinite var(--anim-direction, normal);
}
.anim-scroll-right.marquee-active > * {
    animation: marquee-right var(--anim-duration, 10s) linear var(--anim-delay, 0s) infinite var(--anim-direction, normal);
}
@keyframes bg-scroll-down {
    from { background-position-y: 0; }
    to { background-position-y: 200px; }
}
.anim-bg-scroll-down {
    background-repeat: repeat-y;
    background-size: 100% 200px;
    animation: bg-scroll-down var(--anim-duration, 3s) linear var(--anim-delay, 0s) var(--anim-iteration, infinite) var(--anim-direction, normal);
}