/* app/static/common/css/animations.css */

.htmx-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.htmx-block.htmx-block-visible {
    opacity: 1;
    transform: translateY(0);
}

/* For newly loaded content by HTMX, apply initial hidden state */
.htmx-indicator {
    opacity: 0; /* Hide indicator by default */
}

.htmx-request .htmx-indicator {
    opacity: 1; /* Show indicator when HTMX request is active */
}

/* Optional: Add a smooth fade-in for blocks as they are loaded */
.htmx-added {
    opacity: 0;
}

.htmx-added.htmx-block-visible {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}