/* Animation utilities */
.fadeIn {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* FadeDown animation for conditional buttons */
.fadeDown {
    animation: fadeDownAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeDownAnimation {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInTrAnimation {
    0% {
        opacity: 0;
        border-style: hidden;
    }

    100% {
        opacity: 1;
        border-style: inherit;
        border-color: var(--tblr-btn-border-color);
    }
}

.tr-fadeIn {
    opacity: 0;
    animation: fadeInTrAnimation 1s;
    animation-delay: calc(0.1s * var(--index));
    animation-fill-mode: forwards;
}

.directory-fadeIn {
    opacity: 0;
    animation: fadeInAnimation 1s;
    animation-delay: calc(0.1s * var(--index));
    animation-fill-mode: forwards;
}

/* Ensure fadeDown animation works with JavaScript controlled visibility */
.btn-conditional:not(.d-none).fadeDown {
    animation: fadeDownAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}