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

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

@keyframes cloud-pop {
    0% {
        opacity: 0;
        transform: translate(var(--cloud-anchor-x, 0%), var(--cloud-anchor-y, 0%)) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(var(--cloud-anchor-x, 0%), var(--cloud-anchor-y, 0%)) scale(1);
    }
}

.animate-fade-in {
    animation: fade-in 300ms ease forwards;
}

.animate-fade-out {
    animation: fade-out 300ms ease forwards;
}

.animate-cloud-pop {
    animation: cloud-pop 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

    .answer-button,
    .story-next-button {
        transition-duration: 1ms !important;
    }
}