@media (prefers-reduced-motion) {
    * {
      animation: none !important;
      transition: none !important;
    }
}

@keyframes slide-up {
    from {
        transform: translateY(12px) scale(0.99);
        opacity: 50%
    }
    to {
        transform: translateY(0px) scale(1);
        opacity: 100%;
    }
}

@keyframes slide-up-mobile { /* Disable slow scale animation on mobile */
    from {
        transform: translateY(20px);    /* Larger so you can see after burger menu fade */
        opacity: 50%
    }
    to {
        transform: translateY(0px);
        opacity: 100%;
    }
}

@keyframes slide-down {
    from {
        transform: translateY(-10px);
        opacity: 50%
    }
    to {
        transform: translateY(0px);
        opacity: 100%;
    }
}

@keyframes flash {
    from {
        filter: brightness(1.2)
    }
    to {
        filter: brightness(1)
    }
}

/* 
Scaling elements isn't great for accessibility, or ensuring the animation is smooth.
@keyframes grow {
    from {
        transform: scale(0.95);
        opacity: 10%;
    }
    to {
        transform: scale(1);
        opacity: 100%;
    }
} */

@keyframes no-scroll {
    from {
        overflow-y: hidden;
    }
    to {
        overflow-y: auto;
    }
}

@keyframes exclude-animation {
    /* This cancels the slide-down animation by doing the opposite of what 
    it does. Kind of janky, but it mostly works. Opacity isn't fully canceled. */
    from {
        transform: translateY(-12px) scale(1);
        opacity: 100%
    }
    to {
        transform: translateY(0px) scale(1);
        opacity: 100%;
    }
}