/* Elements are visible until JavaScript prepares a supported preset. */
[data-animate].is-pending {
    opacity: 0;
}

[data-animate="fade-up"].is-pending { transform: translateY(20px); }
[data-animate="fade-down"].is-pending { transform: translateY(-20px); }
[data-animate="fade-left"].is-pending { transform: translateX(20px); }
[data-animate="fade-right"].is-pending { transform: translateX(-20px); }
[data-animate="scale-in"].is-pending { transform: scale(0.97); }

[data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--transition-slow) var(--ease-smooth),
        transform var(--transition-slow) var(--ease-smooth);
    transition-delay: var(--animation-delay, 0ms);
}

/* Reveal focused content immediately, including controls reached by Tab. */
[data-animate].is-pending:focus-within,
[data-animate].is-visible:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate].is-pending {
        opacity: 1;
        transform: none;
        transition: none;
    }
}