@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes slide-in {
    0% { transform: translateY(-100%);opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-out {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; display: none; }
}

@keyframes highlight {
    0% { background-color: #efefef; }
    50% { background-color: #ddd; }
    100% { background-color: #efefef; }
}

@keyframes zoom-in {
    0% { transform: scale(0.66); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes story-halo {
    0% {
        transform: rotate(0deg) translate(-.25rem, -.25rem);
    }
    100% {
        transform: rotate(360deg) translate(-.25rem, -.25rem);
    }
}

@keyframes progress-bar-fill {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}